拡散希望!!WordPressのサイドバーにSNSアイコンを横並びで表示する方法
この記事は約5分で読めます。
ブログに複数の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;」でリストタグ終了時に横並びを解除しています。
リスト要素の横並びはこの通り簡単なので、ぜひ利用してください。
ウィジェットに設定
サイドバーへの適用にはウィジェットを利用します。
「外観 > ウィジェット」から、テキストウィジェットを利用してHTMLをサイドバーに適用します。
これだけで、サイドバーにSNSアイコンと各ページへのリンクが表示されます。
CSSは各テーマのスタイルに追加してください。
賢威6.1であれば、「外観 > テーマ編集」から「design.css」に追加します。
賢威6.1はレスポンシブデザインにも対応させる
賢威6.1でレスポンシブデザインを適用している場合は、「mobile.css」にも
同様のCSSを適用してください。これにより、スマホでも同様の表示が可能です。