WordPressでレイアウトをカスタマイズする際に使いたい「CSSで最初の要素」をコントロールする方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

CSSは書き方次第で細かくhtmlを変更できます。代表的な要素が「:first-child」です。このプロパティを使えば「1行目のみ」で指定した要素の「文字色を変更」などが実現できます。

つまり、最初の「pだけ」といった指定がCSSで行えるプロパティです。ワードプレスではエディターの都合で勝手に空のPタグが挿入されてしまったりして予期しない部分に“空白”が発生することがあります。

また、導入しているプラグインによっては「javascript」で特定のタグが自動挿入されたりするので
状況によっては要素を指定すること自体が難しかったりします。

ちなみに「:first-child」の使い方は下記です。たとえば、以下のhtmlソースがあったとして、

<div class="box">
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>

最初の一行にある「あいうえお」の文字色だけを変更したい場合は下記のCSSでOKです。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -
/*.box内にある最初のp要素のみ「#cccccc」にする場合*/
.box p:first-child {
  color:#cccccc;
}

もし「あいうえお」のみの非表示にしたいなら「display:none;」を指定するので以下です。

/*.box内にある最初のp要素のみ“非表示”にする場合*/
.box p:first-child {
  display:none;
}

すごく便利なプロパティですよね。

ただ、このプロパティにはちょっとした落とし穴があります。それは、以下のように「pタグ」の直前に
別のタグが入ってしまうと「CSSの仕様」で『最初のタグと認識ができず無視』されてしまいます。

<div class="box">
<h1>サンプル</h1>
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>

でも、ソースだけで見ると確かに「あいうえお」は「最初のp」に該当しますが指定ができません。実はCSSでこういったプロパティ側の仕様は意外と多いです。解決策する書き方が「:first-of-type」です。

/*.box内にある最初のp要素のみ「#cccccc」にする場合*/
.box p:first-of-type {
  color:#cccccc;
}

上記のように書けば「pの直前に何が入っても」影響は一切受けません。たとえば下記のように最初のpの前に複数の別タグが入ってもしっかりと指定が可能です。ありがたいプロパティですよね。

<div class="box">
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>

あえて1つだけ注意点を言うとしたら「対応ブラウザ」です。前者の指定方法がIE7以降、後者の指定方法はIE9以降で有効です。ただ、2020年現在の国内利用ブラウザランキングトップ10位にIE8はもう入っていないので今後は「:first-of-type」で書いてまったく問題ありません。

:first-child
IE7〜

▼:first-of-type
IE9〜

最初の要素を指定したかった方はぜひお試しくださいませ。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

- 超快速なワードプレスを運営しませんか?【AD】-

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください