はてなブログを簡単カスタマイズ！⑥サイドバー編

f:id:kay72234:20151026222241j:plain

■はじめに

筆者もはてなブログでブログを開設してから、いろいろとデザインを触ってみました。基本的には、あちこちのサイトで紹介されているカスタマイズ手法を参考にさせていただいています。
そうしているうちに、どのサイトから何を参考にしたのか自分でも分からなくなりましたので、順番に記事にまとめています。今回は、サイドバーのデザイン変更に関してです。

■統一感を出すならサイドバーも

これまでの記事で、見出しや本文の文字、タイトルまわりのデザイン変更の方法を整理してきました。それぞれのパーツの色調を合わせていくと、ブログ全体のデザインに統一感がでて、良い感じになります。そうなると、サイドバーの見出しのデザインも合わせたくなりますよね。

先ほどの通り、上記の記事では「見出し」のカスタマイズ方法をまとめました。こちらを応用すると、サイドバーの見出しのデザインも同じように、簡単にカスタマイズができるようになります。

■まずはコピペから

では毎度のパターンになりますが、次のコードをコピーしてください。

.hatena-module-title{
color: #ffffff;
background: #000080;
border-radius: 5px;
padding: 20px 20px;
}

では、このコードを貼り付けます。貼り付け先はいつもの通り「デザインCSS」です。ダッシュボードのデザインメニューを開いてから、スパナマークのアイコンをクリックしてください。一番下に「デザインCSS」がありますね。クリックすると編集欄が開きますので、そこに貼り付けてください。

いつものことですが、「編集を保存する」ことを忘れないようにしてください。

■コードの構造はどれも同じ

いかがでしょうか？実は先ほどのコード、見出しの変更の記事で紹介したコードとほとんど同じものでした。

.hatena-module-title{
color: #ffffff;
background: #000080;
border-radius: 5px;
padding: 20px 20px;
}

では、コードの内容を見ていきます。見出しを変更するコードと違う点は１行目だけで、見出しでは「entry-content h3」としていた箇所を「hatena-module-title」に変えています。
この「hatena-module-title」が、サイドバーの見出しの部品であることを意味しているわけです。
その他の「color」や「background」などの指定は、見出しの場合と同じです。先ほどの記事で細かに解説していますので、ご覧いただければと思います。