テキストウィジェットの見出しを装飾する方法

Minimal Cafeトップページのウィジェットエリアは、全てテキストウィジェットでレイアウトしています。
そして、タイトル部分だけCSSで明朝体＆大文字に少々装飾してみました。

以下、そんな装飾のやり方の例を解説します。

出来上がり

コード

<div class="mincho" style="font-size: 26px; margin-bottom: 30px; line-height: 1.5;">トップページはウィジェットで構成。<br> ドラッグ＆ドロップでレイアウトOK！</div>

記述方法はこんな感じですね。
テキストウィジェットのタイトル欄は空にして、本文欄に記述するのがコツ。

.mincho という部分は、テーマのスタイルシートにあらかじめ記述してある明朝体のスタイルをそのまま利用しています。
ここもお好みのフォントに変更するなら、、、

<div style="font-family: フォント名; font-size: 26px; margin-bottom: 30px; line-height: 1.5;">トップページはウィジェットで構成。<br> ドラッグ＆ドロップでレイアウトOK！</div>

のような感じで、font-familyに好みのフォントを指定してもいいかもしれません。

まとめ

テキストウィジェット＋CSSをうまく活用すると、どんなデザインも自由自在です。
基本的なCSSだけでも覚えると（その都度リファレンスガイドで検索してもいいですが）、
お好みのサイトを作りやすくなりますよ。