サイトアイコン 歴史トラベル

TCDワードプレステーマ「GENSEN」の見出し(h1-h6) CSSを整理する

TCDのWordpressテーマ「GENSEN」の見出し(h1~h6)の構造がいまいちわかりませんでした。

普通のイメージだとh1というのは、各記事のタイトルだと思いがちですが、
どうやら、GENSENは、ふつうの投稿記事と同格で、紹介ページやお知らせページがあるからなのか、H1の見出しは、ブログのタイトル(ここの場合、「歴史トラベル」)があたります。

通常のタイトル、この記事の場合は「TCDワードプレステーマ「GENSEN」の見出し(h1-h6) CSSを整理する」がh2になります。

文中の見出しはh3以下になるのですが、こまるのが、どんどん文字が小さくなること。とにかく小さい字がすきなTCDさんですからw


(TCDテーマで標準の文字のサイズを18pxなどに数値で指定する方法はこちらもごらんください)
https://rekisitravel.com/gensenfontbig/

まずデフォルトのH1→H3,4,5となるにつれて文字が小さくなる設定を変えないといけませんよね。

外見→テーマの編集で、直接、CSSをいじるしかありません。

GENSEN: スタイルシート (style.css)
から

/* ———————————————————————-
WordPress プリセットスタイル
———————————————————————- */

.post_content h1 { font-size:150%; }
.post_content h2 { font-size:140%; }
.post_content h3 { font-size:130%; padding-top:20px; }
.post_content h4 { font-size:120%; }
.post_content h5 { font-size:110%; }
.post_content h6 { font-size:100%; }

ここですね。

とりあえずh2,h3を150%にして、h4,h5,h6を140%に揃えました。
h3のpadding-top:20px(上に20pxの空白)もとりました。

コンテンツ

h1 通常使わないけどこんな感じ

 

h2 記事タイトル一文字目が大きい

 

h3 記事中のメインの見出し 一文字目が大きい 上下にライン

 

h4 Pointまとめ 見出しというより段落のまとめ

 

h5 白抜きタイプ

 

h6 中央置きする用見出し

となります。

各見出しの装飾CSSについては、以下のコードで整理してまとめています

GENSENのテキストエディターに入っている装飾ボタンのイメージです

*Hタグは上にあるようにすでにデザインを変えていますのでデフォルトのものとは違います。

ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
ここに右カラムに表示させたい任意のテキストや画像タグを入力します。
ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
ここに中央カラムに表示させたい任意のテキストや画像タグを入力します。
ここに右カラムに表示させたい任意のテキストや画像タグを入力してください。

H3見出しa

H3見出しb

H4見出しa

H4見出しb

H5見出しa
H5見出しb

囲み枠a

囲み枠b

囲み枠c

フラットボタン

フラットボタン-L

フラットボタン-S

フラットボタン-blue

フラットボタン-green

フラットボタン-red

フラットボタン-yellow

角丸ボタン

角丸ボタン-L

角丸ボタン-S

ラウンドボタン

ラウンドボタン-L

ラウンドボタン-S

サルワカくんを一番参考にしました。いつもありがとうございます。

サルでも分かるHTMLとCSSの勉強講座です。初心者の方でも分かるように丁寧に1つずつ解説していきます。
Webデザイン入門:HTMLとCSSの書き方をゼロから学ぼう - サルワカ | サルでも分かる図解説明マガジン


*このように記事用のHタグだけを指定できるようです。今度挑戦します。
モバイルバージョンを終了