読者がすぐフォローバナーをクリック出来るよう、設置しておきたい。
公式バナーは読み込みが遅いので、自作してみましょう。
SNSフォローボタンを自分で作ってサイドバーに置く
これはなかなかかわいいので、オススメです。
キレイに仕上がります。
参考にしたサイト
【STINGER5】コピペOK！サイドバーにアイコンフォントでSNS各種のフォローボタンを作る
http://shufulife.com/followme/
私が使用するテーマはStinger5です。
Font Awesomeがデフォルトで使えるようになっています。
フォントアイコンを使うとキレイに仕上がるのでオススメ。
まだお使いで無いかたは、
まずFont Awesomeを使えるようにしておいて下さい。
私の過去記事もどうぞ。
WEBアイコンのFont Awesomeを活用しよう。Stinger5ならすぐ使えます。
では始めます。
今回はサイドバーに設置します。
という事で、
sidebar.php→
こちらの任意の場所（好きな箇所でOK）に、コードを記述します。
もし、サイドバーでも、
スクロールして固定する部分に設置したい場合は
該当ウィジェットへ記述して下さい。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
<h4 class="menu_underh2">フォローしてね</h4>
<?php if ( wp_is_mobile() ) : ?>
<div class="follow">
<ul>
<li class="twitter">
<a href="https://twitter.com/アカウント名">Twitter</a>
</li>
<li class="googleplus">
<a href="https://plus.google.com/アカウント名/posts">Google+</a>
</li>
<li class="facebook">
<a href="フェイスブックページのURL">Facebook</a>
</li>
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2">RSS</a>
</li>
</ul>
</div>
<?php else : ?>
<div class="follow">
<ul>
<li class="twitter">
<a href="https://twitter.com/アカウント名" target="_blank">Twitter</a>
</li>
<li class="googleplus">
<a href="https://plus.google.com/アカウント名/posts" target="_blank">Google+</a>
</li>
<li class="facebook">
<a href="フェイスブックページのURL" target="_blank">Facebook</a>
</li>
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" target="_blank">RSS</a>
</li>
</ul>
</div>
<?php endif; ?>
以上です。
TwitterやFacebook以外にも、
好きなSNSに変更しても構いません。
その場合はCSSで色やアイコンフォントを変更しましょう。
次に、CSSでデザインを設定します。
style.css→
以下のコードを、サイト全体を指定するCSS記述欄に追加。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
/* フォローボタン */
.follow {
margin-bottom:24px;
}
.follow ul{
position:relative;
margin:-10px 0 0 -10px;
overflow:hidden;
}
.follow ul li{
float:left;
width:46%;
margin:10px 0 0 10px;
}
.follow ul li a{
padding-top:10px;
padding-bottom:5px;
display:block;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
color:#fff;
font-family:'Open Sans',sans-serif;
text-align:center;
text-decoration:none;
}
.follow ul li a::before{
position:relative;
display:block;
-webkit-transition:.15s ease-in-out;
transition:.15s ease-in-out;
color:#fff;
font-size:26px;
font-family: "FontAwesome";
}
.follow ul li a:hover{
background-color:#fff;
}
.follow ul .twitter a{
background-color:#00aced;
border:2px solid #00aced;
}
.follow ul .twitter a::before{
content: "\f099";
}
.follow .twitter a:hover,.follow .twitter a:hover::before{
color:#00aced;
}
.follow .facebook a{
background-color:#3c5a98;
border:2px solid #3c5a98;
}
.follow .facebook a::before{
content:"\f09a";
}
.follow .facebook a:hover,.follow .facebook a:hover::before{
color:#3c5a98;
}
.follow ul .googleplus a{
background-color:#db4a39;
border:2px solid #db4a39;
}
.follow ul .googleplus a::before{
content:"\f0d5";
}
.follow ul .googleplus a:hover,.follow ul
.googleplus a:hover::before{
color:#db4a39;
}
.follow ul .rss a{
background-color:#ffb53c;
border:2px solid #ffb53c;
}
.follow ul .rss a::before{
content:"\f09e";
}
.follow ul .rss a:hover,.follow ul .rss a:hover::before{
color:#ffb53c;
}
以上です。
細かい位置は、
何度もカスタムして調整してくださいね。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク