KOHLOG | 気ままなシンプルライフ

ライフスタイル、ガジェットなど。気ままなblog。

【ブログカスタマイズ】サイドバーにリンクバナーを設置。

今回の記事はブログカスタマイズについてです。サブブログ開設に伴い、メインの関連付としてリンクバナーをそれぞれ作成・設置しました。今回はその手順について簡単に書いていきたいと思います。

リンクバナー設置までの流れ

手順は以下の通りで、こうやってみるとやることは少なく見えます。はてなブログではサイドバーにHTMLモジュールを追加する形となります。

  1. バナー用画像の作成
  2. HTMLコード作成
  3. 設置完了

1.バナー用画像の作成

Canvaで作成

バナー用の画像はCanvaというサイトを利用して作成しました。様々なテンプレートと無料で使える素材が多く用意されているので、ペイントやパワポで作成するよりも簡単でお洒落に作ることが出来ます。
https://www.canva.com

画像サイズに注意

私は横300px、縦150pxで作成しました。あまり画像サイズを大きくし過ぎるとページ読み込み時の負荷になる可能性があるので、最適なサイズにしておきましょう。

2.HTMLコード作成

サイドバーに設置

今回はサイドバーに設置しています。フッダーも考えましたが、もう少し充実させてから検討していきます。サイドバーのモジュールはHTMLを選択し、HTMLコードを書きました。リンクモジュールだとテキストリンクになってしまうので、こちらにしています。

場所・・・[デザイン]-[サイドバー]-[モジュールを追加]-[HTML]

基本的には下記のHTMLコードを入力すれば設置完了です。一応CSSも載せておきますが、デザインテーマによっては細かい調整が必要になるかも知れません。

HTML

/* リンクバナー */
<p>
<a href="リンク先のURL" target="_blank" >
<img src="画像のURL" width="画像の横サイズ" height="画像の縦サイズ" border="0" alt="ブログ〇〇へ" />
</a></p>

CSS

/* サイドバーの画像中心揃え */
.hatena-module.hatena-module-html p{
    text-align: center;
}
/* サイドバーの画像中心揃え */
.hatena-module.hatena-module-html p img{
    display: block;
    text-align: center;
    width: 200px;
    max-width: 80%;
    margin: 1px auto 0 auto;
}

3.設置完了

表示結果

メイン・サブそれぞれのリンクバナーは以下のようになります。

■メインブログへのリンク

メインブログへ

■サブブログへのリンク

サブブログKOHLOGへ

おわりに

初のブログカスタマイズ記事でしたが、本当に初歩的な内容でしたね。今後はメニューバーとかも公開していきたと考えています。サイドバーのモジュールくらいなら失敗しても対処は楽なので気軽に挑戦してみましょう。

HTMLやCSSの知識は書籍等でも学ぶことが出来ます。興味があれば是非こちらもご参照下さい。