Simplicity の AMP ページでシェアボタンに SNS アイコンを表示する

AMPのシェアボタンにSNSアイコン

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

Simplicity の AMP ページでは、シェアボタンに各 SNS サービスのアイコンが表示されません。

そこで AMP ページでも、シェアボタンに各 SNS サービスのアイコンを表示するカスタマイズをご紹介します。

Simplicity 親テーマにある Icomoon アイコンフォントを使用する

まずは完成図をご覧ください。

AMPページのシェアボタンにSNSアイコンを表示した例

ばっちり各シェアボタンにアイコンが表示されました。

もちろん、 AMP エラーは出ません。

Simplicity の通常ページでは、 Icomoon で作成されたアイコンフォントが SNS アイコンに指定されています。

AMP ページでも使用できるため、そのまま Icomoon で作成されたアイコンフォントを使用します。

ちなみに「 Twitter 」「 Facebook 」「 Google Plus 」「 Pocket 」に関しては、 Font Awesome で表示することも可能です。

CSS の共通設定

少しでも効率的に CSS を指定するために、まずは下記の共通設定を子テーマの amp.css に追加します。

@font-face {
  font-family: 'icomoon';
  src: url('サイトのURL/wp-content/themes/simplicity2/webfonts/icomoon/fonts/icomoon.ttf?hd9e6o') format('truetype'),
       url('サイトのURL/wp-content/themes/simplicity2/webfonts/icomoon/fonts/icomoon.woff?hd9e6o') format('woff'),
       url('サイトのURL/wp-content/themes/simplicity2/webfonts/icomoon/fonts/icomoon.svg?hd9e6o#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.social-icon:before {
  display: inline-block;
  font: normal normal normal 16px/1 icomoon;
  margin-right: 8px;
  position: relative;
  top: 1.5px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@font-face{} で、Simplicity 親テーマに設置されている Icomoon のアイコンフォントを呼び出しています。

AMP で @font-face を用いる際には、絶対パスで指定しなければなりません。

そのため、 3 ヶ所のサイトのURL の部分には、ご自身のサイト URL を必ず https または http からご指定ください。

各 SNS アイコンの CSS

続けて、使用する SNS シェアボタンの CSS のみを amp.css に追記します。

AMP で許可されている CSS のサイズは、 50キロバイトまでです。使用しない SNS の CSS まで、 amp.css に追加する余裕はありません。

Twitter アイコン

Twitter シェアボタンを使用される場合には、下記の CSS を追加します。

.icon-twitter:before {
  content: '\e91c';
}

Facebook アイコン

Facebook シェアボタンを使用される場合には、下記の CSS を追加します。

.icon-facebook:before {
  content: '\e919';
}

Google Plus アイコン

Google Plus シェアボタンを使用される場合には、下記の CSS を追加します。

.icon-googleplus:before {
  content: '\ea8b';
}

はてなブックマークアイコン

はてなブックマークシェアボタンを使用される場合には、下記の CSS を追加します。

.icon-hatena:before {
  content: '\e916';
}

Pocket アイコン

Pocket シェアボタンを使用される場合には、下記の CSS を追加します。

.icon-pocket:before {
  content: '\e914';
}

LINE アイコン

LINE シェアボタンを使用される場合には、下記の CSS を追加します。

.icon-line:before {
  content: '\e915';
}

Push7 アイコン

Push7 シェアボタンを使用される場合には、下記の CSS を追加します。

.icon-push7:before {
  content: '\e90e';
  font-size: 21px;
  top: 3.5px;
}

アイコンのサイズが小さいため、 font-size: 21px も指定しています。

また、 font-size が異なる分、 top の値も調整しています。

Feedly アイコン

Feedly シェアボタンを使用される場合には、下記の CSS を追加します。

.icon-feedly:before {
  content: '\e92e';
  font-size: 21px;
  top: 3px;
}

こちらもアイコンのサイズが小さいため、 font-sizetop の値を調整しています。


AMP では @font-face を用いることで、あらゆるフォントが使用できます。

せっかく Icomoon のアイコンフォントがテーマ内にあるのなら、使わないともったいない。

アイコンがあるとシェアボタンと認識しやすくなるため、クリック率は違ってくるはずです。

AMP ページでもシェアしてもらえるように、カスタマイズをされてはいかがでしょうか。