Twenty FourteenのヘッダーにSNSアイコン設置

WordPressのTwenty FourteenにヘッダーにSNSアイコン画像を貼るブログへのアクセスルートとしてSNSは圧倒的に強力な存在です。
様々なSNSと連携して情報を発信している人も多いと思います。

本日は、WordPress3.8のデフォルトテーマTwenty Fourteenのヘッダー部分にSNSのアイコン画像を貼り付けるカスタマイズを紹介します。

アイコンを準備しアップロードする

アイコンはどんなものでも構いませんが、本記事のカスタマイズをそのまま採用するのであれば32×32サイズのアイコンが適しています。
本記事では32×32のTwitterアイコンを使用して説明します。

アイコンをアップロードする場所とファイル名は、テーマディレクトリ/images/twitter.pngとします。
アイコンが他の場所にある場合には、適宜コードの変更をしてくださいね。

salt26的コード

このカスタマイズにはheader.phpとstyle.cssの2ファイルを編集します。
Twenty Fourteenのヘッダ部分にはマニアックなCSSは設定されていなかったので、すんなりと編集が完了できました。

header.php

下記に示す場所にコードを追加してください。

<div class="search-toggle">
	<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
</div>
<!-- 以下を追加 -->
<div class="sns-icon">
	<a href="https://twitter.com/salt26jp" target="_blank"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/twitter.png" /></a>
</div><!-- .sns-icon -->
<!-- 追加ここまで -->
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
	<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
	<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

style.css

アイコンサイズが32×32に最適化されております。
好みに合わせて変更をしてください。

.sns-icon {
	float: right;
	margin-top: 8px;
	margin-right: 3%;
}

スマホ用スタイルシート

PCのブラウザであれば、上記のカスタマイズのみで問題のない表示ができていると思います。
しかし、iPhoneなどのスマホのブラウザで開くと、アイコンが目立ちすぎてしまい非常にアレな感じになってしまいます。
そして、スマホではSNSは専用アプリにて閲覧することがほとんどだと思うので、アイコンからのリンクはあまり必要ないかと思います。

そんなわけで、スマホなどの表示サイズの小さなブラウザではアイコンを非表示とする設定を追加します。

style.css


@media screen and (max-width: 640px) {
	.sns-icon {
		display: none;
	}
}

このCSSでは、ブラウザの幅が640px以下の時に先ほどのアイコンが非表示になります。
640pxというのは、iPhone 4Sなどのブラウザの幅です。
Twenty Fourteenでは、デフォルトでブラウザの幅により表示を変えるMedia Queriesが組み込まれていますので、Twenty Fourteenのテーマディレクトリ内にあるstyle.cssを見れば色々な応用ができます。

感想

Twenty Elevenでの同様のカスタマイズの時には、かなりの時間を消費しましたが、このTwenty Fourteenではすんなりとカスタマイズが完了しました。
Twenty Fourteenはとてもシンプルでミニマルなテーマだと感じます。
レスポンシブさもすごいし、とても使いやすく拡張性も高いテーマですのでオススメです!


関連記事

Twenty Fourteenの検索枠の背景色を変更 Twenty Fourteenの検索枠の色変更
Twenty Fourteenの検索枠の背景色変更のカスタマイズです。
WordPressのTwenty Fourteenをフォトログにカスタマイズ Twenty Fourteenをフォトログ的に使う
Twenty Fourteenのトップページに写真をきれいに並べてフォトログテーマ風にカスタマイズしました。写真ギャラリーとして使えます。
Twenty Fourteenの背景色を変更する Twenty Fourteenの背景色を変更する
WordPressのデフォルトテーマにも採用されたTwenty Fourteenの背景色を変更するカスタマイズの紹介です。意外と手こずるカスタマイズですので、参考になれば幸いです。
Twenty Fourteenのトップページをアイキャッチ画像と記事タイトルの一覧にするカスタマイズ Twenty Fourteenのトップをタイトル一覧にする
Twenty Fourteenのトップページをカスタマイズし、アイキャッチ画像と記事タイトルの一覧にしスッキリとレイアウトにする方法を紹介します。
Twenty Fourteenのメインコンテンツの横幅を広げた Twenty Fourteenのコンテンツ部分横幅を広げる
Twenty Fourteenはデフォルト状態ではメインコンテンツ部分が若干狭いので、余白サイズを変更し横幅を広げるカスタマイズを紹介します。

コメントを残す

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

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>