なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

スクロールしても追従するソーシャルボタンをブログの左固定で設置しました

Sponsored Links


スクリーンショット 2012 12 24 18 56 28

最近ブログのファーストビューをいろいろ意識していたりするんですが、その一環としてソーシャルボタンの表示も変えてみました。
で、気になってたのがスクロールしても追従してくるソーシャルボタン。
なんとなく押してもらえそうな気もしますしね(笑)
ってことでGoogle先生に聞いて実装してみました。

Sponsored Links


ウェビメモさんの記事が超絶わかりやすかった

スクロールしてもついてくる!ブログにソーシャルボックスをつけよう。 | ウェビメモ

こちらの記事がめっちゃわかりやすかったです。
で、僕はトップページも個別ページにも表示したかったので 「header.php」の一番下に以下を記載。

[html]

  • お好きなソーシャルボタンのコード
  • お好きなソーシャルボタンのコード
  • お好きなソーシャルボタンのコード

[/html]

↑ ウェビメモさんのコードをそのままコピペさせていただきました。
これで「Facebook」「Twitter」「Google+」「はてブ」を表示してます。
各ソーシャルボタンのコードもウェビメモさんの記事で紹介されていますし、以下のウェブサービスで一発で作成もできます。

ブログ・サイトに貼る主要ソーシャルサービスのボタンソースジェネレータ :: 5509

CSSもそのままお借りしました

[html]
#social_box{
background:#fff;
width:60px;
padding:15px;
margin-left:-100px;
text-align:center;
position:fixed;
bottom:30px;
list-style-type:none;
}
[/html]

↑ 上記のコードもウェビメモさんからそのままお借りして数値をちょこちょこっと変更して実装しました。

リアルタイムにCSSを弄る際に便利なアドオン

なまら春友流 » 新米ブロガーにおすすめ!ちょっとしたCSS知識だけでブログカスタマイズを楽にする2つの便利機能!!

↑ 上記記事で紹介しているアドオン「Live CSS Editor」を使用するとstyle.css を書き換えなくてもリアルタイムで変更を確認できるので便利です。

ということで気になる方は試してみてはいかがでしょうか?
header.phpじゃなくても single.php とかに記載すれば表示する場所を指定することもできるので便利だと思います。
で、気になった方はポチッと押してやってください(笑)

Sponsored Links


LEAVE A REPLY

*
*
* (公開されません)

Return Top