【Stinger5 forLadys】サイドバーにGush2と同じSNSボタンを置いてみたよ。

2015/07/04

５月に立ち上げた雑記ブログでは、かわいいWordPressテーマとして有名な「Stinger5 forLadys」を使っています。さらさらぶろぐと同じSNSボタンをサイドバーに置いたので、その方法を紹介します。
Gush2のパクリです。表示位置調整したら、CSSは、Gush2とはだいぶ変わりましたけど…。

しあがりはこんな感じです。
Stiger5forLadysサイドバーSNSボタン完成例

1 PHPに、サイドバーSNSボタン用の記述を追加
2 CSSに、サイドバーSNSボタン用の記述を追加
3 まとめ

PHPに、サイドバーSNSボタン用の記述を追加

sidebar.phpに直接、「サイドバーSNSボタン用記述」を書いてもよいのですが、今回は、sns-bar.phpという別ファイルにして、sidebar.phpからこのファイルを呼び出す形にしました。

サイドバーSNSボタン用PHPファイル「sns-bar.php」を作成

下記のコードを記述したファイル「sns-bar.php」を作ります。

<!-- 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>

<ul>

</a></li>

</a></li>

</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箇所を自分用に書き換えてください。

参考までに、私の雑記ブログ（Loose Leaf）の場合を載せておきます。
【自分のツイッターID】＝sarasaralli
【自分のフェイスブックID】＝sarasarablog
【自分のグーグルプラスID】＝110794312530102325687

sns-bar.phpを呼び出す記述をsidebar.phpに追加

今回は、もともとのRSSボタンは消して、SNSボタンバーを置きました。
下記のように、RSSボタン表示の部分（コメント含めて3行）を消して、sns-bar.phpを呼び出す1行を入れます。

  </div>
<?php } ?>
  <!-- RSSボタンです -->
  <div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i>&nbsp;購読する</a> </div>
  <!-- RSSボタンここまで -->
  <?php get_search_form(); //検索フォーム表示  ?>
  <!-- 最近のエントリ -->

</div>

<?php } ?>

<?php get_search_form(); //検索フォーム表示 ?>

  </div>
<?php } ?>
  <?php get_template_part('sns-bar'); //SNSボタンバー読み込み ?>
  <?php get_search_form(); //検索フォーム表示  ?>
  <!-- 最近のエントリ -->

</div>

<?php } ?>

<?php get_template_part('sns-bar'); //SNSボタンバー読み込み ?>

<?php get_search_form(); //検索フォーム表示 ?>

sns-bar.phpをsidebar.phpと同じディレクトリに置く

sns-bar.phpは、sidebar.phpと同じディレクトリに置きます。
ちなみに私の場合は、子テーマを作っていて、ディレクトリは
「/themes/stinger5Ladyver20141023-child」となってます。

CSSに、サイドバーSNSボタン用の記述を追加

style.cssに、下記に水色で示した「サイドバーSNSボタン用記述」を追加します。
すべての画面サイズで適用されるように「@media{}」の外側に書きます。先頭でもいいのですが、私は、「カスタマイズした分は後ろのほうに書く」ようにしてるので、一番後ろに入れました。

/*-- ここまで --*/
}

/*-----------------------------------
  サイドバー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ボタン 終わり*/

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の調整は時間かかりますね。
でもまあ、いい感じにできたんじゃないかと自己満足しております。
書きたいことがあったから、雑記ブログを作ったのに、カスタマイズして満足しちゃって、記事を書いていません(^_^;)　まあ、ぼちぼちやります。

on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。初めまして。同感です。こんなに良いのに、なんでみんな使わないの？？って思いますよね。確かにフォントは、初期状態ではちょっと… そのあたりがもうちょっと何とかなれば最高なんですけどね。ＣＳＳの解説ありがとうございます、参考にさせていただきますね♪
on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。bloggerは僕もオススメです( ´ ▽ ` )ﾉ本当シーサーブログは広告多いですね( ´ ▽ ` )ﾉ
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）TN0816さまご訪問ありがとうございます。キーワード検索の下に表示されるのは、サイド広告300pxです。外観＞ウィジェット＞サイド広告300px に、広告コードを書いているのではないでしょうか？
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）このブログとても参考になりました！１つわからないところがあるのですが、ここに書かれているとおりにやったのですが、サイドバーのキーワード検索の下にもも広告が表示されてしまい、どうしたらいいのかわからなくて困っています。アドセンスはメイン上部にレスポンシブ広告を入れて、記事下左と記事下右に300×250を入れています。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。a cattle northern さまくわしい情報をありがとうございます。なるほど。怪物レベルでなければ、ポイントで受け取る分が必ずあるのですね。「ポイントで楽天市場で買い物してね」ってことなのでしょうね。楽天市場を使ってない人は『もしも』がいいですね。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。楽天アフィですが、１ヶ月で３０００円以上は、３０００ポイントを楽天ポイントで＋超過分を楽天銀行振込１ヶ月で３０００円未満は楽天ポイントで支給となります。毎月１０万以上確実で全額銀行振込となりますが、そんな怪物は・・・・・。楽天市場を使うのでなければ、もしもの方がいいと思いますよ。

さらさらぶろぐ

アフィリエイトのことを書くつもりで始めたけど、WordPressやGush2のことを書いちゃってます。

【Stinger5 forLadys】サイドバーにGush2と同じSNSボタンを置いてみたよ。

PHPに、サイドバーSNSボタン用の記述を追加

サイドバーSNSボタン用PHPファイル「sns-bar.php」を作成

sns-bar.phpを呼び出す記述をsidebar.phpに追加

sns-bar.phpをsidebar.phpと同じディレクトリに置く

CSSに、サイドバーSNSボタン用の記述を追加

まとめ

関連記事-こちらもどうぞ

この記事へのコメントはこちらコメントをキャンセル

PHPに、サイドバーSNSボタン用の記述を追加

サイドバーSNSボタン用PHPファイル「sns-bar.php」を作成

sns-bar.phpを呼び出す記述をsidebar.phpに追加

sns-bar.phpをsidebar.phpと同じディレクトリに置く

CSSに、サイドバーSNSボタン用の記述を追加

まとめ

関連記事-こちらもどうぞ

この記事へのコメントはこちら コメントをキャンセル

この記事へのコメントはこちらコメントをキャンセル