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

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

  • LINEで送る

SNSアイコン横並び

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

SNSアイコン横並び

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

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

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

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;」でリストタグ終了時に横並びを解除しています。

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

ウィジェットに設定

SNSアイコン横並び

サイドバーへの適用にはウィジェットを利用します。
「外観 > ウィジェット」から、テキストウィジェットを利用してHTMLをサイドバーに適用します。
これだけで、サイドバーにSNSアイコンと各ページへのリンクが表示されます。

CSSは各テーマのスタイルに追加してください。
賢威6.1であれば、「外観 > テーマ編集」から「design.css」に追加します。

賢威6.1はレスポンシブデザインにも対応させる

SNSアイコン横並び

賢威6.1でレスポンシブデザインを適用している場合は、「mobile.css」にも
同様のCSSを適用してください。これにより、スマホでも同様の表示が可能です。

  • LINEで送る

コメントを残す

このページの先頭へ