Prototype Templates

シンプルなブログ用テンプレートの配布を目的としたブログです。

RSS     Archives     Mail
Comments
 

スポンサーサイト

 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 

fc2ブログでエントリーのフッター(下部)にTwitterやFacebookのボタンを設置する方法

 

猫も杓子もTwitter、Twitter...Facebook、Facebook...。
そんなご時世、やはりTwitterやFacebookといった世界標準のソーシャルメディアサービスとの親和性が高いブログへと改造していかなければなりません。

fc2ブログでエントリー下部にTwitterボタン

というわけで、fc2ブログでエントリー下部にTwitterやFacebookのボタンを設置するTipsを紹介します。上の画像のような感じ。
まだ設置していない人はこの機会に設置してみましょう!
ちょっとしたネタでも交流が生まれる可能性がありますから、そういったチャンスも逃さぬためにも、Let's Try!

fc2ブログ管理ページを開き、左サイドカラムにある「環境設定」下にある「環境設定の変更」をクリックして該当ページを開き、開いたページ(のメインカラムの)上部の「ブログの設定」にマウスポインタを置いてみましょう。
すると、いくつかのリストがプルダウン表示されると思います。その中の「記事の設定」を選択クリックしてみましょう。すると同ページの「記事の設定」へと移動します。
その項目の下のほうに下画像のようなブロックがあります。

fc2ブログ TwitterやFacebookボタンの設置設定画面

有効にする」チェックボックスにチェックを入れ、あとは「ボタンを選択」して更新ボタンを押すだけ!何て簡単!
ボタンのデザインはお好みで。当ブログで配布しているテンプレートをお使いの場合は、左二つがスッキリしていて合うと思いますよ~。

Facebookのボタンも同様です。説明するまでもありません。

ここで注意しておくべき点は、このボタンが含まれるブロックにスタイルシートを適用しておかなければ、記事との間に余白がなく見難くなってしまうことです。
当ブログで配布しているテンプレートでは、記事との間に30pxほどの余白を入れて対処していますが、そういったことに気を使っていないテンプレートですと当然余白なし・デザイン上好ましくなかったりします。

fc2ブログの「ツイートする」ボタンがあるブロック(Facebookのボタンも含む)には、「fc2_footer」というクラス名が付けられています。(拍手ボタンなどもこのブロックにあるのかな?表示させてないのでわかりませんが...)
このクラスにマージン設定、もしくはパディング設定すれば余白を加えることができるわけですね~。

もし、記事と「ツイートする」ボタンの間に適切な余白がなく見難くなっている場合は、

.fc2_footer {margin-top:30px;}

もしくは、

.fc2_footer {padding-top:30px;}

のどちらかの一文を、テンプレートのCSSの末尾に追加しておきましょう。CSSに詳しい方は、いろいろといじって自分好みのスタイルを適用しましょう。
ある程度、テンプレートの改造に慣れた方向けですね。
初心者の方は、ちゃんとこの部分の周りが見やすくなっているテンプレートを選びましょう!

Comment


    
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。