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

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

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

カスタマイズ箇所SNS(AMP)
カスタマイズ方法CSS
テンプレート変更なし
コピペの可否95% 可能

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 ページでもシェアしてもらえるように、カスタマイズをされてはいかがでしょうか。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする