【Stinger5 forLadys】サイドバーにGush2と同じSNSボタンを置いてみたよ。
5月に立ち上げた雑記ブログでは、かわいいWordPressテーマとして有名な「Stinger5 forLadys」を使っています。さらさらぶろぐと同じSNSボタンをサイドバーに置いたので、その方法を紹介します。
Gush2のパクリです。表示位置調整したら、CSSは、Gush2とはだいぶ変わりましたけど…。
しあがりはこんな感じです。
目次
PHPに、サイドバーSNSボタン用の記述を追加
sidebar.phpに直接、「サイドバーSNSボタン用記述」を書いてもよいのですが、今回は、sns-bar.phpという別ファイルにして、sidebar.phpからこのファイルを呼び出す形にしました。
サイドバーSNSボタン用PHPファイル「sns-bar.php」を作成
下記のコードを記述したファイル「sns-bar.php」を作ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- SNSボタン --> <div class="side-sns"> <ul> <li><a href="https://twitter.com/【自分のツイッターID】" target="_blank"><i class="fa fa-twitter"></i> </a></li> <li><a href="https://www.facebook.com/【自分のフェイスブックID】" target="_blank"><i class="fa fa-facebook"></i> </a></li> <li><a href="https://plus.google.com/u/0/【自分のグーグルプラスID】" target="_blank"><i class="fa fa-google-plus"></i> </a></li> <li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i> </a></li> <li><a href='http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-logo-white_2x.png' alt='follow us in feedly' width='28' height='28' title="feedlyに登録"> </a></li> </ul> </div> |
【】で囲んでいるところ3箇所を自分用に書き換えてください。
【自分のツイッターID】=sarasaralli
【自分のフェイスブックID】=sarasarablog
【自分のグーグルプラスID】=110794312530102325687
今回は、もともとのRSSボタンは消して、SNSボタンバーを置きました。
下記のように、RSSボタン表示の部分(コメント含めて3行)を消して、sns-bar.phpを呼び出す1行を入れます。
7 8 9 10 11 12 13 |
</div> <?php } ?> <!-- RSSボタンです --> <div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i> 購読する</a> </div> <!-- RSSボタンここまで --> <?php get_search_form(); //検索フォーム表示 ?> <!-- 最近のエントリ --> |
9 10 11 12 13 |
</div> <?php } ?> <?php get_template_part('sns-bar'); //SNSボタンバー読み込み ?> <?php get_search_form(); //検索フォーム表示 ?> <!-- 最近のエントリ --> |
sns-bar.phpは、sidebar.phpと同じディレクトリに置きます。
ちなみに私の場合は、子テーマを作っていて、ディレクトリは
「/themes/stinger5Ladyver20141023-child」となってます。
CSSに、サイドバーSNSボタン用の記述を追加
style.cssに、下記に水色で示した「サイドバーSNSボタン用記述」を追加します。
すべての画面サイズで適用されるように「@media{}」の外側に書きます。先頭でもいいのですが、私は、「カスタマイズした分は後ろのほうに書く」ようにしてるので、一番後ろに入れました。
1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 |
/*-- ここまで --*/ } /*----------------------------------- サイドバーSNSボタン ------------------------------------*/ .side-sns { margin-bottom: 12px; padding: 0.3em 0em; } .side-sns ul { display: table; table-layout: fixed; width: 240px; background-color:#ffb6c1; margin:0 auto; padding:8px 30px; } .side-sns ul li { display: table-cell; vertical-align: middle; text-align: center; font-size:22px !important; } .side-sns ul li a { color: #ffffff; text-shadow: -1px 1px 0 rgba(255, 255, 255, 1); } .side-sns ul li a:hover { color: #ff7ddf; text-shadow: -1px 1px 0 rgba(255, 255, 255, 1); } img#feedlyFollow { margin:0 auto; } /* サイドバーSNSボタン 終わり*/ |
まとめ
「Stinger5 for Ladys」はGush2と作りが似ているので、Bloggerほどではなかったけれど、cssの調整は時間かかりますね。
でもまあ、いい感じにできたんじゃないかと自己満足しております。
書きたいことがあったから、雑記ブログを作ったのに、カスタマイズして満足しちゃって、記事を書いていません(^_^;) まあ、ぼちぼちやります。
この記事へのコメントはこちら