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

      2016/03/21

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

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

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

 

Sponsored Links

 

この見出し変更は、下記の記事を参考にさせて頂きました。

わかりやすく書かれていたので、僕でもすんなりできました。 

見出しのデザインをCSS(スタイルシート)で変更する方法 | WPナビ

 

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属性を指定した場合 、下記のような見出しに変更できます

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

<h1>見出し(h1)</h1>

Img twentyfourteen midashi 3

 

 

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

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

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

<h1 class="midasi01">見出し(h1)class⇒midasi01</h1> 

Img twentyfourteen midashi 4

 

 

「midasi02」を指定した場合。

<h1 class="midasi02">見出し(h1)class⇒midasi02</h1>

Img twentyfourteen midashi 5

 

 

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

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

 

 

Sponsored Links

 - TwentyFourteen
 -