今回はWordPressの見出し部分の使い方やCSSでの装飾を紹介していきます。この見出し部分のカスタマイズで記事の見た目や印象もかなり違ってきますので色々なサンプルを作ってみます。
このサイトでも使っているこんな感じのやつです。
また、この装飾は記事タイトルやサイドバーのタイトル等にも応用できます。カスタマイズの前にまずは基本的な見出しの説明をしておきます。
見出しの使い方
記事を作成する時に記事タイトルを決めますよね、そのタイトルで記事を書く訳ですが、その記事中にさらに見出しを設定する事ができます。
これは見出しタグ「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つで見出しの装飾が可能ですので装飾をする前に下記４つを把握しておきましょう。
- 「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」の部分が線の太さ、「#」の部分でカラーを指定します。この２つの要素を変更する事で色々な装飾が自分できるようになります。後は見出しタイトルの位置を調整するという流れになります。実際に私の場合の見出しを例に解説してみます。
私のブログで使っている見出しの装飾は見出しの左側の線だけ使ってますので、「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;}
※テーマTwenty Twelveの場合のCSSです。
- 「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」は時計周りに余白を決めますので、「上、右、下、左」の順番になっている事だけ覚えておきましょう。それと変更する場合は「px」を書き忘れない事。
私のサンプルのように左側だけに線を入れる事もできますし、上下に線を配置することもできます。
先ほど紹介した「border-top」「border-right」「border-left」「border-bottom」の４つを上手く使って線の太さやカラーを装飾してみて下さいね。それから「solid」の部分を「dotted」に変更すると「実線」ではなく「点線」で表示する事も可能です。
実際によく使っている見出しのサンプルCSS
ついでにこちらの見出しサンプルも。
一応テーマTwenty Twelveの場合です。他のテーマの場合は若干違うかも。
.entry-content h2 {
font-size: 1.25em;
position: relative;
padding:1em 1.1em;
background: #1f5e73;;
color:#fff;
margin: 40px 0;
}
.entry-content h2:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 9px solid transparent;
border-top: 15px solid #1f5e73;
width: 0;
height: 0;
}
見出しやタイトルの背景に画像を使う場合
見出しやタイトルの背景に画像を使いたい方は前もって画像をアップロードして画像の編集画面の右側に表示されている画像のURLをメモ帳などに貼り付けて用意しておいて下さい。
画像ファイルの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」で文字の大きさを指定
とこのようにする事で見出し部分の背景に画像を使う事もできます。
それから見出し部分の左にワンポイントで画像を使う方法もあります。
このように小さめの画像を見出しの左に設置する事もできます。この場合は子テーマのスタイルシートにこのように記述します。
.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」で見出しタイトルの位置調整をする事ができます。必要であれば背景色も変更してカスタマイズしてみて下さいね。以上で見出し部分のカスタマイズは終了です。
コメント
リリ様
見出しですが多分これの事かなと思います。h2見出しです。
.entry-content h2 { font-size: 1.25em; position: relative; padding:1em 1.1em; background: #1f5e73;; color:#fff; margin: 40px 0; } .entry-content h2:after { position: absolute; content: ''; top: 100%; left: 30px; border: 9px solid transparent; border-top: 15px solid #1f5e73; width: 0; height: 0; }しげぞう様
子テーマの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;}
を追加して
手順通りに行ったのですがどうしても表示されません。
お力をお借りしたいです。
はじめまして
このブログの見出しの使い方という部分に使われている見出しを教えていただけますか？
しげぞう様
返信ありがとうございます。
ブラウザのキャッシュを削除したところ、正常に表示されました。
何回も丁寧に教えていただきありがとうございます！
ありばぼ様
別のブラウザで表示されているのであれば問題ないと思います。多分ブラウザのキャッシュとかだと思いますので、しばらく待つかさらに別のブラウザで確認してみて下さい。反映されていれば大丈夫です。
しげぞう様
再びすいません。
見出しの設定をAddQuicktagを使用して行ったところ、safariではきちんと表示されるのですが
GoogleChromeでは設定した見出しが適応されません。
色々調べてh2に対するCSSの優先度が低いのかなと思ったのですが.entry-content h2の.entry-content をどのように変更すれば良いかわかりません。
教えていただけたら嬉しいです。
よろしくお願いします。
いっしー様
コメントと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」を付ける必要があります。これが効いてないため、ちょっと圧迫感のある感じになっているのではないかなと思います。なのでまずはこの部分直してみて下さい。
しげぞうさん。
スタイルシートで見出しの装飾を施しているのですが、どうしても見出しの文字と文字の間を開けることが出来ずに圧迫感を感じるデザインになります。
ちなみにブログのURLです。
色と背景と文字のサイズは出来たのですが間隔を開けるのが出来ないです。
よろしくお願いします！
しげぞう様
すごいです!! 下記のコードをCSSに追加すると高さが変わりました!
すっごく助かりました。本当に感謝です。ありがとうございます。
やっぱりコーディングの知識があるのとないのとではサイト運営に大きな差が出るので、これから少しずつでも勉強していこうと思いました。
WordPressへ移行して最初の記事に早速しげぞうさんのこのブログのことを書かせてもらいました。（以前はシーサーブログを使用していましたが、その頃からこちらのサイトにはお世話になっています。）
シズ様
返信ありがとうございます。えっと、多分原因は親テーマで見出しに高さ（height）が単位で設定されているためだと思いますので、子テーマのスタイルシート（CSS）に下記を追加してみて下さい。
.entry-content h2 { height: auto !important; }これを追加して保存。スマホでブログを開いて一度リロード（再読込み）してから確認してみて下さい。もし上手く行かない場合には再度コメント下さいね！
しげぞう様
早速の返信ありがとうございます。
URLは
です。よろしくお願い致します。
シズ様
コメントありがとうございます。見出しの左の線が短い感じかなと思うのですが、実際に見て原因をチェックしたいのでもし良かったらサイトのURL教えてもらえると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。
こんにちは。ブログカスタマイズにはいつもこちらのサイトにお世話になっています。
今回記事にある通り見出しの装飾をしてブログにも反映できたのですが、見出しの高さについて変えられずに困っています。
見出しはしげぞうさんと同じく左側だけの線にしたのですが、その線の高さをもっと伸ばしたいのですが、height部分の数字を変更しても何も変わりません。
お忙しいところすみませんが、ご教示いただけませんでしょうか。
スマホで見たときに見出しが2行になった場合、左側の線が足りずに不細工になってしまてちます（泣）
yuimama様
返信がすごく遅くなってすみません！今確認してみたらすでにCSSもうまく機能しているようですが、もし何か出来ていない部分や反映されていない部分があれば再度コメントいただけたらありがたいです。どうぞよろしくお願いいたします。
しげぞう様
はじめまして。
ブログに見出しをつけたくて、こちらのブログにたどり着きました。
しげぞう様の下記の部分をコピーして、スタイルシートの一番下に貼り付けしましたが、記事に書いてもうまく反映されませんでした。
文字のサイズだけ反映されて大きくなりましたが、他は反映されませんでした。
また、しげぞう様のブログのような見出しのところの四角い枠はなしに左側の線だけあるようにしたいのですが、どのようにしたらよいでしょうか?
当方のブログは下記になります。
ご教授いただけないでしょうか。よろしくお願い致します。
チキン様
返信ありがとうございます。それ私もよくやります（笑）反映されてよかったです。また不具合や分からない事があればいつでもコメント下さい。今後ともどうぞよろしくお願いします。
h2タグの記述をよく見て見ると『.entry-content』の『.』の部分が抜けていたので追加した所うまく記述内だけに反映されました！
初歩的なミスでお時間をとらせてしまい申し訳ないです！
今、コチラのサイトを拝見させて頂きながらTwentyTwentyのテーマをカスタマイズ中なので、またどこかでコメントすると思います。（初心者なので）
その時はまた宜しくお願い致します。
チキン様
コメントありがとうございます。通常は記事タイトルに「h1」タグで、文章中の見出しは「h2」とか「h3」を使っていくテーマが多いのですが、一部のテーマで記事タイトルに「h2」が使われているテーマがあります。どちらが良いという問題ではないのですが、記事タイトルが「h2」になっている場合は文章中の見出しで「h3」とか「h4」を使っていく必要があります。
記事タイトルが「h2」になっていれば当然記事タイトルもスタイルが反映されてしまいますので、まずはその部分の確認が必要ですね。要は記事タイトルに「h1」が使われているのか「h2」が使われているのか？これを調べてみて見て下さい。
もし分からない場合にはブログのURLを教えてもらえると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。
いつも楽しくブログを拝見させて頂いています。
この度、ブログをカスタマイズする際にコチラのサイトを見てしているのですが、ｈ2タグをスタイルシートに記述した際、記事本文以外にタイトルにも反映されてしまいます。
何か記述の仕方がおかしいのでしょうか？？
理子様
コメントありがとうございます。スタイルシートに記述ができていればブログを表示させて「Ctrl」と「F5」を一緒に押してリロードしてから確認されて下さい。テーマによっては見出しタグ「h2」が記事タイトルで使われているテーマもあるかもしれませんし、反映されないという場合にはお手数ですが、URLを教えて頂けると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。