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

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

*このように記事用のHタグだけを指定できるようです。今度挑戦します。

関連記事

  1. 旅の手帖2018年3月号の特集は「むかし町を旅する」

  2. YouTubeの埋め込みサイズを自動でスマホ対応(レスポンシブ)に TCDテーマ「GENSEN」

  3. グーグル日本語入力単語登録(Windows10)の方法

  4. PNGやJPEGファイルをオンラインで無料で圧縮する Medibangpaintやinkscape使いブロガーは必須

  5. ワードプレスで会話風の吹き出し実践編 プラグインspeech bubble使いました

  6. 昭和生まれがYoutubeチャンネルを開設して2か月後の収益は

    • shuichi c

    記事を参考にさせていただきました。
    先日gensenのテーマを導入したのですが
    見出しのフォントが小さすぎて。。。
    そこでこちらの記事通りcssを変更したのですがいくらやっても、変わらないのです。
    ご意見聞かせていただけますか? よろしくお願いいたします

      • 歴史トラベル管理人

      ワードプレスなどのウェブサイトの構成は、2段階になっています、本体とデザインの。本体がHTMLで、デザインのほうがCSSなわけですが、本体のほうでフォントを設定していると、本体>CSSとなってしまう、ということかもしれません。
      ダッシュボードから外観→TCDテーマオプション、の中のCSSを置くところでやってみたほうがいいかもしれません、試してみてください。

  1. この記事へのトラックバックはありません。