GENSENの見出し(h1-h6)CSSを整理する

GENSENの見出し(h1~h6)の構造がいまいちわかりませんでした。

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

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

通常のタイトル、この記事の場合は「GENSENの見出しCSSを整理する」がH2になります。

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

なので、まずデフォルトの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

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

関連記事

  1. XSERVERでワードプレスを始めようとシンプルなドメイン直下のURLに設定して公開しようとしたところできない→できた!

  2. Adsenseをワードプレス(WP)ブログに挿入するためのプラグインAd Inserterを入れてみる

  3. font awesomeで動くフォントを使ってみてみた

  4. ワードプレステーマ「Gensen」にしました

  5. inkscapeでふきだしをつくる

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

  1. この記事へのコメントはありません。

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