_s(underscores)ナビゲーションに追加したソーシャルメディアリンクをアイコン化する

前回、ナビゲーションにソーシャルメディアへのリンクを追加しました。TwitterやFacebookといったテキストに各メディアへのリンクが設定されている状態です。

今回は、こちらのテキストリンクを以前設定しておいたFontAwesomeを利用して設定していきます。

ナビゲーションとソーシャルメディアリンクを分離

まずは、現在ナビゲーションの右側に追従する形で設置されているソーシャルメディアリンクを右に分離してみようと思います。

style.cssにこのように記述していきます。ソーシャルメディアリンク部分のマークアップについては、functions.phpで設定しているので必要があれば変更してください。【詳しくはこちらの記事を参照】

.menu-social ul {
  float: right;
  text-align: center;
  list-style: none;
}

.menu-social ul li {
  position: relative;
  display:  inline-block;
}

ナビゲーションに関する記述の最下部に追記していきます。

こちらのCSSによって表示はこのように変わります。

FontAwesomeを設定する

では、これらソーシャルメディアリンク部分にFontAwesomeリンクを設定してきましょう。

通常、一番簡単な設置方法はこちらを見ていただくとわかりやすいのですが、<i class="fa fa-****"></i,>という記述で表示させる方法です。

しかし、この方法を採用すると登録のたびにアイコンを設定しなくてはなりませんし、その作業はとても煩わしいです。個人的にその方法を採用して自分で手を動かす部分にはそれほど問題にはならないかもしれませんが、クライアントやユーザーには優しい設計とは言い難いですね。

ですので、リンク先URLによって表示させるアイコンを変えるようにCSSで調整しようと思います。また、表示に関しては:beforeを使います。

まずは、FontAwesome内に持ち合わせていないソーシャルメディアアイコンの場合を想定してこのように記述しておきます。

.menu-social li a:before {
    display: inline-block;
    padding: 0 5px;
    vertical-align: top;
    font-family: 'Fontawesome';
    font-size: 20px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    content: 'f0c0';
}

content:部分に指定しているf0c0部分はUnicodeです。各ボタンのUnicodeは各アイコンページに記載されています。

そして、各メディア用にこのような記述を設けます。上のcontent:部分を下のコードで上書きしてアイコンを切り替えています。

.menu-social li a[href*="facebook.com"]::before { content: 'f09a'; }

.menu-social li a[href*="twitter.com"]::before { content: 'f099'; }

.menu-social li a[href*="dribbble.com"]::before { content: 'f17d'; }

.menu-social li a[href*="plus.google.com"]::before { content: 'f0d5'; }

.menu-social li a[href*="pinterest.com"]::before { content: 'f0d2'; }

.menu-social li a[href*="github.com"]::before { content: 'f09b'; }

.menu-social li a[href*="tumblr.com"]::before { content: 'f173'; }

.menu-social li a[href*="youtube.com"]::before { content: 'f167'; }

.menu-social li a[href*="flickr.com"]::before { content: 'f16e'; }

.menu-social li a[href*="vimeo.com"]::before { content: 'f194'; }

.menu-social li a[href*="instagram.com"]::before { content: 'f16d'; }

.menu-social li a[href*="linkedin.com"]::before { content: 'f0e1'; }

a[href*="facebook.com"]の部分でURLを判断しています。

リンク用テキストを非表示に

TwitterやFacebookのテキストを表示させないようにします。

_s(underscores)にはデフォルトでアクセシビリティ用に.screen-reader-textというクラスが用意されています。こちらを適応することによって、スクリーンリーダーには認識されるけど表示はされないテキストとして指定することができます。

前回、メニューを新設する際にtemplate-tags.phpに記載した内容をこのように若干修正します。

function my_simone_social_menu() {
    if ( has_nav_menu( 'social' ) ) {
	wp_nav_menu(
		array(
			'theme_location'  => 'social',
			'container'       => 'div',
			'container_id'    => 'menu-social',
			'container_class' => 'menu-social',
			'menu_id'         => 'menu-social-items',
			'menu_class'      => 'menu-items',
			'depth'           => 1,
			'link_before'     => '',
			'link_after'      => '',
			'fallback_cb'     => '',
		)
	);
    }
}

link_beforeとlink_afterが追加され、<span>に先ほどのクラスを付与したタグでテキストを囲むように設定します。

これでテキストは消え、アイコンだけでソーシャルメディアリンクを設置することができました。

まとめ

これらを設定することによって、クライアントやユーザーがどんなソーシャルメディアを設定するかに関わらず、アイコンを表示してくれるようになります（FontAwesomeにあるフォントだけですが）。FontAwesomeはアメリカのサービスなので日本でよく使われる「はてなブックマーク」などのアイコンはありません。ですので、そういった特殊なアイコンを使いたい場合は使うサービスを変えたりすることによって対応することも可能かと思います。

おまけ：レスポンシブ対応CSSコード

モバイルファーストでのレスポンシブ用CSSコードはこちらになります。

#menu-social ul {
  position: absolute;
    top: 0;
    right: 1rem;
    display: block;
}
#menu-social li a {
    padding-left:.5em;
    padding-right: .5em;
}

.menu-social ul {
  float: right;
  text-align: center;
  list-style: none;
}
.menu-social ul li {
  position: relative;
  display:  inline-block;
}

.menu-social li a:before {
    display: inline-block;
    vertical-align: top;
    font-family: 'Fontawesome';
    font-size: 20px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    content: 'f0c0';
}

@media screen and (min-width: 768px) {
	#menu-social ul {
	    right: 6rem;
	}
	.menu-social ul li {
	  position: relative;
	  display:  inline-block;
	}

	.menu-social li a:before {
	    padding: 0 5px;
	}
}