【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つは確定しています。しかしその2つだけだとなんか寂しいですね。非リア充丸出しです。何か無いか、なんかないか?と探すのに必死です。

style.cssを見ると

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

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

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

メールのリンクが出せる

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

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

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

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

これを追加しました。

子テーマのstyle.cssに追記

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

色だけ変える項目

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

Gravatar

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

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

別の自サイトへのリンク

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

見落としがちなポイント

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

social_link3

最後にひとこと

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

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

こちらの記事もどうぞ

“【twenty fifteen】ソーシャルリンクアイコンを設定しました” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です