りさこぶろぐ

主にはてなブログのカスタマイズ方法を紹介してます、

はてなブログでサイドバーのプロフィールにSNSのリンクボタンを設置する方法

SPONSORED LINK

 

こんにちは!りさこです!

 

今日は、サイドバーにSNSなどのリンクボタンの設置方法をまとめてみます。

f:id:matsuda_risako:20150824194426p:plain

 

カスタマイズしてない状態

f:id:matsuda_risako:20150824194558p:plain

カスタマイズしてないと、読者になるボタンしか表示されません。

 

1.ボタンとなる画像のリンクを取得する

ネット上にある画像の場合

ネット上にある画像の場合は、画像の上で右クリックして、画像URLをコピーを選択します。

f:id:matsuda_risako:20150824195252p:plain

こうすると、画像のURLを取得することができます。

パソコンのファイルの上にある画像の場合

まず、ネット上に画像をアップします。

はてなには、『Hatena Fotolife』というサービスがあるので、私はそこに画像をアップしました。

f.hatena.ne.jp

 

アップロードができたら、さっきと同じように、画像のURLを取得します。

f:id:matsuda_risako:20150824200119p:plain

こうすると、パソコンのファイル上にある画像のURLも取得できます。

 

ちなみに、この画像はこちらのサイトからダウンロードしました。

noraneko.jp.net

※この画像を使うと、画像が粗いからなのか少し周りがギザギザになります…

もしギザギザにを直せたら書き直します!

 

他にも、色々なSNSイコン画像があります!

liginc.co.jp

 

2.HTMLをカスタマイズする

ます、デザイン→カスタマイズ→サイドバー→モジュールを追加→HTMLのタイトルには何も書かないで、大きい空欄の方に

<a href=\"取得した画像のURL\" target=\"_blank\"><img src=\"リンク先のURL\"/></a>

と書くと…

f:id:matsuda_risako:20150824201133p:plain

サイドバーの一番下に、SNSリンクボタンが表示されます!!!!!

 

次に、デザイン→カスタマイズ→サイドバーの画面で、HTMLの項目をプロフィールの項目の下に移動させます。

f:id:matsuda_risako:20150824201721p:plain

そうすると…

 

f:id:matsuda_risako:20150824201846p:plain

プロフィールの下にSNSリンクボタンが設置できましたー!!!!!

 

3.CSSをカスタマイズする

このままだと読者になるボタンとSNSリンクボタンのすきまが気になるので、

デザイン→カスタマイズ→カスタムCSSの空欄に

.hatena-module-profile{
    padding-bottom:0;
}

と書くと…

 

f:id:matsuda_risako:20150824202212p:plain

プロフィールと一体化しましたー!!!!!

 

まとめ

みなさんもお好みのSNSリンクボタン設置できたでしょうか!?

少しめんどくさいですが、このボタンを設置するとブログへの愛情がアップすること間違いなしなので、ぜひやってみてください!

 

 

おわり

広告を非表示にする