【記事タイトル】見出しスタイル確認用サンプルページ【参考】

【記事タイトル】見出しスタイル確認用サンプルページ【参考】

こちらのブログはWordePressの無料テーマ【LION MEDIA】を使って制作しています。

簡単にいわゆるブログっぽいデザインにしてくれるし、さまざまなカスタマイズも可能な非常に優れたテーマです。
しかし多機能ゆえにどこをいじればどこがどう変わるのかがいまひとつわかりません。
(もちろん私の勉強不足なのですが)

このページはLION MEDIAでデザインをカスタマイズする際の確認用のページとなっていますので、ダミーのテキストやダミーの画像がふんだんに埋め込んだものになっており、内容的にはまったく私以外の方には役に立たないものになっていますのでご了承ください。

見出し2<h2></h2>記事中のタイトル部の次に大きなタイトル

LION MEDIAでは「見出し2」~「見出し5」までそれぞれ個別にデザインすることが可能になっています。また、見出しを付けると自動的に最初の見出しの上に目次を作成してくれます。

見出し3<h3></h3>〇〇〇〇〇〇〇〇 〇〇〇〇〇〇 〇〇〇〇〇

見出し2の下に見出し3があると、目次の中で入れ子表示されます。
自動で作成されるのですから非常に優秀。手作りでHTMLを書いてきた人からすると便利過ぎて涙が出てきます。

見出し3<h3></h3>〇〇〇〇〇〇〇〇 〇〇〇〇〇〇 〇〇〇〇〇

見出し4<h4></h4>○○〇〇○○〇〇○○〇〇 ○○〇〇

さすがに見出し4まで使うことはないと思うし、見出し5なんてのは使うとき絶対ないと思いますが、めちゃくちゃ長い記事なんかを書いた際は必要になることがあるかもしれませんね。

とはいえ、今のところ見出し4すら使う必要性を感じません。
(記事内容が薄いせいかもしれませんが)

見出し3<h3></h3>〇〇〇〇〇〇〇〇 〇〇〇〇〇〇 〇〇〇〇〇

ちなみにLION MEDIAでは各見出しにあらかじめ用意された16のスタイルからデザインを割り当てることができます。色についてはカラーAとカラーBを個別に指定することでカスタマイズ可能。

さらに個々にCSSを設定することもできるので、用意された16パターン以外のオリジナルの見出しを作ることの可能です。

見出し2「見出しのパターン」はどんなのがあるの

見出し3「デフォルトの設定」

  • 見出し2 01:先頭大
  • 見出し3 09:ボックス
  • 見出し4 00:オリジナル見出しを作成
  • 見出し5 00:オリジナル見出しを作成

となっています。

見出し3「16パターン」って何があるの?

  • 先頭大[カラーA:先頭文字 B:文字] LION MEDIAの見出し01
  • 内側影[カラーA:背景 B:文字] LION MEDIAの見出し02
  • リボン風[カラーA:背景 B:文字] LION MEDIAの見出し03
  • 箱型[カラーA:背景 B:文字] LION MEDIAの見出し04
  • マーカー風[カラーA:背景 B:文字] LION MEDIAの見出し05
  • 吹き出し風[カラーA:背景 B:文字] LION MEDIAの見出し06
  • グラデダーク[カラーA:上 B:下] LION MEDIAの見出し07
  • グラデライト[カラーA:上線 B:文字] LION MEDIAの見出し08
  • ボックス[カラーA:線 B:文字] LION MEDIAの見出し09
  • 左線[カラーA:左線 B:文字] LION MEDIAの見出し10
  • 左線+背景[カラーA:左線 B:背景] LION MEDIAの見出し11
  • 下線[カラーA:左線 B:文字] LION MEDIAの見出し12
  • 左下線[カラーA:左線 B:文字] LION MEDIAの見出し13
  • 内側線[カラーA:背景 B:文字] LION MEDIAの見出し14
  • はみ出す線[カラーA:線 B:文字] LION MEDIAの見出し15
  • 文字下色線[カラーA:下線 B:文字] LION MEDIAの見出し16

具体的なデザインについてはこちらのサイトで詳しく説明されています。

ということで、このページを使って見出しの調整をしていきます。

WordPressカテゴリの最新記事