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
サルワカくんを一番参考にしました。いつもありがとうございます。
*このように記事用のHタグだけを指定できるようです。今度挑戦します。
記事を参考にさせていただきました。
先日gensenのテーマを導入したのですが
見出しのフォントが小さすぎて。。。
そこでこちらの記事通りcssを変更したのですがいくらやっても、変わらないのです。
ご意見聞かせていただけますか? よろしくお願いいたします
ワードプレスなどのウェブサイトの構成は、2段階になっています、本体とデザインの。本体がHTMLで、デザインのほうがCSSなわけですが、本体のほうでフォントを設定していると、本体>CSSとなってしまう、ということかもしれません。
ダッシュボードから外観→TCDテーマオプション、の中のCSSを置くところでやってみたほうがいいかもしれません、試してみてください。