WP プラグイン「AMP」をカスタマイズする方法【自分のアイコン非表示や見出しの装飾など】

WP プラグイン「AMP」を導入したんだけど、どうやってアイコンを消したり見出しの装飾をすればいいんだろう…
 

と困っている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

  • AMP ページのヘッダーに画像を表示させる方法
  • 上部に表示される自分のアイコンと名前などを非表示にする方法
  • 見出しなどの装飾をする方法
  • 「Exit mobile version」を日本語表記にする方法
 

通常であれば「追加 CSS」に CSS を追加すればカスタマイズできますが、AMP の場合は記述場所が全く違うので「追加 CSS」に何を書いても反映しません。

方法はいくつかありますが、当記事では最も簡単な「function.php」に記述する方法を紹介していきます
 

それでは、WordPress プラグイン「AMP」を使った場合にカスタマイズする方法を解説しましょう。

この記事では function.php に記述していく方法を紹介するので、必ず「子テーマ」を利用してくださいね。
 

AMPのカスタマイズをするための準備


 

CSS を使ってデザインする場合には、

  • ヘッダーに定義する
  • PHP ファイルを子テーマに作成する
  • function.php に記述する

方法があります。
 

でも、個人的には「function.php」に記述する方法が最も簡単だと思うので、この記事ではその方法で解説していきます。

CSS を反映させるために必要な記述

通常通り CSS だけを function.php に記述しても何も反映しないので、AMP 用に CSS の「入力欄」を作ってあげます
 

では、下記のコードを「function.php」にコピペしてください。

> GitHub でコードを確認する

 

あとは、「CSS の追加は以下に」と「CSS の追加はこの上に」の間に、通常通り CSS を追加していけば反映されます。

なので、ここからはここに追加する CSS の説明だけを解説するので、上記の部分に追加していってくださいね。
 

CSS の制限がいくつかある

AMP では色々な要素が使えないのですが、CSS においても使えないものが存在します。

使えない CSS

  • !important
  • @Charset

なので、優先順位などを気にしながら CSS を記述していきましょうね。

AMPのカスタマイズ例7選


 

上記のコードを「function.php」に追加したら、さっそく CSS を追加して AMP ページのデザインを変えていきましょう。
 

ここでは例として、

  1. ヘッダーに画像を表示させる
  2. ヘッダーの背景色を変える
  3. サイトアイコンを消す
  4. 自分のアイコンと名前を消す
  5. フッターのサイト名と線を消す
  6. フォントを変更する
  7. 見出しのデザインを変える

を紹介します。

ヘッダーに画像を表示させる

ヘッダーに画像を表示させるには、以下のコードを追加してください。

> GitHub でコードを確認する

 

そしたら、「ここに画像の URL を入力」という部分に表示させたい画像 URL と書き換えれば、ヘッダーに任意の画像が表示されるようになります。

画像の幅や高さは、好きなように変えて OK です。

ヘッダーの背景色を変える

メニューのカスタマイズからヘッダーの色を変更できるのですが、ヘッダーの色と合わせて「リンクの色」までも変わってしまう仕様になっています。

もしヘッダーの背景色を白にしてしまうと、記事内のリンクまでも全てが白になってしまいます。
 

なので、リンクの色とは別にヘッダーの背景色だけを変えたい場合には、下記のコードを追加してください。

> GitHub でコードを確認する

 

上記の例では #fff(白)になっているので、テーマで使っている色などに変えておきましょう。

サイトアイコンを消す

サイトアイコンを設定している場合には、AMP ページでは右上に常時表示されるようになります。
 

もし非表示にしたい場合は、下記のコードを追加してください。

> GitHub でコードを確認する

自分のアイコンと名前を消す

個人的に一番気になった部分ではあるんですが、AMP にすると強制的に「投稿者のアイコンと名前」がトップに表示されてしまいます。
 

もし非表示にしたい場合は、下記のコードを追加してください。

> GitHub でコードを確認する

フッターのサイト名と線を消す

こちらもアイコンなどと同じように、フッター部分にサイト名が強制的に表示されるようになっています。

またそれに合わせて、コンテンツと区別がつくように細い線も表示されています。
 

もしこれらを非表示にしたい場合は、下記のコードを追加してください。

> GitHub でコードを確認する

 

フォントを変更する

デフォルトでは「Georgia」が設定されていますが、変更することができます。
 

フォントを変更したい場合は、下記のコードを利用して調整してください。

> GitHub でコードを確認する

どんなフォントがあるか分からない場合は、サイト「Font-family メーカ」を参考にどうぞ。
 

見出しのデザインを変更する

デフォルトでは「見出し」のデザインは何も設定されていないので、h2 や h3 などを設定しても多少文字が太くなる程度です。
 

なので、下記のように CSS でデザインしてみましょう。

> GitHub でコードを確認する

 

あくまでシンプルな見出しの例なので、好きにデザインして OK です。

デザイン例を知りたい場合は、サルワカさんの「見出しのデザイン例まとめ68選」が参考になります。
 

「Exit mobile version」を日本語表記にする方法


 

AMP ページを表示させると、ページの一番下に「Exit mobile version」と表示されるようになります。
 

これを訳すと、

スマホ版を終了する

ということになります。
 

「Exit mobile version」をタップするとわかりますが、AMP ページではなく通常バージョンで記事が表示されるようになります。

逆に通常ページをスマホで読んでいると、ページの一番下に「Go to mobile version」と表示されるようにもなります。
 

もしこの部分を日本語表記にしたい場合は、下記のコードを function.php に追加してください。

> GitHub でコードを確認する

 

上記はあくまで例なので、別の日本語に変えても OK です。

上記のコードは CSS ではないので、CSS の入力欄には入力しないように注意してくださいね。
 

さいごに:さくっとカスタマイズしよう

以上で、WordPress プラグイン「AMP」を使った場合にカスタマイズする方法を解説しました。
 

AMP だと通常とは勝手は少し違いますが、function.php に CSS の入力欄さえ作ってしまえば、あとはいつもと変わらない感じで作業ができます。

他にも細かいカスタマイズはありますが、それはまた別の機会に紹介します。

関連記事はこちら