スポンサーリンク

【Luxeritas】投稿・サイドバーの見出しをカスタマイズ

2019年3月31日

  • 2019年10月16日
    『記事タイトル』のクラス名について説明を追記しました。
  • 2019年6月18日
    『記事タイトル』を追記しました。
  • 2019年4月2日
    『フッター見出し』『左の線を消す』を追記しました。

Luxeritasのデフォルトの見出しは非常にシンプルです。

見出しはブログやWebサイトでトップページや記事、サイドバーなどに使います。

見出しはサイトや記事の内容をわかりやすく、使いやすくするという意味もあり、ブログやWebサイトでは重要なものです。
なのわかりづらい見出しでは意味がありません。

Luxeritasのデフォルトの見出しも「わかりづらい」というわけではありませんが、できればもう少しわかりやすく、目立つようにしたいですよね。

そこで今回は、Luxeritasでの投稿やサイドバーの見出しのカスタマイズ方法について描きたいと思います。

 
スポンサーリンク

見出しの文字サイズ

まずは見出しの文字サイズの設定をします。

場所[Luxeritas][カスタマイズ(外観)][文字サイズ]

こちらでは見出し(H2~H6)のの文字サイズやBODYやサイトタイトルなどの文字サイズを変更できます。
ご自分の好きなサイズに変更してください。

字体の変更

場所[Luxeritas][カスタマイズ(外観)][字体(フォントファミリー)]

こちらはサイト全体の字体(フォントふぁみり)の変更ができます。
「英語フォント」と「日本語フォント」が用意されていますので好きなものを選択してください。

スポンサーリンク

見出しのカスタマイズ

見出しのスタイルを設定します。

場所[Luxeritas][子テーマ編集][CSS]

LuxeritasのCSS設定はこちらで行ってください。

スタイシートの基本は次のようになります。

CSS基本 セレクタ { プロパティ: 値 ; }

ここでは見出しのカスタマイズ用の「セレクタ」を書いていきます。

記事タイトル

セレクタ.entry-title

投稿の見出しのクラブ名は『.entry-title』です。このクラス名はLuxeritasの記事一覧(タイル型、カード型)にも使われています。

そのため『.entry-title』だけで指定すると、記事一覧(タイル型、カード型)のタイトルにもスタイルが適用されます。

投稿、固定ページの記事タイトルだけを装飾したい場合は、指定を.post .entry-titleと指定してください。

投稿/固定ページの見出し

セレクタ.post h2(見出しの要素名)

投稿や固定ページで使う見出しをせってする場合は、「.post」のあとに半角スペースを入れて見出しのh2やh3などの要素名を指定します。

見出し

例えばH2の見出しを上のようにする場合は、

関連記事一覧の見出し

セレクタ#related h3

記事下の関連記事一覧の見出しのセレクタはこのようになります。

サイドバー見出し

セレクタ#side h3 または #side h4

サイドバーの見出し(ウィジェットの見出し)はID名 sideを使います。

先程と同じ見出しを使うとサイドバーの見出し設定はこのようになります。

※サイドバーウィジェットエリアには「H3」と「H4」の2つがあります。
「H4」の設定をする場合はセレクタを『#side h4』にしてください。

H3とH4の見出しを同じにする 私はサイドバーの見出しはH3とH4のスタイルを同じにしています。 H3とH4を一緒にする場合は、『#side h3,#side h4』とカンマ(,)で区切って指定してください。

スクロール追従サイドバー

サイドバーのエリアに「スクロール追従サイドバー(H4)」があります。
このエリアのID名は以下のようになります。

セレクタ#side #side-scroll h4

となります。なので#sideのあとに半角スペースを入れて『#side #side-scroll h4』と指定してください。

3カラム

セレクタ#col3 h3 または #col3 h4

フッター見出し

セレクタ#foot-in h4

見出しデザイン

見出しのデザインはいろいろなサイトでおしゃれなものを公開されていますのでお好きなものを探してみてください。

見出しカスタマイズにこんな記事もどうぞ

他にも見出しデザインに使えそうな記事を書いています。カテゴリー「HTML・CSS」を参考にしてください。

きらり
きらり
な~んだ!結耶は見出しデザインしないの?
結耶
結耶
デザインなんてまだまだ未熟者の私には無理です!

左の線を消す

『Luxeritas』で見出しのカスタマイズをするとデフォルトの左側の線が残ってしまいます。

左側の線を消したい場合は border-left: transparent;を追加してください。

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。