Luxeritasの「見出し・引用」をカスタマイズ(H2・H3・blockquote)

Luxeritas(ルクセリタス)は、人気の無料Wordpressテーマです。

  • WordPressのダッシュボードからデザインを簡単・きめ細かに設定可能
  • Googleアドセンスなどの広告を入れるためのウィジェットを標準で装備

など、ブログ運営に便利な機能が盛りだくさん。

Luxeritasを使えば、カスタマイズに多くの時間かけずに、記事の執筆に集中することができます。

(といいつつ筆が進まないことが多いですが・・・)

 

そんな至れり尽くせりで無料という素晴らしいテーマなんですが、

  • 見出し(h1, h2など)
  • 引用(blockquote)

のデザインは、残念ながらダッシュボードから変更できないので、cssを追加するしかありません。

 

以下、私が行ったLuxeritasの見出し・引用のカスタマイズ例をご覧ください。

見出しのカスタマイズ

Luxeritasの『見出し』は、デフォルトで以下のようなデザインになっています。

まあ、シンプルで特に悪くないんですが、記事中に画像・広告を入れると、見出しが目立たなくなるように感じました。

そのため、ちょっとcssを追加して、見出しがもう少し目立つようにしてみました。

具体的なカスタマイズ内容は以下のとおり。

  • 見出し2(H2)は、背景をグレーにして帯のように。
  • 見出し3(H3)は下にボーダーを追加。
  • さらに、H2・H3ともテキストを太字に。

以下、そのcssです。

コード
.post h2 {
background-color: #dddddd;
font-weight: bold}

.post h3 {
clear: both;
border-left: 4px solid #cccccc;
border-bottom: 2px solid #cccccc;
font-weight: bold}

なお、見出し4(H4)以下は基本的に使っていないので、デフォルトのままです。

引用(blockquote)のカスタマイズ

Luxeritasの引用(blockquote)は、デフォルトでは以下のようなデザインです。

枠の角が丸くなっていて、枠に影が付いています。

完全な好みですが、個人的には枠に丸みが無い方がしっくりくるように感じたため、以下のようにカスタマイズしてみました。

具体的なカスタマイズ内容は以下のとおり。

  • 枠の丸みを取り
  • 主張し過ぎないように背景色を薄く
  • ついでに薄めの枠線を追加

以下、そのcssです。

コード
.post blockquote {
border-radius: 0px;
background-color: #fcfcfc;
border:1px solid #dddddd;
}

以上、WordPressの人気無料テーマ『Luxeritas』の見出し・引用のカスタマイズでした。

Luxeritasで記事ごとにnoindexを設定する方法(プラグイン不要) Luxeritasの関連記事リストにインフィード広告を表示(プラグイン不要)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です