拡散希望！！WordPressのサイドバーにSNSアイコンを横並びで表示する方法

賢威カスタマイズ研究所 TOP
SNS
拡散希望！！WordPressのサイドバーにSNSアイコンを横並びで表示する方法

拡散希望！！WordPressのサイドバーにSNSアイコンを横並びで表示する方法

2014年01月01日 [SNS]

この記事は約5分で読めます。

SNSアイコン横並び

ブログに複数のSNSを利用するにあたって、やはり見やすい位置でのSNSページの露出は必要です。

SNSアイコン横並び

当ブログでは、サイドバーにSNSのアイコンを配置して各トップページへリンクしています。
RSSフィード用のアイコンも加えて、横並びですっきりした表示にしています。

横並び配置は簡単にできるので、SNSとブログを連携している方はぜひ取り入れてみてください。

使用するSNSのアイコンは探しておいてください。
「SNS アイコン」などで検索すると、まとめサイトがたくさんでてきます。

Topics

1 HTMLとCSSの作成
2 ウィジェットに設定
3 賢威6.1はレスポンシブデザインにも対応させる

HTMLとCSSの作成

それでは、横並びのHTMLとCSSを作成していきます。
リストタグ（ul）とフロートスタイル（float）を利用して横並びを実現します。
グローバルナビなど、いろいろな場面で使う方法ですの、ぜひ覚えてください。

<div class="side-sns">
<ul class="sns-list">
<li><a href="http://www.keni-customize.net/feed/" title="RSSフィード" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/rss.png" width="48" height="48" alt="RSSフィード" title="RSSフィード"></a></li>
<li><a href="https://www.facebook.com/kenicustomize" title="facebook" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/facebook.png" width="48" height="48" alt="facebook" title="facebook"></a></li>
<li><a href="https://twitter.com/keni_customize" title="Twitter" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/twitter.png" width="48" height="48" alt="Twitter" title="Twitter"></a></li>
<li><a href="https://plus.google.com/116010355104162534069/" title="Google+" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/googleplus.png" width="48" height="48" alt="Google+" title="Google+"></a></li>
</ul>
</div>

HTMLでは、リストタグで4SNSアイコンの画像（リンク）を並べているだけです。
スタイル適用のために、1番外側をdivタグで囲っています。

SNSページや画像のURLは各ブログ用に変更してください。

.side-sns{
	position: relative;
	overflow: hidden;
}

.side-sns:after{
	clear: both;
}

.side-sns ul{
	float: left;
	list-style: none;
	left:50%;
	position:relative;
}

.side-sns ul li{
	display: inline;
	float: left;
	background: none;
	padding: 0;
	margin: 0 0.3em 0 0;
	position:relative;
	left:-50%;
}

CSSで重要なのは「float: left;」です。これで全てのリスト要素が横に並びます。
そして、「clear: both;」でリストタグ終了時に横並びを解除しています。

リスト要素の横並びはこの通り簡単なので、ぜひ利用してください。