読者です 読者をやめる 読者になる 読者になる

無題で行こう

気の向くままに書きたいことを書いていきます。とりあえず無題でいきましょう。毎日いろいろありますよね♪

MENU

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

ブログの技

f:id:kay72234:20151026222241j:plain

■はじめに

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

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

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

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

■まずはコピペから

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

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

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

f:id:kay72234:20151027065505j:plain


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

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

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

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

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

■どのモジュールを表示するかも整理

サイドバーに表示することができるモジュールは、プロフィールや最新記事、リンクなど、いろいろあります。表示する・しないと表示順は、ダッシュボードのデザインメニューから変更することができます。ごちゃごちゃするのが嫌な方は、いらないものは外したりして整理しておくと良いでしょう。

■さいごに

テーマカラーを決めて、サイドバーの見出しも同じデザインに合わせると、ブログ全体にかなり統一感がでてきます。これまでに紹介したカスタマイズ手法は、基本的にコピペと少しのコード修正で行うことができるものです。
貼り付け場所さえ分かれば、とても簡単ですので、気軽に試してみてはいかがでしょうか。


スポンサーリンク