[コピペだけ]6種類のオリジナルSNSボタンをBloggerに設置する方法を紹介する

   

social-media

あなたはBloggerを運営している時に、「SNSボタンが、もうちょっとカッコよかったらな、、」と思う時はありませんか?

Bloggerは、Google先生が運営しているサービスだけあって、無料ブログの中でも最高のカスタマイズ性を誇っていますが、なぜか初期設定のSNSボタンのデザインが、悲惨なまでにダサいことでも有名です。

そこで今回はコピペだけで、BloggerのSNSボタンを超かっこよくするカスタマイズ法を紹介していきます。

ぜひ、参考にしてください。

スポンサーリンク

今回のカスタマイズで作れるSNSボタンのデザイン

今回のカスタマイズで作ったオリジナルSNSボタンは、1枚の画像がPC版での表示で、2枚目がスマホ版での表示です。

PCの時には横いっぱいに3列にボタンが広がり、スマホ時には2列に並ぶように設定しています。また、ボタンにカーソルを合わせた時に、ゆっくりと文字色と背景色が変化するようにしました。(本ブログを参考に)

blogger-sns

sns-blogger-sumaho

 

カスタマイズの手順

1、head内にFont Awesome Iconsのコードを挿入

まずは、テンプレートを開いて

を見つけます。そして、このコードのすぐ後ろに、

と言うコードをコピペします。

このコードは、「Font Awesome Icons」と言う無料でアイコンを提供してくれているサービスを利用するために必要なコードで、これにより、TwitterやFacebookのかっこいい公式アイコンをデザインに使うことができます。

(ただし「Font Awesome Icons」では、はてなブックマークのアイコンは用意されていないので、はてブボタンだけはアイコンを使用せずに、コード内に「B!」と直接入力することで誤魔化しています。)

2、skin内にCSSコードを挿入

次に、

と言うコードを探して、その真上に以下のコードを貼り付けてください。

3、SNSボタンを設置したい所にコードを挿入

最後にSNSボタンを設置したい場所に、以下のコードを貼り付けます。

ここで注意しなければならないのが、上のコードの下から5行目にある

と言うコードです。

このコードの中に「サイトのURL」と書かれている部分がありますが、ここの部分は自分のブログのURLに書き直してください。

例えば、ボクの場合だと、「サイトのURL」を「toumaswitch.com」に書き換えればOKです。(URLの先頭にhttpは要りません。)

補足:コードをどこに挿入したら分からない場合

もし、3番の手順で紹介したコードをどこに貼れば良いのか分からない場合は、

と言うコードを見つけて、その真下に貼れば見栄えがよくなります。

テンプレートによっては、<data:post.body>と言うコードは何ヵ所も書かれている場合があるので、その時は1つずつコードを貼って、上手く表示されるか確かめる必要があります。

スポンサーリンク

この記事をシェアする

スポンサーリンク

この記事と関連がある記事

スポンサーリンク