THE THOR 記事の見出しを装飾しましょう

ブログのメインの見出し、ちょっと物足りない?

いつも見出しとしてh2で設定していると思いますが、じゃあh1はどこでしょう?

ここです↓
THE THORの投稿記事のメインの見出しです。

h1デフォルト

h1。シンプル・イズ・ベスト。
ですが、飾りたいときもありますよね。

でもカスタマイズメニューにあったっけ?というところを記事にします。

記事の見出しと記事内の各見出し

THE THORの場合、記事内の各見出し(h2~h5)は下記カスタマイズメニューより簡単に変更できます。

here外観-カスタマイズ-見出し設定(個別ページ用)

h2~h5まで設定できます。
右側のビュワーで投稿ページを表示させておけば、デザインと色を視覚的に選ぶことができます。

じゃあ記事のメインの見出しはどこでいじるの?

カスタマイズメニューからはいじれません。
追加CSSで設定します。

here外観-カスタマイズ-追加CSS

何をいじるの?

h1要素です。
実際にh1要素を見てみましょう。

  1. 今回はChromeを使います。
    投稿画面を開き右クリックをして「検証」をクリックします。
  2. 検証画面になるので、右側の画面のポインタを探し(画面の配置が違う場合もありますが、ポインタを探してください)。左側のビュワーの見出しの上をクリックします。
    すると、右側の画面のソースコードが反転します。反転したことろがh1(記事の見出し)になります。
    h1検証
  3. ここにスタイルを装飾していくと覚えてください。
here外観-カスタマイズ-追加CSS

ここにh1の飾りを書いていきます。今回は
1文字目を大きく・全体に2色のボーダーラインをひく
ことにしたいと思います。

以下、読み飛ばしていただいてOKです。
単純にh1自体に書き加えてもいいのですが、h1が投稿の見出しだけかはわからないので(いや、簡単に分かるかも)、「dividerBottomというclassの下にあるh1」に装飾することにします。

.dividerBottom h1:first-letter{color:#89D5E0;font-size:200%;}.dividerBottom h1 {border-bottom: solid 3px #cccccc;position: relative;}.dividerBottom h1:after {position: absolute;content: " ";display: block;border-bottom: solid 3px #89D5E0;bottom: -3px;width: 20%;}

完成

h1装飾完成

ちょっと雰囲気変わりますね!
ざっくりと理解できたら流用してみてください。
遊んでみると楽しいです!

投稿者プロフィール

つるむらさき
つるむらさき
WordPress、マーケティングを勉強中の事務員&Web担当の保育園児ママです。

SNSやブログで知り合った方とも
情報共有できたり楽しくコミュニケーション取れたりできればうれしいです!!
サーバーはエックスサーバーが速くてお勧めです



アイキャッチ画像
最新情報をチェックしよう!