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

C1 Express

気になったモノや備忘録・日々考えたことなどについて書いていくマイペースなブログです。

はてなブログをちょこちょこカスタマイズ②サイドバー編




前回書いた、カスタマイズについての続きです。サイドバーを自分好みにカスタマイズしていきます。ちなみにLITERALLYさんの「DUDE」テンプレートを元にCSSを変更していくので他のテンプレートをお使いの場合はカスタマイズ方法が異なることがあります。



■メニュータイトルのカスタマイズ



DUDEテンプレートのサイドバーのメニュータイトルの左側にはポイントがありますが、これをまず消します。

デザイン >カスタマイズ >デザインCSS

デザインCSSに以下を追加します。

.hatena-module-title {border-left: none;}

メニュータイトルを中央寄せしたい場合は

text-align: center;

メニュータイトルの文字色を変えたい場合は#の後に6ケタのカラーコードを。
カラーコードが分からない場合は【色の名前とカラーコードが一目でわかるWEB色見本】がわかりやすいです。

color: #c9bbcd;

まとめると、DUDEテンプレートでポイントを消す+メニュータイトルを中央寄せ+メニュータイトルの文字色を変更=以下をデザインCSSに書き込む。

.hatena-module-title {
border-left: none;
text-align: center;
color: #c9bbcd;
}

上のCSSを書き込んでも文字色が変わらないメニュータイトルがある場合は、以下も追加する。

.hatena-module-title a {color: #c9bbcd;}

#のあとに、上と同じカラーコードを入力すればOK。

やっぱり、LITERALLYさんがカスタマイズ方法で言及されている通り、メニュータイトルは英語のほうが良いと思います。デフォルトで設定されている「Montserrat」というフォントが美しいので、ぜひぜひ英語でMontserratを表示させたい!


【おまけ】サイドバーのHTMLモジュールのメニュータイトルを非表示

.hatena-module-html.hatena-module-title {display: none;}



■検索バーのメニュータイトルだけを非表示にする。



デザイン >カスタマイズ >デザインCSSに以下を追加します。

.hatena-module-search-box .hatena-module-title {display: none;}



■新着記事一覧のリンク色の変更

以下を デザインCSS に追加します。

li.urllist-item.recent-entries-item a:link {color: #333333;}
li.urllist-item.recent-entries-item a:hover {color: #666666;} /* マウスを乗せたとき */
li.urllist-item.recent-entries-item a:active {color: #666666;} /* マウスでクリック時*/
li.urllist-item.recent-entries-item a:visited {color: #333333;} /* リンク済み */

今日はこのあたりで終了。また追記します!