WordPressテーマTwenty Elevenの見出し（hタグ）スタイルを修正します！

デフォルトテーマは無個性でお洒落じゃない、ださーい！、と思っていましたけど、今になってはそのようなことは細かいことです。近年の流行を敏感に捉えデザインに取り入れ、つつましくおしとやかに必要な機能と地味に最新の技術をどやぁ？と採用したデフォルトテーマ、Twenty Eleven。満足しています。・・・が、ちょっとね、修正したいです。今回は、hタグ、この見た目を修正したいと思います。

WordPressのデフォルトテーマTwenty Elevenの変えたい点

• h1のタイトル・・・このままでOKです。
• h2の見出し・・・Bold、太字と見た目が変わりません、修正したいです。
• h3の小見出し・・・本文よりも小さいです。これはちょっとやめてほしいです。
• h4の？何に使うの？h4とかh5とかh6も。上手な使い方がありましたら、教えていただきたいです。

また、修正前、h4～h6はh3より大きい、、、といいいますか、地の文と同じスタイルにしか見えません。。。

こう変えたい！

すばらしいサイトを見つけました。このサイトの見出し、小見出しは、はっきりと見出し、小見出しに見えます！テーマがTwenty Tenをカスタマイズした感じで、変更後のイメージと修正できそう！と勇気がわいてきます。ただし始める前に注意する点があり、それは、参考サイトのh1を私のサイトのh2にしたい、参考サイトのh2を私のサイトをh3にしたい、ということです。

• Everyday Deadlock | Yet Another Blog written by Yuto HAYAMIZU

変えるためにここを調べます♪

2つのサイトのstyle.cssを比較します。2つのcssは次になります。勉強させていただきます♪

• https://oki2a24.com/wp-content/themes/oki2a24/style.css
• http://hayamiz.com/~haya/blog/wp-content/themes/twentyeleven/style.css

 

.entry-content h が見出しスタイルを制御しているようですので、.entry-content でcssを検索します。

 

違いを挙げます。

h1、h2。次の属性が参考サイトにのみあります。内容を書きます。

• フォントサイズを大きく。単位は相対のem。
  ※h1とh2でサイズは違います。
• 見出しの左側にラインを指定
  ※ h1とh2で色が違います。
• 左側のラインからの余白を指定

font-size: 1.5em;
border-left: 8px solid gray;
padding-left: 5px;

h3。これも参考サイトのみ。重複しますけど、内容を書きます。

• 見出しの左側にラインを指定
  ※ h1とh2で色が違います。
• 左側のラインからの余白を指定
• 外側の余白を指定

border-left: 8px solid lightgray;
padding-left: 5px;
margin-left: 6px;

実際に修正していきます。

参考サイトの該当部分を反映します。次のように修正しました。

[root@vps ~]# vim /var/www/html/oki2a24.com/wp-content/themes/oki2a24/style.css

.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
        color: #000;
        font-weight: bold;
        margin: 0 0 .8125em;
}
.entry-content h3,
.comment-content h3 {
        font-size: 10px;
        letter-spacing: 0.1em;
        line-height: 2.6em;
        text-transform: uppercase;
}

↓

.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
        color: #000;
        font-weight: bold;
        margin: 0 0 .8125em;
        font-size: 1.5em;
        border-left: 8px solid gray;
        padding-left: 5px;
}
.entry-content h3,
.comment-content h3 {
        font-size: 1.2em;
        letter-spacing: 0.1em;
        line-height: 2.6em;
        text-transform: uppercase;
        border-left: 8px solid lightgray;
        padding-left: 5px;
        margin-left: 6px;
}

修正後の見出しスタイルが無事修正されました♪

以上です！！！！！