WordPress見出しの使い方

スポンサーリンク
Pocket

 

見出し部分のカスタマイズで記事の見た目や印象もかなり違ってきますので色々なサンプルを作ってみます。また、この装飾は記事タイトルやサイドバーのタイトル等にも応用できます。

見出しの使い方

記事を作成する時に記事タイトルを決めます。次にそのタイトルで記事を書くのですが、その記事中にさらに見出しを設定する事ができます。

これは見出しタグ「h1」から「h6」を使って「大見出し」「小見出し」まで細かく見出しを使う事ができます。記事作成中に見出しを入れたい部分でこのように記述します(テキスト入力)。

1
<h2>見出しのタイトル</h2>

テーマの記事タイトルが「h1」になってますので、記事内の見出しは「h2」から使います。WordPressでは選ぶテーマによって記事タイトルが「h1」のテーマがほとんどですが、時々「h2」になっているテーマもありますので確認して下さい。

※確認の仕方は自分のブログを表示して記事タイトル部分にカーソルを合わせて「右クリック」⇒「要素を検証」をクリックすると記事タイトルの要素が見れます。

記事タイトルが「h1」となっている場合には記事中の見出しは「h2」や「h3」「h4」などを使っていく事になります。

記事内の見出しタグは「h2」以下を使って行きます。「h2」以下は何度も使ってもOKです。

見出しの装飾の方法

基本的に装飾はWordPressの「外観」⇒「テーマの編集」⇒「スタイルシート(CSS)」に変更する記述を書きます。

また、スタイルシートに関しては下に書いてあるコードが優先的に反映されますので、重複する記述をしても下に書いたコードが反映されます

記述をする場合にはスタイルシートの一番下にコードを追加します。

次の4つで見出しの装飾が可能ですので装飾をする前に下記4つを覚えます。

  • 「border-top」上に線を入れる。
  • 「border-bottom」下に線を入れる。
  • 「border-left」左側に線を入れる。
  • 「border-right」右側に線を入れる。

実際の書き方としてはスタイルシートに書きますが、サンプルとして例えば次のコードの組み合わせで色々できます。

1
2
3
4
5
.entry-content h2 {
border-top:1px solid #000000
border-right:1px solid #000000
border-left:1px solid #000000
border-bottom:1px solid #000000;}

それぞれ「px」の部分が線の太さ、「#」の部分でカラーを指定します。

この2つの要素を変更する事で色々な装飾がでます。次に見出しタイトルの位置を調整します。子テーマのスタイルシート(style.css) の一番下にこの記述を追加します。

1
2
3
4
5
6
7
/* 見出しh2 */
.entry-content h2 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}
  • 「border-left」で5pxの太さの線を左にして色指定。
  • 「padding」で見出し内の文字の余白調整「上、右、下、左」の順番。
  • 「line-height」で見出し部分の高さを指定。
  • 「font-size」で文字の大きさを調整。
  • 「background-color」で背景色を指定。

これで下図の「h2」の見出しができます。

これは「h2」の装飾ですが、「h2」の部分を「h3」に書き換えると「h3」の装飾になります。ブログのタイトル、サイドバーのタイトルでも応用ができます。

  • サイトタイトルに使う場合は.site-header h1 に追加。
  • 記事タイトルに使う場合は.entry-header .entry-titleに追加。
  • サイドバータイトルに使う場合は.widget-area .widget h3に追加。

それから見出しのタイトルが元々左はしにくるようになってますので、「padding」で見出しのタイトルの位置を調整します。

「padding」の部分に数字を入れる事で「上、右、下、左」の余白、つまり間隔を空けることができます。

左から15px余白を指定すれば、見出しタイトルが右に15px移動します。「padding」は時計周りに余白を決めますので、「上、右、下、左」の順番になっています。

「border-top」「border-right」「border-left」「border-bottom」の4つを上手く使って線の太さやカラーを装飾して下さい。

「solid」の部分を「dotted」に変更すると「実線」ではなく「点線」で表示する事ができます。

見出しやタイトルの背景に画像を使う場合

見出しやタイトルの背景に画像を入れるには、画像をアップロードして画像の編集画面の右側に表示されている画像のURLをメモします。

画像ファイルのURLを子テーマのスタイルシート(style.css) に次のように記述します。

1
2
3
4
5
6
7
/* 見出し背景画像 */
.entry-content h2 {
background-image:url(http://画像URL);
background-repeat: repeat;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;}
  • 「background-image」で背景に画像を指定
  • 「background-repeat」で画像を繰り返しで表示
  • 「padding」で見出しのタイトルの左に余白(右にずらす)
  • 「line-height」で見出しの高さを指定
  • 「font-size」で文字の大きさを指定

とこのようにする事で見出し部分の背景に画像を入れる事ができます。

それから見出し部分の左にワンポイントで画像を使うことも出来ます。

このように小さめの画像を見出しの左に設置する事もできます。この場合は子テーマのスタイルシートにこのように記述します。

1
2
3
4
5
6
7
8
.entry-content h2 {
background-image: url(http://画像URL);
background-repeat: no-repeat;
background-position: left center;
padding: 0 0 0 40px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}
  • 「background-image」見出しに画像を設置
  • 「background-repeat」繰り返しは無し
  • 「background-position」ポジションは左の中央
  • 「padding」左に40pxの余白(画像の幅が32pxだったので)
  • 「line-height」高さを指定
  • 「font-size」文字の大きさを指定
  • 「background-color」さらに背景色を付けたい場合に記述

このように設置する画像のURLと場所を指定して、「padding」で見出しタイトルの位置調整をします。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください