WordPressテーマTwenty Elevenの見出し(hタグ)スタイルを修正します!

スポンサードリンク

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

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

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

★WordPressテーマTwenty Elevenの見出し(hタグ)スタイルを修正します! - oki2a24.png

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

こう変えたい!

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

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

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

 

★WordPressテーマTwenty Elevenの見出し(hタグ)スタイルを修正します! - oki2a24(1).png

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

 

hayamiz.com-~haya-blog-wp-content-themes-twentyeleven-style.css.png

違いを挙げます。

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;
}

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

★WordPressテーマTwenty Elevenの見出し(hタグ)スタイルを修正します! - oki2a24(2).png

以上です!!!!!


スポンサードリンク

“WordPressテーマTwenty Elevenの見出し(hタグ)スタイルを修正します!” への8件の返信

コメントを残す