【twenty fifteen】ソーシャルリンクアイコンを設定しました

　WordPressデフォルトテーマのtwenty fifteenにはソーシャルリンクアイコンのメニュー設定がありましたが、いままで利用していませんでした。というのも私はFacebookもTwitterも利用していないので、どうにも気後れ的な気持ちがあったのかもしれません。

　最近、趣味のロードバイクのWordPressサイトを作りまして、そちらでYoutubeとGoogle+のソーシャルリンクアイコンを出したくなり設定しました。ここのブログでも同じ設定でソーシャルリンクアイコンを出しました。

ソーシャルリンクメニュー

　twenty fifteenにはメニュー項目に最初からパーソナルリンク（ソーシャルリンクメニュー）というメニューが存在していまして、そのメニューにリンクを追加するだけで左サイドバーのウィジェットの上にパーソナルリンクのアイコンを出してくれます。

　基本的な設定方法はWordPress Codex日本語版のTwentyFifteenの項目に詳しく載っていますので、そちらを参考にしてください。さらに下記のサービスのリンクを追加すれば自動でアイコンフォントも出してくれます。

CodePen、Digg、Dribbble、Dropbox、Facebook、Flickr、GitHub、Google+、Instagram、LinkedIn、Path、Pinterest、Pocket、Polldaddy、Reddit、Skype、StumbleUpon、Tumblr、Twitter、Vimeo、WordPress、YouTube

　しかし、TwitterもFacebookもやってない人間にはさらに縁遠いサービスばかりですね。

SNSを利用してない人間が必死にリンク先を探す

　まずはyoutubeチャンネルとそれに付随するgoogle+アカウントの２つは確定しています。しかしその2つだけだとなんか寂しいですね。非リア充丸出しです。何か無いか、なんかないか？と探すのに必死です。

style.cssを見ると

　テーマtwentyfiteenのディレクトリにあるstyle.cssを見ますと、783行目から884行目あたりにソーシャルリンクメニューのリンクアドレス別に出すgenericonsアイコンフォントの指定が書いてあります。

RSSフィードのリンクが出せる

.social-navigation a[href$="/feed/"]:before {
	content: "f413";
}

 784行目からはRSSフィードのアイコンフォントの設定です。WordPressサイトならばRSSフィードは標準で付いています！ソーシャルリンクメニューに[サイトアドレス]/feed/ のリンクを追加すれば、ひとつ増やせます。

メールのリンクが出せる

.social-navigation a[href*="mailto:"]:before {
	content: "f410";
}

 　873行目にはmailto:[メールアドレス] のリンクであればメールのアイコンフォントを出してくれます。メールなら誰でも持ってます！さらにひとつ増えました。

cssのcontent:プロパティで指定できれば何でも

　そもそもstyle.cssでアイコンフォントを指定しているのだから、contentプロパティで指定できる画像やリンクでも良いでしょうということで

• Gravatarアカウントならあるので使う
• 自分の別のWordPressサイトを2つ

これを追加しました。

子テーマのstyle.cssに追記

　Youtube、google+、RSSフィード、メールtoについてはgenericonsアイコンフォントが自動で出ますが黒色（もしくは白）なので色を指定します。Gravatarは画像をアイコンとして出します。別サイトのリンクアイコンはdashiconsのアイコンフォントを出します。すべて子テーマのstyle.cssに追記します。

色だけ変える項目

.social-navigation a[href*="plus.google.com"]:before {
	color: #DB3D2A ;
}

.social-navigation a[href*="youtube.com"]:before {
	color: #CC181E ;
}

.social-navigation a[href$="/feed/"]:before {
	color: #FF6600 ;
}

.social-navigation a[href*="mailto:"]:before {
	color: #E7E7E7 ;
}

 　それぞれ特有の色っぽいカラーコードを指定しています。

Gravatar

　Gravatarのリンクは画像をアイコンフォントの代わりに出します。cssのcontentプロパティで画像を指定する場合はサイズを指定できないとのことなので最初から24pxの画像を用意しておきます。Gravatarの画像はコチラから画像をダウンロードしてサイズを24×24pxにしてメディアライブラリーにアップロードしておきます。

.social-navigation a[href*="ja.gravatar.com"]:before {
	content: url(https://def-4.com/wp-content/uploads/gravatar.jpg);
}

　画像のリンクはここのサイト用のサンプルです。

別の自サイトへのリンク

　自分のサイトへのリンクのアイコンフォントはDashiconsのWPアイコンを利用します。どちらもWordPressで作成したサイトなのでWPアイコンにしました。genericonsにもWPアイコンはありますが、Dashiconsにも2種類WPアイコンがあります。カラーコードはそれぞれのブログのテーマカラーに合わせています。Dashiconsを利用するための事前設定は以前のパンくずリストを設定した記事を参照してください。

.social-navigation a[href*="www.ikt-s.com"]:before {
	font-family: "dashicons";
	content: "f120";
	color: #007532 ;	
}

.social-navigation a[href*="def4.ikt-s.com"]:before {
	font-family: "dashicons";
	content: "f120";
        color: #FFDF00 ;
}

見落としがちなポイント

　管理画面でメニューを追加するときに「タイトルの属性」の欄に入力した文字が、マウスオーバー時に表示されます。ここを入れておいた方がユーザビリティが良いと思います。

最後にひとこと

　これで数だけ有り合わせたソーシャルリンクアイコンが出せました。いままでウィジェットに出していたRSSフィードは削除しました。

　リンクに色を付けたのは、ちょっとどうかなという感じなのでデフォルトの白（もしくは黒）に戻した方がいいかもしれません。