ソーシャル アイコンの色
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;
}
}
最後に
たったこれだけのカスタマイズですが、随分雰囲気変わります。気分転換にどうぞ。