記事の詳細

WordPressのインストール時のテーマで見出しタグを使うと、装飾のないシンプルな見出しが表示されます。ブログによってはシンプルなデザインのほうが見やすくて重宝するのですが、もう少し目立たせたい場合やインパクトを与えたい場合はスタイルシート(CSS)に記述することでデザインを変更することができます。

例えば、初期テーマ「Twenty Twelve」では普通に見出しタグを使う(ここではh2タグを使ってます)と以下のように表示されます。

スタイルシート(CSS)を使えば以下のように、見出しのデザインと華やかにすることができます。

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

見出しのデザインを変更するには、各テーマのCSSファイル(style.css等)を編集します。h2~h6タグに直接指定するとテーマによって色々と面倒なので、ここではclass属性を使って指定してあげます。

.midasi01{  
     color:#000; /*文字色*/
     background:#fff; /*背景色*/
     border-top:1px solid #ccc; /*上線の太さ、種類、色*/
     border-right:1px solid #ccc; /*右線の太さ、種類、色*/
     border-left:1px solid #ccc; /*左線の太さ、種類、色*/
     border-bottom:1px solid #ccc; /*下線の太さ、種類、色*/
     padding:.8em .9em .8em .9em; /*上下左右の間隔*/
     background-image:url(画像のURL); /*背景に使用する画像のURL*/
}

color

見出しの文字色を指定します。文字色を変更しないのであれば指定する必要はありません。

background

見出しの背景色をカラーコードで指定します。背景色を変更しないのであれば指定する必要はありません。

border(top,right,left,bottom)

「px」で線の太さを指定します。線の種類は「solid(実線)」「double(2重線)」「dotted(点線)」「dashed(破線)」など数種類の線が使用できます。線の色をカラーコードで指定します。

padding

上下左右の間隔を指定します。値を1つだけ記述した場合は「上下左右」の間隔を指定します。値を2つ記述した場合は「上下」「左右」の間隔を指定します。値を3つ記述した場合は「上」「左右」「下」の順に間隔を指定します。値を4つ記述した場合は「上」「右」「下」「左」の順に間隔を指定します。

background-image

背景に画像を使用したい場合は画像のURLを記述します。画像を使わないのであれば指定する必要はありません。

見出しデザインのサンプルコード

サンプルCSSその1

この部分は見出しです。このように表示されます。
.midasi01{
     border-left:7px solid #1E90FF;
     padding:.6em .8em
}

サンプルCSSその2

この部分は見出しです。このように表示されます。
.midasi02{  
     border-top:1px dashed #ccc;
     border-right:1px dashed #ccc; 
     border-left:7px solid #ff1493;   
     border-bottom:1px dashed #ccc;  
     padding:.6em .8em  
}

サンプルCSSその3

この部分は見出しです。このように表示されます。
.midasi03{  
     background:#fff8dc;  
     border-top:1px dotted #ccc;  
     border-right:1px dotted #ccc;  
     border-left:7px solid #ff7f50;  
     border-bottom:1px dotted #ccc;  
     padding:.8em .9em  
}

サンプルCSSその4

この部分は見出しです。このように表示されます。
.midasi04{  
     background:#f8f8ff;  
     border:3px double #555;  
     padding:.8em .9em  
}

サンプルCSSその5

この部分は見出しです。このように表示されます。
.midasi05{  
     border-top:1px dotted #ccc;  
     border-right:1px dotted #ccc;  
     border-left:7px double #2e8b57;  
     border-bottom:1px dotted #ccc;  
     padding:.8em .9em  
}

編集したCSSを記事に反映させる方法

編集したCSSを記事に反映させるには、WordPressの投稿時にテキストエディタで以下のような感じで記述します。※「class」はCSSで編集したと同じものを指定してください。

<h3 class="midasi01">見出しタグに、cssで編集したclass属性を指定してあげます。</h3>

また、見出しに使わなくても「class」を指定してあげれば反映されます。

<div class="midasi01">「hタグ」を使用しない場合は、「div」で指定してあげます。</div>

以上で見出しデザインの変更は終わりです。他にも組み合わせによって様々なバリエーションで表現できるので、自分のブログに合った見出しスタイルを探してみてください。



関連記事

ページ上部へ戻る