WordPress Twenty Seventeen テーマのソーシャルアイコン

ソーシャル アイコンの色

Twenty Seventeen テーマには、ソーシャル リンクをアイコンで表示する「Social Links Menu」メニューがあります。

デフォルトでは、下記のようにフッターにグレーの丸型のアイコンで表示されます。

グレーの単色なので、なんか寂しい感じがします。そこで色を付けてみました。

色付けしただけですが、随分雰囲気が変わります。

スタイル(CSS)

色付けは、下記スタイルを追加するだけです。

/*
Social nav
*/
.social-navigation a[href*="behance.net"] { background-color: #1769ff; }
.social-navigation a[href*="codepen.io"] { background-color: #000000; }
.social-navigation a[href*="deviantart.com"] { background-color: #05cc47; }
.social-navigation a[href*="digg.com"] { background-color: #005f93; }
.social-navigation a[href*="dribbble.com"] { background-color: #f46899; }
.social-navigation a[href*="dropbox.com"] { background-color: #007ee5; }
.social-navigation a[href*="facebook.com"] { background-color: #3b5998; }
.social-navigation a[href*="flickr.com"] { background-color: #ff0084; }
.social-navigation a[href*="foursquare.com"] { background-color: #0072b1; }
.social-navigation a[href*="plus.google.com"] { background-color: #dd4b39; }
.social-navigation a[href*="github.com"] { background-color: #000000; }
.social-navigation a[href*="instagram.com"] { background-color: #d93175; }
.social-navigation a[href*="linkedin.com"] { background-color: #0077B5; }
.social-navigation a[href*="mailto:"] { background-color: #000000; }
.social-navigation a[href*="medium.com"] { background-color: #000000; }
.social-navigation a[href*="pinterest.com"] { background-color: #bd081c; }
.social-navigation a[href*="getpocket.com"] { background-color: #ee4256; }
.social-navigation a[href*="reddit.com"] { background-color: #ff4500; }
.social-navigation a[href*="skype.com"] { background-color: #00aff0; }
.social-navigation a[href*="skype:"] { background-color: #00aff0; }
.social-navigation a[href*="slideshare.net"] { background-color: #0673b2; }
.social-navigation a[href*="snapchat.com"] { background-color: #fffc00; }
.social-navigation a[href*="soundcloud.com"] { background-color: #ff5419; }
.social-navigation a[href*="spotify.com"] { background-color: #00e461; }
.social-navigation a[href*="stumbleupon.com"] { background-color: #eb4823; }
.social-navigation a[href*="tumblr.com"] { background-color: #35465c; }
.social-navigation a[href*="twitch.tv"] { background-color: #6441a4; }
.social-navigation a[href*="twitter.com"] { background-color: #55acee; }
.social-navigation a[href*="vimeo.com"] { background-color: #aad450; }
.social-navigation a[href*="vine.co"] { background-color: #00bf8f; }
.social-navigation a[href*="vk.com"] { background-color: #45668e; }
.social-navigation a[href*="wordpress.org"] { background-color: #464646; }
.social-navigation a[href*="wordpress.com"] { background-color: #21759b; }
.social-navigation a[href*="yelp.com"] { background-color: #d32323; }
.social-navigation a[href*="youtube.com"] { background-color: #cd201f; }

一応、Twenty Seventeen テーマ(バージョン 1.3)が対応しているアイコンの全てに色付けしています。

ヘッダーにソーシャル アイコンを追加

ついでに、ヘッダーの右側もなんか寂しい感じがするので、色付けしたソーシャル アイコンを表示してみたいと思います。

site-branding.php テンプレート

表示するメニューは「Social Links Menu」メニューをそのまま流用します。

まずは、template-parts/header/site-branding.php テンプレート ファイルを子テーマにコピーし、下記のコードを追加します。

追加する場所は ”</div><!– .site-branding-text –>” 行の下(32 行目あたり)です。

<div class="header-social">
	<?php if ( has_nav_menu( 'social' ) ) : ?>
		<nav class="social-navigation" role="navigation" aria-label="ヘッダーソーシャルリンクメニュー">
			<?php
				wp_nav_menu( array(
					'theme_location' => 'social',
					'menu_class'     => 'social-links-menu',
					'depth'          => 1,
					'link_before'    => '<span class="screen-reader-text">',
					'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
				) );
			?>
		</nav><!-- .social-navigation -->
	<?php endif; ?>
</div><!-- .header-social -->

スタイル(CSS)

/*
Header social
*/
.header-social {
	position: absolute;
	top: 0;
	right: 3em;
}
.header-social .social-navigation {
	width: 100%;
}
.header-social .social-navigation a {
	margin: 0 0 0.5em 0;
}
@media screen and (max-width: 48em) {
	.header-social {
		display: none;
	}
}

最後に

たったこれだけのカスタマイズですが、随分雰囲気変わります。気分転換にどうぞ。

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。