はてなブログでサイドバーのプロフィールにSNSのリンクボタンを設置する方法
SPONSORED LINK
こんにちは！りさこです！
今日は、サイドバーにSNSなどのリンクボタンの設置方法をまとめてみます。
カスタマイズしてない状態
カスタマイズしてないと、読者になるボタンしか表示されません。
１．ボタンとなる画像のリンクを取得する
ネット上にある画像の場合
ネット上にある画像の場合は、画像の上で右クリックして、画像URLをコピーを選択します。
こうすると、画像のURLを取得することができます。
パソコンのファイルの上にある画像の場合
まず、ネット上に画像をアップします。
はてなには、『Hatena Fotolife』というサービスがあるので、私はそこに画像をアップしました。
アップロードができたら、さっきと同じように、画像のURLを取得します。
こうすると、パソコンのファイル上にある画像のURLも取得できます。
ちなみに、この画像はこちらのサイトからダウンロードしました。
※この画像を使うと、画像が粗いからなのか少し周りがギザギザになります…
もしギザギザにを直せたら書き直します！
２．HTMLをカスタマイズする
ます、デザイン→カスタマイズ→サイドバー→モジュールを追加→HTMLのタイトルには何も書かないで、大きい空欄の方に
<a href=\"取得した画像のURL\" target=\"_blank\"><img src=\"リンク先のURL\"/></a>
と書くと…
サイドバーの一番下に、SNSリンクボタンが表示されます！！！！！
次に、デザイン→カスタマイズ→サイドバーの画面で、HTMLの項目をプロフィールの項目の下に移動させます。
そうすると…
プロフィールの下にSNSリンクボタンが設置できましたー！！！！！
３．CSSをカスタマイズする
このままだと読者になるボタンとSNSリンクボタンのすきまが気になるので、
デザイン→カスタマイズ→カスタムCSSの空欄に
.hatena-module-profile{
padding-bottom:0;
}
と書くと…
プロフィールと一体化しましたー！！！！！
まとめ
みなさんもお好みのSNSリンクボタン設置できたでしょうか！？
少しめんどくさいですが、このボタンを設置するとブログへの愛情がアップすること間違いなしなので、ぜひやってみてください！
おわり
