と困っている人もいるでしょう。
そこで、この記事では下記の内容を解説します。
この記事で分かること
- AMP ページのヘッダーに画像を表示させる方法
- 上部に表示される自分のアイコンと名前などを非表示にする方法
- 見出しなどの装飾をする方法
- 「Exit mobile version」を日本語表記にする方法
通常であれば「追加 CSS」に CSS を追加するとカスタマイズできますが、AMP の場合は記述場所が全く違うので「追加 CSS」に何を書いても反映しません。
方法はいくつかありますが、当記事では最も簡単な「function.php」に記述する方法を紹介していきます。
それでは、WordPress プラグイン「AMP」を使った場合にカスタマイズする方法を解説しましょう。
ココに注意
この記事では function.php に記述していく方法を紹介するので、必ず「子テーマ」を利用してくださいね。
ＡＭＰのカスタマイズをするための準備
CSS を使ってデザインする場合には、
- ヘッダーに定義する
- PHP ファイルを子テーマに作成する
- function.php に記述する
方法があります。
でも、個人的には「function.php」に記述する方法が最も簡単だと思うので、この記事ではその方法で解説していきます。
CSS を反映させるために必要な記述
通常通り CSS だけを function.php に記述しても何も反映しないので、AMP 用に CSS の「入力欄」を作ってあげます。
では、下記のコードを「function.php」にコピペしてください。
あとは、「CSS の追加は以下に」と「CSS の追加はこの上に」の間に、通常通り CSS を追加していけば反映されます。
CSS の制限がいくつかある
AMP では色々な要素が使えないのですが、CSS においても使えないものが存在します。
- !important
- @Charset
なので、優先順位などを気にしながら CSS を記述していきましょうね。
ＡＭＰのカスタマイズ例７選
上記のコードを「function.php」に追加したら、さっそく CSS を追加して AMP ページのデザインを変えていきましょう。
ここでは例として、
- ヘッダーに画像を表示させる
- ヘッダーの背景色を変える
- サイトアイコンを消す
- 自分のアイコンと名前を消す
- フッターのサイト名と線を消す
- フォントを変更する
- 見出しのデザインを変える
を紹介します。
ヘッダーに画像を表示させる
ヘッダーに画像を表示させるには、以下のコードを追加してください。
そしたら、「ここに画像の URL を入力」という部分に表示させたい画像 URL と書き換えれば、ヘッダーに任意の画像が表示されるようになります。
画像の幅や高さは、好きなように変えて OK です。
ヘッダーの背景色を変える
メニューのカスタマイズからヘッダーの色を変更できるのですが、ヘッダーの色と合わせて「リンクの色」までも変わってしまう仕様になっています。
もしヘッダーの背景色を白にしてしまうと、記事内のリンクまでも全てが白になってしまいます。
なので、リンクの色とは別にヘッダーの背景色だけを変えたい場合には、下記のコードを追加してください。
上記の例では #fff（白）になっているので、テーマで使っている色などに変えておきましょう。
サイトアイコンを消す
サイトアイコンを設定している場合には、AMP ページでは右上に常時表示されるようになります。
もし非表示にしたい場合は、下記のコードを追加してください。
自分のアイコンと名前を消す
個人的に一番気になった部分ではあるんですが、AMP にすると強制的に「投稿者のアイコンと名前」がトップに表示されてしまいます。
もし非表示にしたい場合は、下記のコードを追加してください。
フッターのサイト名と線を消す
こちらもアイコンなどと同じように、フッター部分にサイト名が強制的に表示されるようになっています。
またそれに合わせて、コンテンツと区別がつくように細い線も表示されています。
もしこれらを非表示にしたい場合は、下記のコードを追加してください。
フォントを変更する
デフォルトでは「Georgia」が設定されていますが、変更できます。
フォントを変更したい場合は、下記のコードを利用して調整してください。
見出しのデザインを変更する
デフォルトでは「見出し」のデザインは何も設定されていないので、h2 や h3 などを設定しても多少文字が太くなる程度です。
なので、下記のように CSS でデザインしてみましょう。
あくまでシンプルな見出しの例なので、好きにデザインして OK です。
「Exit mobile version」を日本語表記にする方法
AMP ページを表示させると、ページの一番下に「Exit mobile version」と表示されるようになります。
これを訳すと、
スマホ版を終了する
ということになります。
「Exit mobile version」をタップするとわかりますが、AMP ページではなく通常バージョンで記事が表示されるようになります。
逆に通常ページをスマホで読んでいると、ページの一番下に「Go to mobile version」と表示されるようにもなります。
もしこの部分を日本語表記にしたい場合は、下記のコードを function.php に追加してください。
上記はあくまで例なので、別の日本語に変えても OK です。
さいごに：さくっとカスタマイズしよう
以上で、WordPress プラグイン「AMP」を使った場合にカスタマイズする方法を解説しました。
AMP だと通常とは勝手は少し違いますが、function.php に CSS の入力欄さえ作ってしまえば、あとはいつもと変わらない感じで作業ができます。
他にも細かいカスタマイズはありますが、それはまた別の機会に紹介します。
