WordPress見出しの使い方とカスタマイズ

今回はWordPressの見出し部分の装飾を紹介していきます。この見出し部分のカスタマイズで記事の見た目や印象もかなり違ってきますので色々なサンプルを作ってみましょう。

また、この装飾は記事タイトルやサイドバーのタイトル等にも応用できます。カスタマイズの前にまずは基本的な見出しの説明をしておきます。

スポンサーリンク

見出しの使い方

記事を作成する時に記事タイトルを決めますよね、そのタイトルで記事を書く訳ですが、その記事中にさらに見出しを設定する事ができます。私の場合はこの部分です。

見出し-1

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

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

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

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

タイトル検証

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

先ほど書いたようにTwentyTwelveの記事タイトルは「h1」で設定されてますので、記事内の見出しタグは「h2」以下を使って行きます。この場合は「h2」以下は何度も使ってもOKですので、私は「h2」と「h3」だけ多用してます。

見出しの装飾の方法

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

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

なので、記述をする場合にはスタイルシートの一番下にコードを追加してみてください。

見出しの装飾方法は覚えると非常に簡単です。次の4つで見出しの装飾が可能ですので装飾をする前に下記4つを把握しておきましょう。

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

実際の書き方としてはスタイルシートに書きますが、サンプルとして次のコードの組み合わせで色々できます(まだ追加しない)。

.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つの要素を変更する事で色々な装飾が自分できるようになります。後は見出しタイトルの位置を調整するという流れになります。実際に私の場合の見出しを例に解説してみます。

私のブログで使っている見出しの装飾は見出しの左側の線だけ使ってますので、「border-left」だけを使ってます。子テーマのスタイルシート(style.css) の一番下にこの記述を追加します(下に書いたものが優先的に反映されるので)。

/* 見出し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」の見出しがこのようになります。

見出し-1

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

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

それから見出しのタイトルが元々左はしにくるようになってますので、「padding」で見出しのタイトルの位置を調整します。「padding」の部分に数字を入れる事で「上、右、下、左」の余白、つまり間隔を空けることができます。

今回の場合は左から15px余白を指定したので、見出しタイトルが右に15px移動します。「padding」は時計周りに余白を決めますので、「上、右、下、左」の順番になっている事だけ覚えておきましょう。それと変更する場合は「px」を書き忘れない事。

私のサンプルのように左側だけに線を入れる事もできますし、上下に線を配置することもできます。

先ほど紹介した「border-top」「border-right」「border-left」「border-bottom」の4つを上手く使って線の太さやカラーを装飾してみて下さいね。それから「solid」の部分を「dotted」に変更すると「実線」ではなく「点線」で表示する事も可能です。

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

見出しやタイトルの背景に画像を使いたい方は前もって画像をアップロードして画像の編集画面の右側に表示されている画像のURLをメモ帳などに貼り付けて用意しておいて下さい。

見出し-2

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

/* 見出し背景画像 */
.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」で文字の大きさを指定

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

見出し-4

それから見出し部分の左にワンポイントで画像を使う方法もあります。

見出し-5

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

.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」で見出しタイトルの位置調整をする事ができます。必要であれば背景色も変更してカスタマイズしてみて下さいね。以上で見出し部分のカスタマイズは終了です。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

WordPress見出しの使い方とカスタマイズ”に34件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    いっしー様

    コメントとURLもありがとうございます。早速見てみたのですが、文字と文字の間というよりも余白コードが反映されていないみたいなので、まずはそれを反映させてみるのが良いと思います。多分圧迫感もなくなると思います。

    で、記述ミスがあるんですが、いっしー様のCSSで以下のような記述があります。

    h2{ color:#fff;background:#0033ff;font-size:21px;line-height:100%;padding:10 10 10 10px;}

    見出し(h2)の装飾なんですが、padding:10px 10px 10px 10px;のようにここの数値には「px」を付ける必要があります。これが効いてないため、ちょっと圧迫感のある感じになっているのではないかなと思います。なのでまずはこの部分直してみて下さい。

  2. いっしー

    しげぞうさん。
    スタイルシートで見出しの装飾を施しているのですが、どうしても見出しの文字と文字の間を開けることが出来ずに圧迫感を感じるデザインになります。
    ちなみにブログのURLです。

    色と背景と文字のサイズは出来たのですが間隔を開けるのが出来ないです。
    よろしくお願いします!

  3. シズ

    しげぞう様

    すごいです!! 下記のコードをCSSに追加すると高さが変わりました!
    すっごく助かりました。本当に感謝です。ありがとうございます。

    やっぱりコーディングの知識があるのとないのとではサイト運営に大きな差が出るので、これから少しずつでも勉強していこうと思いました。

    WordPressへ移行して最初の記事に早速しげぞうさんのこのブログのことを書かせてもらいました。(以前はシーサーブログを使用していましたが、その頃からこちらのサイトにはお世話になっています。)

  4. しげぞう 投稿作成者

    シズ様

    返信ありがとうございます。えっと、多分原因は親テーマで見出しに高さ(height)が単位で設定されているためだと思いますので、子テーマのスタイルシート(CSS)に下記を追加してみて下さい。

    .entry-content h2 {
        height: auto !important;
    }

    これを追加して保存。スマホでブログを開いて一度リロード(再読込み)してから確認してみて下さい。もし上手く行かない場合には再度コメント下さいね!

  5. シズ

    しげぞう様

    早速の返信ありがとうございます。
    URLは

    です。よろしくお願い致します。

  6. しげぞう 投稿作成者

    シズ様

    コメントありがとうございます。見出しの左の線が短い感じかなと思うのですが、実際に見て原因をチェックしたいのでもし良かったらサイトのURL教えてもらえると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

  7. シズ

    こんにちは。ブログカスタマイズにはいつもこちらのサイトにお世話になっています。

    今回記事にある通り見出しの装飾をしてブログにも反映できたのですが、見出しの高さについて変えられずに困っています。

    見出しはしげぞうさんと同じく左側だけの線にしたのですが、その線の高さをもっと伸ばしたいのですが、height部分の数字を変更しても何も変わりません。

    お忙しいところすみませんが、ご教示いただけませんでしょうか。

    スマホで見たときに見出しが2行になった場合、左側の線が足りずに不細工になってしまてちます(泣)

  8. しげぞう 投稿作成者

    yuimama様

    返信がすごく遅くなってすみません!今確認してみたらすでにCSSもうまく機能しているようですが、もし何か出来ていない部分や反映されていない部分があれば再度コメントいただけたらありがたいです。どうぞよろしくお願いいたします。

  9. yuimama

    しげぞう様

    はじめまして。
    ブログに見出しをつけたくて、こちらのブログにたどり着きました。

    しげぞう様の下記の部分をコピーして、スタイルシートの一番下に貼り付けしましたが、記事に書いてもうまく反映されませんでした。
    文字のサイズだけ反映されて大きくなりましたが、他は反映されませんでした。
    また、しげぞう様のブログのような見出しのところの四角い枠はなしに左側の線だけあるようにしたいのですが、どのようにしたらよいでしょうか?
    当方のブログは下記になります。

    ご教授いただけないでしょうか。よろしくお願い致します。

  10. しげぞう 投稿作成者

    チキン様

    返信ありがとうございます。それ私もよくやります(笑)反映されてよかったです。また不具合や分からない事があればいつでもコメント下さい。今後ともどうぞよろしくお願いします。

  11. チキン

    h2タグの記述をよく見て見ると『.entry-content』の『.』の部分が抜けていたので追加した所うまく記述内だけに反映されました!
    初歩的なミスでお時間をとらせてしまい申し訳ないです!
    今、コチラのサイトを拝見させて頂きながらTwentyTwentyのテーマをカスタマイズ中なので、またどこかでコメントすると思います。(初心者なので)
    その時はまた宜しくお願い致します。

  12. しげぞう 投稿作成者

    チキン様

    コメントありがとうございます。通常は記事タイトルに「h1」タグで、文章中の見出しは「h2」とか「h3」を使っていくテーマが多いのですが、一部のテーマで記事タイトルに「h2」が使われているテーマがあります。どちらが良いという問題ではないのですが、記事タイトルが「h2」になっている場合は文章中の見出しで「h3」とか「h4」を使っていく必要があります。

    記事タイトルが「h2」になっていれば当然記事タイトルもスタイルが反映されてしまいますので、まずはその部分の確認が必要ですね。要は記事タイトルに「h1」が使われているのか「h2」が使われているのか?これを調べてみて見て下さい。

    もし分からない場合にはブログのURLを教えてもらえると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  13. チキン

    いつも楽しくブログを拝見させて頂いています。
    この度、ブログをカスタマイズする際にコチラのサイトを見てしているのですが、h2タグをスタイルシートに記述した際、記事本文以外にタイトルにも反映されてしまいます。
    何か記述の仕方がおかしいのでしょうか??

  14. しげぞう 投稿作成者

    理子様

    コメントありがとうございます。スタイルシートに記述ができていればブログを表示させて「Ctrl」と「F5」を一緒に押してリロードしてから確認されて下さい。テーマによっては見出しタグ「h2」が記事タイトルで使われているテーマもあるかもしれませんし、反映されないという場合にはお手数ですが、URLを教えて頂けると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  15. 理子

    初めまして。
    ここに書いてある通りに、スタイルシートの一番下に変更を記述しましたが、変化がありません。書いてある通りにしただけなので、何がいけないのか、さっぱりわかりません。

  16. しげぞう 投稿作成者

    見出し変えたい様

    コメントありがとうございます。説明不足すみません。基本的にスタイルシートのコードは下に書いた物が優先的に反映されるので、スタイルシートの一番下にコードを追加していけばOKです。記事にも説明を少し追加しておきました。わざわざコメントありがとうございました。今後もよろしくお願い致します。

  17. 見出し変えたい

    スタイルシートのどこをどう変えるのか、どこに何を追加するのかがわかりませんでした。

  18. しげぞう 投稿作成者

    >北様

    記事タイトル下の点線はスタイルシートでこれを追加すればOKと思います。

    .entry-title {
      border-bottom: 1px dotted #CCC;
    }

    試してみてください。

  19. なにか、おかしくなったら、何が間違ってるかの知識大事ですね。
    すいません。1つ思い浮かびました。しげぞう様の記事タイトルの下部に点線がありますが、どうやるんですか?ないとタイトルって分からないです。簡単であれば教えてくださればと思います。よろしくお願いします。

  20. しげぞう 投稿作成者

    >北様

    返信ありがとうございます。多分どこかで変更してしまったんでしょうね。私もそんな間違いよくやります^^;こちらこそよろしくお願いします。

  21. ありがとうございます。
    Twenty Twelveになってましたか。どこかで変えちゃったんですね。
    そりゃ、反映されませんよね。こんな、初心者ですが、分からないことはまだ山ほどあると思います。今後もよろしくお願いいたします。

  22. しげぞう 投稿作成者

    >北様

    わざわざありがとうございます。パスワードが半角入力になっていたので教えて頂いたパスワードでは開けませんでした^^;一応サイトの大まかなソースを見せて頂いたのですが、これは子テーマではなくTwenty Twelveのテンプレートになってますね。もし子テーマのスタイルシートでカスタマイズしているのであれば反映しないと思います。先に外観⇒テーマで作成した子テーマを有効化し、子テーマの方にカスタマイズコードを入れていけばOKと思います。

  23. ありがとうございます。
    一応、まだ、前のブログからそのまま持ってきて、いろいろテスト中ですが、だいたいこんな感じです。 できるまで、非公開状態です。

  24. しげぞう 投稿作成者

    >北様

    コメントありがとうございます。記事の限定公開はできたと思います。私自身限定公開した事がないのでちょっと詳しくは分からないのですが、記事を公開する時に「公開状態」という部分でパスワードとか選択できたと思います。後はそんな感じのプラグインもあったと記憶してますので、検索したら情報が見つかるかと思います。あまり参考にならずすみません。

  25. しげぞう 投稿作成者

    >北様

    コメントありがとうございます。原因として考えられる事が2つあります。1つはキャッシュが残っている。2つ目はコードの記述ミス。記述ミスはないという事ですが、以前追加したコードの「 } 」が1つ足りなくてそれ以降に書いたコードが反映されないということも考えられます。

    一度ブログを表示させて「F5」をおしてリロード、それで反映出来ない場合には「Ctrl」と「F5」を押してリロードしてみてください。また、ブラウザ自体のキャッシュが中々消えない場合もあるので、一度別のブラウザでの確認をしてみる事をおすすめします。

    どうしてもできないという場合にはURLを教えて頂けると助かります。コメント公開時にはURLは削除しますのでよろしくお願い致します。

  26. 失礼いたします。
    見出しのタイトル でやっても、左に線が出てきません。
    出る時は出るんです。出ないときは何回やっても出ないです。cssでのコードも確認しましたし、あってるはずなんですよね。何が原因でしょうか?はっきりとは分からないとは思いますが、一向にこの先に進めないでいます。

    あと1つ、質問失礼いたします。
    サイドバーのタイトルの背景色(しげぞう様は青)が白のままです。一応、色、その他のカスタマイズは同じくしています。これも、以前までは青で変更されていたんです。なにか、よかったり、よくなかったりと、不具合だらけです。そんなにカスタマイズもしていないし、最初からやり直そうかなとも考えてはいます。困りますねー。(・_・;)

  27. しげぞう 投稿作成者

    >北様

    返信ありがとうございます。Twenty Twelveの場合だとブログの記事タイトル自体には自動的に「h1」というタグが付いています。そのため、記事タイトルではなく、記事の文中で見出しタグを使っていきます。もちろん見出しタグは「h2」から「h6」まで使えますので、それぞれスタイルシートで装飾すればそれぞれ違った装飾も可能です。

  28. >しげぞう様

    ご返答ありがとうございます。
    最初のWordPressなので、最初はこちらのブログ、記事と同じようにしてきました。なので、テーマやカスタマイズもほぼ同じくしてもらっています。すいません。2つ目以降は、自分で決めていこうと思っています。

    テーマはTwentyTwelveです。これは、子テーマのstyle.cssへ、記述して、(ロリポップ ですよね) 記事を書くときに タイトル で書くということでよろしいでしょうか?

  29. しげぞう 投稿作成者

    >北様

    コメントありがとうございます。使われている見出しタグは利用されているテーマでも違いますし、Seesaaでも違う部分があるかと思います。私の場合はTwenty Twelveのテーマで見出しの装飾はこんな感じです。スタイルシートに記述です。

    /* 見出しh2 */
    .entry-content h2 {
    border-left: 5px solid #1F5E73;
    padding: 0 0 0 15px ;
    line-height: 2;
    font-size: 18px;
    background-color: #fff;}

    これは記事本文部分の見出し「h2」の装飾になるので、本文中にこんな感じで見出しタグを入れると反映されているのが分かるかと思います。

    <h2>見出しのテキスト</h2>
  30. すいません。1つ質問があります。
    ホントに初歩的な質問なんですが、テストで簡単に記事を書いてみてるんですが、『見出しの装飾の方法』のところの記述の仕方があまり分かりません。
    しげぞうさんを例にすると『テキストエディタ』で、

    見出しのタイトル と border-left:1px solid #000000; をどう組み合わせて書けば、しげぞうさんのようになりますか?

    seesaaブログから引っ越しする途中で、画像のリンクとか記事の変更の仕方が分からなく断念し、まず、ある程度テストで書いてみてからかな?と思ったので。

  31. Maboroshi

    >しげぞう様

    なるほど。ごく最近の事なんですね。やっぱり、1つ1つ調べて、実際に、ブログやHPを作って慣れていく感じなんですね。タイトル部分から見る方法もいろいろやってみようと思います。なんか、ほぼ分からないまま、いつまでやっていっても、初心者レベルの記事、ブログしかできないですからね。

    分かりました。ありがとうございます。参考にさせていただきます。

  32. しげぞう 投稿作成者

    >Maboroshi様

    コメントありがとうございます。私も昨年までソースコードの事はよく分かっていませんでした。昨年に知り合いからホームページの作成を頼まれ、新しくホームページを1から作ってみました。もちろんいきなり分からない事だらけだったので、調べながら1つ1つ作っていき、ようやく完成させました。それがなかったらCSSもHTMLも初心者レベルで終わっていたかも知れません(笑)。おかげでカスタマイズ系の記事も書けるようになりました。

    さて、基本的な部分ですが、どの場所(要素)にどんな名前(マークアップ)が付いているのかというのは各ブラウザのツールで調べる事ができます。例えばサイトを表示させてタイトル部分にカーソルを合わせ、右クリックで「要素を見る」とか「要素を調べる」という項目が出てくると思いますのでそれをクリックすると場所の名前とか適応されているスタイルを見ることができます。

    ちょっと慣れるのに時間がかかると思いますが、「デベロッパーツール 使い方」とかで検索すると使い方を説明してあるサイトもあるかと思います。

  33. Maboroshi

    いつも、参考にさせていただいております。

    自分もWordPressに引っ越しをしようと、この記事あたりまで来ましたが、
    ソースコード? の事がほとんど分かりません。どのブログでもありましたが、今まで、8割分からないままだったので、基本的な事でいいので、教えてもらえたらと思います。
    ・しげぞう様は、どうやって、『ここがタイトル部分』とか『ここを変えたらこう変わるな』とか覚えましたでしょうか?もう、実際にブログ作成していって覚えた感じですか?
    今後も参考にさせていただきます。よろしくお願いします。