にちじょうみだれがき

役立ち情報から雑記まで幅広いジャンルを展開するブログ。

サイドバーのモジュールタイトルをCSSで装飾する方法

f:id:ChihaYuu:20160506180232j:plain

サイドバーのモジュールタイトルが、あまりにもシンプルで寂しい。
そんな時はCSSを使って装飾だ!!装飾といっても、大見出し用に設定しているCSSを流用しただけですが...流用も大事と自分に言い聞かせる。

いつかは自分で好き勝手CSSデザインできる技術を身につけたいです。

変更箇所

サイドバーのモジュールタイトルをカスタムしたい場合は「hatena-module-title」を触ります。自分好みのデザインをCSSで実現しちゃいましょう!

装飾するためのCSSコードの記載場所はいつも通りの場所です。

ダッシュボード > デザイン > カスタマイズ > デザインCSS


当ブログでは以下のCSSを記載しています。

/*サイドバー モジュールタイトルカスタム*/
.hatena-module-title{
font-size:18px;
font-weight:bold;
color: #ffffff;
background: #e07000;
padding: 15px 15px;
border-radius: 10px;
}

参考になるかわかりませんが、自分なりの記録として記事にしました。
体裁の整ったデザインのCSSコードなどは、結構ネット上に配布されています。使っていいコードならそれを使用して、自分好みのブログを作りましょう。

以上、モジュールタイトルをCSSで装飾する方法を紹介しました。

広告を非表示にする