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

2019年3月31日2020年1月11日Luxeritas

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

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

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

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

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

見出しの文字サイズ

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

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

字体の変更

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

見出しのカスタマイズ

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

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

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

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

記事タイトル

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

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

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

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

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

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

/*H2見出し*/
.post h2 {
      padding:5px 10px;    /*内側の余白(上下 左右)*/
      background:#87ceeb;    /*背景色*/
      color:#FFFFFF;    /*文字色*/
      font-weight:bold;    /*太字*/
}

関連記事一覧の見出し

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

サイドバー見出し

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

/*H3サイドバー見出し*/
#side h3 {
      padding:5px 10px;    /*内側の余白(上下 左右)*/
      background:#87ceeb;    /*背景色*/
      color:#FFFFFF;    /*文字色*/
      font-weight:bold;    /*太字*/
}

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

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

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

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

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

3カラム

フッター見出し

見出しデザイン

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

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

 https://saruwakakun.com/html-css/reference/h-design

CSSで簡単に作れるおしゃれな見出しデザイン20選 | webclips

HTMLとCSSのみで簡単に作れる見出しデザイン例です。シンプルな見出しから凝った見出しまでサンプル20 ...

 https://design.webclips.jp/css-midashi-ribon/

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

CSSを使って画像を丸く表示する方法

2020年2月23日 「丸で囲んだ文字」を追記しました。 左の画像(スマホの方は上の画像)は四角い画像をCSS ...

 https://kirari-yums.net/post-5147/

CSSを使って影をつける

よくページの装飾やサイトのカスタマイズなどで『影』をつけたりすると思います。 ボックスや見出し、 ...

 https://kirari-yums.net/post-6737/

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

きらり

な～んだ！結耶は見出しデザインしないの？

結耶

デザインなんてまだまだ未熟者の私には無理です！

左の線を消す

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

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

/*H2見出し*/
.post h2 {
      border-left: transparent;    /*左の線を消す*/
}

応援よろしくお願いします。

     

お問い合わせはこちら

この記事を書いた人

フォロー

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター

きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM