Twitter等のボタンをアイコンにしてみました。 | アメブロをカスタマイズしよう!

アメブロをカスタマイズしよう!

最近、サイトの見栄えやSEO対策により、アクセスアップを図ろうとする傾向が顕著になってきました。そこで、その解決策の一つとして、アメブロのカスタマイズを研究してみようと思います。あなたのブログのご参考にしてくださいね。

ご訪問ありがとうございます。
人気ブログランキングの応援
をして頂けると励みになります。



便利になるようにと、ブログ内にTwitter等のボタンを設置してきたのですが、
数が増えてくると、ちょっと目障りな存在になってきました。



もっと小さくしかも便利になるようにできないものだろうかと考えたら、
ボタンをアイコンに換えたらどうだろうかと思い付きました。



しかも、ポインターをアイコンの上に置くと
説明文が表示されれば便利ですよね。



それでは、今日も実践してみましょう。



アイコンを無料で提供しているサイトは、たくさんありますが、
その中で、私は次のサイトでアイコンをダウンロードしました。
↓↓↓
http://www.freeiconsweb.com/



ダウンロードしたアイコンの中から、
今回使用するものは次の通りです。

アイコン



表示される説明文は、それぞれ次のように
しようと思います。

・kiyoのツイッターへようこそ!フォローに感謝します。

・kiyoのフェイスブックへようこそ!

・You Tube動画は、こちらです。



次は、それぞれのアイコンをブログにアップロードし、
それぞれのURLをメモ帳にコピーしておきます。



そして、フリースペースへ入れるHTMLを次のように修正します。

<div id="Twitter"><a href="http://www.twitter.com/kiyo193" target="_blank" ><img src="ここにURLを入力します" title="kiyoのツイッターへようこそ!フォローに感謝します。"/></a></div>

他のアイコンも同じようにします。



最後に、CSS編集画面へ次のCSSを追加します。

/* ■Twitter■ */
#Twitter {
top: 50px;
position: fixed;
right: -1px;
}

他のアイコンも同じようにします。



ブログの右上をご覧ください。
アイコンが3つ並んでいますが、
結構すっきりしましたね。



今回は、以上です。



最後まで読んでいただき、
ありがとうございました。

少しでもお役に立ちましたら、
応援お願いします!!

人気ブログランキングへ