見出しのデザインをCSS(スタイルシート)で変更する方法ブログ運営ヒントTweetWordPressのインストール時のテーマで見出しタグを使うと、装飾のないシンプルな見出しが表示されます。ブログによってはシンプルなデザインのほうが見やすくて重宝するのですが、もう少し目立たせたい場合やインパクトを与えたい場合はスタイルシート(CSS)に記述することでデザインを変更することができます。Twelve」では普通に見出しタグを使う(ここではh2タグを使ってます)と以下のように表示されます。スタイルシート(CSS)を使えば以下のように、見出しのデザインと華やかにすることができます。見出しのデザインを変更するには、各テーマのCSSファイル(style.css等)を編集します。h2~h6タグに直接指定するとテーマによって色々と面倒なので、ここではclass属性を使って指定してあげます。/*背景に使用する画像のURL*/}color見出しの文字色を指定します。文字色を変更しないのであれば指定する必要はありません。background見出しの背景色をカラーコードで指定します。背景色を変更しないのであれば指定する必要はありません。border(top,right,left,bottom)「px」で線の太さを指定します。線の種類は「solid(実線)」「double(2重線)」「dotted(点線)」「dashed(破線)」など数種類の線が使用できます。線の色をカラーコードで指定します。padding上下左右の間隔を指定します。値を1つだけ記述した場合は「上下左右」の間隔を指定します。値を2つ記述した場合は「上下」「左右」の間隔を指定します。順に間隔を指定します。順に間隔を指定します。background-image背景に画像を使用したい場合は画像のURLを記述します。画像を使わないのであれば指定する必要はありません。見出しデザインのサンプルコードサンプルCSSその1この部分は見出しです。このように表示されます。.8em}サンプルCSSその2この部分は見出しです。このように表示されます。}サンプルCSSその3この部分は見出しです。このように表示されます。}サンプルCSSその4この部分は見出しです。このように表示されます。}サンプルCSSその5この部分は見出しです。このように表示されます。編集したCSSを記事に反映させるには、WordPressの投稿時にテキストエディタで以下のような感じで記述します。※「class」はCSSで編集したと同じものを指定してください。class="midasi01">見出しタグに、cssで編集したclass属性を指定してあげます。</h3>また、見出しに使わなくても「class」を指定してあげれば反映されます。class="midasi01">「hタグ」を使用しない場合は、「div」で指定してあげます。</div>以上で見出しデザインの変更は終わりです。他にも組み合わせによって様々なバリエーションで表現できるので、自分のブログに合った見出しスタイルを探してみてください。Tweet関連記事Googleアカウントを新規で作成する方法ブログを日記で終わらせないために。views見出しタグ(h1~h6)の正しい使い方。viewsページ上部へ戻る『WPナビ』について当ブログでは初心者の方でもワードプレスで個人ブログが作れるように、ワードプレスをインストールするまでの手順、初期設定と記事の書き方、ブログの運営に便利なプラグインなどを紹介しています。ワードプレスを利用する方は難しいと感じることもあるかもしれませんが、慣れてしまえばカスタマイズ性に優れた使いやすいツールです。これから自分のブログを作ってみようかなと思っている方は、是非ワードプレスを使ったブログにチャレンジしてみてください。WordPressの使い方。WPナビページ上部へ戻る。