ブログへのアクセスルートとして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の背景色を変更するWordPressのデフォルトテーマにも採用されたTwenty Fourteenの背景色を変更するカスタマイズの紹介です。意外と手こずるカスタマイズですので、参考になれば幸いです。
Twenty Fourteenのトップをタイトル一覧にするTwenty Fourteenのトップページをカスタマイズし、アイキャッチ画像と記事タイトルの一覧にしスッキリとレイアウトにする方法を紹介します。
Twenty Fourteenのコンテンツ部分横幅を広げるTwenty Fourteenはデフォルト状態ではメインコンテンツ部分が若干狭いので、余白サイズを変更し横幅を広げるカスタマイズを紹介します。
