【Twenty Fourteen】h1タグなどの見出しの見た目変更⇒style.css 変更メモ

僕のブログのテーマは「TwentyFourteen」というWordpressのデフォルトテーマを使用しています。

デフォルトテーマそのままでは使っておらず、少し変更を加えています。今回からデフォルトから変更した点を自分用のメモとして残していきます。

ただ、自分はまだまだcssやphpは初心者なので、暖かい目で見て頂けるとありがたいです。

style.cssに見出し用のclass属性を追記します

style.cssの【1.0 Reset】部分の一番下に下記のコードを追記しました。

僕の場合は2種類の見出し用class属性を追記してみました。

.midasi01{
     font-size: 20px; /*文字の大きさ*/
     color:#191970; /*文字色*/
     background:#fff; /*背景色*/
     border-left:1px solid #ccc; /*左線の太さ、種類、色*/
     border-bottom:1px solid #ccc; /*下線の太さ、種類、色*/
     padding:.8em .9em .8em .9em; /*上下左右の間隔*/
     border-left:7px solid #191970; /*左端の装飾の指定*/
}

.midasi02{
     font-size: 18px; /*文字の大きさ*/
     color:#000; /*文字色*/
     background:#fff; /*背景色*/
     border-left:1px solid #ccc; /*左線の太さ、種類、色*/
     border-bottom:1px solid #ccc; /*下線の太さ、種類、色*/
     padding:.8em .9em .8em .9em; /*上下左右の間隔*/
}


/**
 * 2.0 Repeatable Patterns
 * -----------------------------------------------------------------------------

class属性を指定した場合、下記のような見出しに変更できます

下記がデフォルトの状態です。

上で追記したclass属性「midasi01」を指定した場合。

少しフォントが小さくなり、装飾がつき、見出しっぽくなりましたね。

実際に記事を書くときには下記のようにclass属性を指定すると、表示が変わります。

<h1 class="midasi01">見出し（h1）class⇒midasi01</h1>

「midasi02」を指定した場合。

<h1 class="midasi02">見出し（h1）class⇒midasi02</h1>

僕はブログエディタのMarsEditを使っていますが、

MarsEditであれば、こういうclass属性指定もショートカット登録できるので、入力もすごく楽になります。

【Twenty Fourteen】h1タグなどの見出しの見た目変更⇒style.css 変更メモ

style.cssに見出し用のclass属性を追記します

class属性を指定した場合 、下記のような見出しに変更できます

class属性を指定した場合、下記のような見出しに変更できます