• WordPressにフラットデザインに似合うソーシャルネットワークのシェアボタンを作成しよう

WordPressにフラットデザインに似合うソーシャルネットワークのシェアボタンを作成しよう

by

140722 53cdada858adb WordPressにフラットデザインに似合うソーシャルネットワークのシェアボタンを作成しよう

WordPressの記事個別ページにソーシャルネットワークのシェアボタンを作成してみましょう。今回は、フラットなデザインを取り入れたボタンを自作してみたいと思います。

完成イメージ

まず、目標とする完成イメージです。マウスカーソルやタッチデバイスでタッチすると、ボタンが凹んで見えるようなスタイルとなっています。これらのボタンがどのように作られているのか、これから解説していきます。やや、ソースコードが長い部分もありますが、全てコピペ可能ですよ。

See the Pen hpDzl by Macious (@Macious) on CodePen.

フラットなアイコンフォント付きボタンの作成

2.5dBUTTONは、デザインセンス皆無の管理人でも簡単にフラットデザインにマッチするボタンが作成できる素晴らしいサイトです。アイコンフォントには、日本人のAzuyuki Motoyamaさんが作成されたLigature Symbolsが使用されています。

140725 53d1ef160ee4f WordPressにフラットデザインに似合うソーシャルネットワークのシェアボタンを作成しよう

では、実際に2.5dBUTTONでボタンを作成してみましょう。といっても、あらかじめ定められたフレームに好きな値を当てはめるだけですから、特に何も考慮することはありません。丸いボタンも、「RADIUS」「HORIZONTAL PADDING」「VERTICAL PADDING」を調整すれば簡単に作れますね。今回は、デフォルトをそのまま採用することにします。

Twitter、Facebookなどのブランドカラーの確認に便利な「BrandColors」

ソーシャルネットワークごとにアイコンの背景色を変更しましょう。「ところでFacebookってどんな色だっけ？確か青色を少し濃くした色のような…」という時に便利なのが、BrandColorsです。

140725 53d1ef1899543 WordPressにフラットデザインに似合うソーシャルネットワークのシェアボタンを作成しよう

検索キーワードにブランドの名称（Twitter、Facebookなど）を入力するだけで、そのブランドカラーを一覧表示してくれます。例えば、Facebookの場合、ブランドカラーは #3b5998 であることがわかります。BrandColorsと2.5dBUTTONを組み合わせれば簡単にボタンが作れそうですね！

この後のサンプル作成を円滑に進めるためにも、まず自分の手でボタンを１つ作成してみることをオススメします。

  1. 2.5dBUTTON
  2. Ligature Symbols
  3. BrandColors

2.5dBUTTONとBrandColorsを組み合わせたボタンの作成

では、WordPress用にソーシャルネットワークのシェアボタンを作成していきましょう。2.5dBUTTONでボタンを作成すると、すべて .general-button というクラス名のボタンが出来上がります。このクラスをソーシャルネットワークごとに名前を変更（例えば、 .facebook-button ）すれば簡単に専用のボタンが作成できます。

共通

ただ、2.5dBUTTONで作成された .general-button を使い回してもよいのですが、CSSのプロパティの多くがボタン同士で重複してしまうため、スタイルシートの容量が膨れ上がってしまいます。そこで、今回は以下の方針で作成することとしました。

  1. 部品の共通部分は .general-button 、 .button-content クラスとしてまとめる
  2. 部品の個別部分は .xxxxxx-button、 .button-content-xxxxxx とし、共通部分と組み合わせて使用する
  3. 2.5dBUTTONで提供されているアイコンフォントはそのまま使用する

この方針をもとに、まず骨格となるHTML、CSSを作成します。 :hover 、 :active 、 :before プロパティが多いため、CSSが長くなりますが、すべて2.5dBUTTONで生成したものをそのまま使用しています。（サンプルが長くなるため、タッチデバイスでの挙動は省略しています。詳細はCodePenをご覧ください）

HTML

<div class="general-button xxxxxx-button" onclick="javascript:window.open('[url]');return false;">
  <div class="button-content button-content-xxxxxx">
    <span class="icon-font">xxxxxxx</span>
  </div>
</div>

CSS

.general-button {
  position: relative;
  top: 0;
  display: inline-block;
  border-radius: 5px;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: all 0ms;
  transition: all 0ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.general-button:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  content: '';
}
.button-content {
  display: table;
  padding: 6px 7.5px;
  border-radius: 0 0 5px 5px;
  color: #f8f8f8;
  -webkit-transition: all 0ms;
  transition: all 0ms;
}
.button-text {
  display: table-cell;
  padding: 0 7.5px;
  vertical-align: middle;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.5em;
}
.general-button:hover {
  top: -3px;
  -webkit-transition: all 30ms;
  transition: all 30ms;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.general-button:hover .button-content,.general-button:hover:before {
  -webkit-transition: all 30ms;
  transition: all 30ms;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.general-button:active {
  top: 0;
  -webkit-transition: all 0ms;
  transition: all 0ms;
}
.general-button:active:before {
  top: -3px;
  padding-bottom: 3px;
  -webkit-transition: all 0ms;
  transition: all 0ms;
}
.general-button:active .button-content {
  -webkit-transition: all 0ms;
  transition: all 0ms;
}

はてなブックマーク

2.5dBUTTONは、日本人の方が作成されたLigature Symbolsをアイコンフォンとして使用しているため、はてなブックマークにも対応しています。そのままアイコンフォントを使用しましょう。

URLの[url]、[title]について

[url]、[title]は、シェア対象のページのURL、ページタイトルを表しています。URLやページタイトルに日本語が含まれる場合、シェアボタンが正常に動作しない可能性があります。適宜エンコードするようにしてください。

URL

http://b.hatena.ne.jp/add?mode=confirm&url=[url]&title=[title]

HTML

ボタンをクリックしたらシェアボタンがポップアップで表示される様に、 onClick 属性を使用します。同属性は、トップレベルの <div> タグに適用します。

また、WordPressから使用されることを考慮し、URL、タイトルは、それぞれ the_permalink() 、 the_title() メソッドに置き換えています。また、タイトルにはマルチバイト文字（日本語）が含まれる可能性があるため、 urlencode() メソッドでURLエンコードしています。

<div class="general-button hatena-button" onclick="javascript:window.open('http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo urlencode( get_the_title() ); ?>','','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=500');return false;">
  <div class="button-content button-content-hatena">
    <span class="icon-font">hatenabookmark</span>
  </div>
</div>

CSS

前述の方針に則り、個別要素のみ抜粋して作成します。 .general-button 、 .button-content クラスと組み合わせて使用することで、2.5dBUTTONで作成したボタンと同様のスタイルとなります。

.hatena-button {
  background-color: #60c7ea;
}
.hatena-button:before {
  border-bottom: 0 solid transparent;
  background-color: rgba(29,174,223,0);
}
.button-content-hatena {
  box-shadow: 0 0 rgba(29,174,223,0);
}
.hatena-button:hover {
  background-color: #6dcbeb;
}
.hatena-button:hover:before {
  border-bottom: 3px solid rgba(29,174,223,0);
}
.hatena-button:hover .button-content-hatena {
  box-shadow: 0 3px 0 0 rgba(29,174,223,1);
}
.hatena-button:active {
  background-color: #49bfe7;
  box-shadow: 0 1.6px 0 0 rgba(26,157,201,1) inset;
}
.hatena-button:active:before {
  border-bottom: 0 solid rgba(29,174,223,0);
}
.hatena-button:active .button-content-hatena {
  box-shadow: 0 0 rgba(29,174,223,0);
}

Pocket

ここで、いきなり問題発生です。2.5dBUTTONには残念ながらPocketのアイコンフォントが含まれていません。そのため、少しカスタマイズが必要です。カスタマイズについては後述します。

URL

http://getpocket.com/edit?url=[url]&title=[title]

HTML

Pocketのみ、アイコンフォントの表示部分が、 <i class="icon-pocket"></i> となります。別途アイコンフォントを後から調達してきましょう。

<div class="general-button pocket-button" onclick="window.open('http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo urlencode( get_the_title() ); ?>', 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">
  <div class="button-content button-content-pocket">
    <i class="icon-pocket"></i>
  </div>
</div>

CSS

.pocket-button {
  background-color: #d3505a;
}
.pocket-button:before {
  border-bottom: 0 solid transparent;
  background-color: rgba(171,43,52,0);
}
.button-content-pocket {
  box-shadow: 0 0 rgba(171,43,52,0);
}
.pocket-button:hover {
  background-color: #d65c65;
}
.pocket-button:hover:before {
  border-bottom: 3px solid transparent;
}
.pocket-button:hover .button-content-pocket {
  box-shadow: 0 3px 0 0 rgba(171,43,52,1);
}
.pocket-button:active {
  background-color: #cd3b46;
  box-shadow: 0 1.6px 0 0 rgba(151,37,46,1) inset;
}
.pocket-button:active:before {
  border-bottom: 0 solid rgba(171,43,52,0);
}
.pocket-button:active .button-content-pocket {
  box-shadow: 0 0 transparent;
}

Twitter

Twitterはカスタマイズする要素は特にありません。はてなブックマークと同様です。ただし、タイトル要素が含まれるため、URLエンコードは忘れずに行っておきましょう。

URL

https://twitter.com/intent/tweet?text=[title]&url=[url]

HTML

<div class="general-button twitter-button" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=<?php echo urlencode( get_the_title() ); ?>&url=<?php the_permalink(); ?>','','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=650');return false;">
  <div class="button-content button-content-twitter">
    <span class="icon-font">twitter</span>
  </div>
</div>

CSS

.twitter-button {
  background-color: #55acee;
}
.twitter-button:before {
  border-bottom: 0 solid transparent;
  background-color: rgba(22,137,224,0);
}
.button-content-twitter {
  box-shadow: 0 0 rgba(22,137,224,0);
}
.twitter-button:hover {
  background-color: #62b2ef;
}
.twitter-button:hover:before {
  border-bottom: 3px solid rgba(22,137,224,0);
}
.twitter-button:hover .button-content-twitter {
  box-shadow: 0 3px 0 0 rgba(22,137,224,1);
}
.twitter-button:active {
  background-color: #3da0eb;
  box-shadow: 0 1.6px 0 0 rgba(20,122,200,1) inset;
}
.twitter-button:active:before {
  border-bottom: 0 solid rgba(22,137,224,0);
}
.twitter-button:active .button-content-twitter {
  box-shadow: 0 0 rgba(22,137,224,0);
}

Facebook

Facebookも、Twitter同様にカスタマイズする箇所は特にありません。タイトルもないためURLエンコードを意識する必要もありません。（URLに日本語が含まれる場合は考慮が必要）

URL

http://www.facebook.com/sharer/sharer.php?u=[url]

HTML

<div class="general-button facebook-button" onclick="javascript:window.open('http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>','','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=500');return false;">
  <div class="button-content button-content-facebook">
    <span class="icon-font">facebook</span>
  </div>
</div>

CSS

.facebook-button {
  background-color: #3b5998;
}
.facebook-button:before {
  border-bottom: 0 solid transparent;
  background-color: rgba(37,56,96,0);
}
.button-content-facebook {
  box-shadow: 0 0 rgba(37,56,96,0);
}
.facebook-button:hover {
  background-color: #3f5fa3;
}
.facebook-button:hover:before {
  border-bottom: 3px solid rgba(37,56,96,0);
}
.facebook-button:hover .button-content-facebook {
  box-shadow: 0 3px 0 0 rgba(37,56,96,1);
}
.facebook-button:active {
  background-color: #334e85;
  box-shadow: 0 1.6px 0 0 rgba(30,45,78,1) inset;
}
.facebook-button:active:before {
  border-bottom: 0 solid rgba(37,56,96,0);
}
.facebook-button:active .button-content-facebook {
  box-shadow: 0 0 rgba(37,56,96,0);
}

Google+

最後に、Google+です。Facebookと同様です。

URL

https://plus.google.com/share?url=[url]

HTML

<div class="general-button gplus-button" onclick="javascript:window.open('https://plus.google.com/share?url=<?php the_permalink(); ?>','','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=500');return false;">
  <div class="button-content button-content-gplus">
    <span class="icon-font">google</span>
  </div>
</div>

CSS

.gplus-button {
  background-color: #dd4b39;
}
.gplus-button:before {
  border-bottom: 0 solid transparent;
  background-color: rgba(171,45,29,0);
}
.button-content-gplus {
  box-shadow: 0 0 rgba(171,45,29,0);
}
.gplus-button:hover {
  background-color: #df5646;
}
.gplus-button:hover:before {
  border-bottom: 3px solid rgba(171,45,29,0);
}
.gplus-button:hover .button-content-gplus {
  box-shadow: 0 3px 0 0 rgba(171,45,29,1);
}
.gplus-button:active:before {
  border-bottom: 0 solid rgba(171,45,29,0);
}
.gplus-button:active .button-content-gplus {
  box-shadow: 0 0 rgba(171,45,29,0);
}

アイコンフォント

続いて、アイコンフォントのCSSを紹介します。サンプルのフォントファイルへのパスは、適宜ご自身の環境に置き換えてお読みいただけると助かります。

アイコンフォント（Pocketを除く）

まずは、Pocket以外です。Pocketを除くすべてのソーシャルネットワークのアイコンは、Ligature Symbolsでデフォルトで提供されています。HTML部分にはこれまでも登場してきましたが、内容をおさらいしておきましょう。

HTML

<span class="icon-font">hatenabookmark</span>
<span class="icon-font">twitter</span>
<span class="icon-font">facebook</span>
<span class="icon-font">google</span>

CSS

2.5dBUTTONの内容そのままですが、１点注意事項があります。

@font-face {
  font-weight:400;
  font-style:normal;
  font-family:LigatureSymbols;
  src:url(../fonts/LigatureSymbols-2.11.eot);
  src:url(../fonts/LigatureSymbols-2.11.eot?#iefix) format("embedded-opentype"),
    url(../fonts/LigatureSymbols-2.11.woff) format("woff"),
    url(../fonts/LigatureSymbols-2.11.ttf) format("truetype"),
    url(../fonts/LigatureSymbols-2.11.svg#LigatureSymbols) format("svg");
}

.icon-font {
  font-family: LigatureSymbols;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga"1,"dlig"1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga"1,"dlig"1;
  -o-font-feature-settings: "liga"1,"dlig"1;
}

text-rendering、font-feature-settingsプロパティについて

Ligature Symbolsで使用されている、これらのCSSのプロパティはIE未対応です。そのため、IEではテキストがそのまま表示されることを考慮しておきましょう。CSSのプロパティが、どのブラウザに対応しているかを確認するためには、Can I useが便利です。ぜひブックマークしておきましょう！（主にIEのために…）

  1. Can I use… Support tables for HTML5, CSS3, etc

アイコンフォント（Pocket）

続いて、Pocketのアイコンフォントを作成します。個別のアイコンフォントの作成にはFontelloが便利です。Fontelloでは、Font Awesomeなどの著名なアイコンフォント、および自作したアイコンフォントから、必要なアイコンフォントのみを抽出してダウンロードできる便利なWebサービスです。WordPressのカスタマイズを行う上でも便利なWebサービスなのでブックマークしておくと良いですよ。

  1. Fontello – icon fonts generator

Fontelloで「Pocket」のアイコンを検索すると、Zocialというアイコンフォントが見つかります。「Pocket」のアイコンをクリックすると選択した状態になります。

140724 53d1246a0f66e WordPressにフラットデザインに似合うソーシャルネットワークのシェアボタンを作成しよう

そのまま、「Download webfont」ボタンをクリックしてください。すると、アイコンフォントの表示に必要なフォント、およびスタイルシートをダウンロードすることができます。

140724 53d1246c3c933 WordPressにフラットデザインに似合うソーシャルネットワークのシェアボタンを作成しよう

しかし、ダウンロードしたフォントをそのまま使用しようとすると、とても残念なことになります。明らかに他のソーシャルネットワークのアイコンと足並みが揃わない感じなので、カスタマイズしましょう。

140725 53d1fa7917887 WordPressにフラットデザインに似合うソーシャルネットワークのシェアボタンを作成しよう

HTML

ダウンロードしたアイコンフォントをもとにカスタマイズしたのが下記サンプルです。

<i class="icon-pocket"></i>

CSS

@font-face {
  font-weight:400;
  font-style:normal;
  font-family:fontello;
  src:url('../fonts/fontello.eot?90796969');
  src:url('../fonts/fontello.eot?90796969?#iefix') format('embedded-opentype'),
    url('../fonts/fontello.woff?90796969') format('woff'),
    url('../fonts/fontello.ttf?90796969') format('truetype'),
    url('../fonts/fontello.svg?90796969#fontello') format('svg');
}

.icon-pocket:before {
  padding: 0 7.5px;
  content: '\e800';
  text-align: center;
  text-decoration: inherit;
  text-transform: none;
  font-weight: 400;
  font-style: normal;
  font-family: fontello;
}

.icon-pocket {
  display: table-cell;
  width: 28px;
  height: 27px;
  vertical-align: middle;
}

まとめ

140725 53d1fa7da0056 WordPressにフラットデザインに似合うソーシャルネットワークのシェアボタンを作成しよう

長文を最後までお読みいただきありがとうございました。少し濃い内容になりましたが、以上でサンプルの完成です（左上の黒い部分はCodePenのスクリーンショットです）。WordPressにシェアボタンを設置する際の参考になればと思います。今回ご紹介したツールをフル活用してみてくださいね。

参考リンク

  1. 2.5dBUTTON
  2. Ligature Symbols
  3. BrandColors
  4. Can I use… Support tables for HTML5, CSS3, etc
  5. Fontello – icon fonts generator

この記事をシェア

hatenabookmark 0
0
google 0

関連記事

Bootstrapベース「Bootflat」のSassファイルをコンパイルする方法
Bootstrapベース「Bootflat」のSassファイルをコンパイルする方法
WordPressでGoogle Analyticsと連携してページビューの多い人気記事を取得する
WordPressでGoogle Analyticsと連携してページビューの多い人気記事を取得する
同一ネットワーク上からアクセス可能なローカルのWordPressの開発環境を構築する
同一ネットワーク上からアクセス可能なローカルのWordPressの開発環境を構築する

コメント