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

 

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

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

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

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

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

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

【】で囲んでいるところ3箇所を自分用に書き換えてください。

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

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

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

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

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

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

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

まとめ

「Stinger5 for Ladys」はGush2と作りが似ているので、Bloggerほどではなかったけれど、cssの調整は時間かかりますね。
でもまあ、いい感じにできたんじゃないかと自己満足しております。
書きたいことがあったから、雑記ブログを作ったのに、カスタマイズして満足しちゃって、記事を書いていません(^_^;) まあ、ぼちぼちやります。

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。