2024年12月22日
Webマーケティング 解析
ワードプレス 投稿ページだけスタイルを変えたい プラグインなし
誰が投稿しても均一のデザインや見た目が担保されるCMS、ワードプレスもその一つで、世界中で使用されるとてもポピュラーなCMSです。
非常に便利なのですが、固定ページやTOPページは変えないで、投稿ページのタイトル（H2、H3、H4など）デザインや余白設定だけを変えたい時ありませんか？CSSが書ける方なら、プラグインなしでデザインを変えることができますよ。
こちらの記事もご覧ください
目次
プラグインなしで、投稿ページだけスタイルを変えたい
弊社の当サイトはワードプレスCMSを使用していて、テーマはLIQUIDです。
機能的には必要最低限のものだけがあり、シンプルな使い心地で良いのですが、情報量の多い投稿ページでは特に読みづらさを感じていました。
- タイトルデザインやキャプションテキストが通常のテキストとあまり変わらなかったり、
- タイトルの上に十分な余白がないため、セクション間と通常の行間の余白が同じで切れ目がはっきりしなかったり、
- 1カラムのブログページで表示幅が広すぎたり…
といった問題が原因でした。
セクションを捉えづらいため、頑張って読まなくてはならない状態でした。
余白に関しては、ワードプレスの使い方に慣れていれば適宜スペーサーパーツを挿入する手もありますが、社内チームなど複数人数でブログを運営する場合は周知が大変です。
そこでCSSで設定の改善を行いました。
TOPページや固定ページのスタイルは変更したくなかったので、投稿ページにだけ一括で効かせるようにCSSを記述するのですが、特にプラグインは必要ありません。その時の事をこちらでお伝えしようと思います。
ポイントは明確なセレクターの指定と、その見つけ方となります。
改善の詳細は、こちらの記事もご覧くださいね。
明確なセレクターとプロパティの指定
CSSを記述するためには、セレクタとプロパティを決める必要があります。
- セレクタ…どのパーツに
- プロパティ…何をするのか
例えば、私の場合やりたいことは以下でした
- 投稿ページのH2の上に余白を追加したい（固定ページには影響させたくない）
ということは…
- セレクタ…どのパーツに→投稿ページのH2に
- プロパティ…何をするのか→上部に余白をつけたい
明確に、「どのパーツを、どのように変えたい」と言語化して考えましょう。
この時、「投稿ページだけに反映させたい」とか、「サイト全体に反映させたい」とか、「TOPページだけに反映させたい」といった具合に条件が付く場合があります。
でも大丈夫。ワードプレスでは投稿ページと固定ページがあり、基本的にはそれぞれにクラス名がついているかと思います。なので、それを使用します。
それでは「投稿ページ」のクラス名を見つけていきましょう。
ワードプレスのクラス名探し 「投稿ページ」と「固定ページ」
クラス名はディベロッパー画面で見つけていきます
「投稿ページ」と「固定ページ」それぞれのクラス名を見つける方法は色々ありますが、<body>タグを確認するとわかることが多いです。
あなたのサイトの投稿ページと固定ページでも<body>タグのクラス名を比較してみてください。
固定ページでは.page 投稿ページでは.single や.single-post、その他よく見かけるのは.type-post などがあります。
これはどのテーマでもわりと同じことが多いです。
| ページ種類 | クラス名 |
|---|---|
| 固定ページ | .page-template-default .page など |
| 投稿ページ | .post-template-default .single .single-post など |
今回は当サイトの投稿ページにだけスタイルを適用させたいので、セレクタとしては以下で十分です。
body.single-post h2これでセレクタは特定できたので、次はプロパティ（何をする）を書いていきます。
プロパティはディベロッパー画面で直打ち検証
それではH2に対して、「上部に余白をつける(margin-top)」というプロパティをつけます。
CSSでは下記のようになりますね。
body.single-post h2{
margin-top: 〇〇px;
}ここでどのくらいの余白をつけたらよいのかわからないので、シュミレーションします。
ディベロッパー画面で目当てのセレクタ（h2）を適当に選び、element styleのところに直接入力してみると、シュミレーションができます。
ここで試して、とりあえずmargin-top: 4.8remという余白幅にしてみました。
その後CSSを記述すればよいでしょう。
記述先はカスタムCSSか、子テーマのCSSファイルに書き込みます
上記と同じように、h3のスタイルを変更しました
こちらもH2にmargin-topをつけたプロセスと同様です。
1. やりたいことを言語化する
- セレクタ…どのパーツに→投稿ページのH3に
- プロパティ…何をするのか→①上部に余白をつける ②タイトルっぽい装飾をつける
2. セレクタを探す
この場合はH3なのでセレクタは以下でOKです
body.single-post h33. プロパティはディベロッパー画面で検証
4. 決まったらCSSコードを記述する
body.single-post h3{
margin-top: 3rem;
padding: 0.5em 0.5em;
border-left: solid 10px #8FACC2;
background-color:#E7F3F7;
font-size: 1.5rem;
}H3タイトル上に余白を入れ、背景色を入れるなどして装飾しました。
これによりH3で始まるセクションのが塊で捉えやすくなりました。
まとめ
CSSを使えることが前提にはなりますが、ページごとにクラス名がついているとわかれば、結構色々できるのではないでしょうか？
ご自身やチームのサイトをカスタマイズして、より良いワードプレスライフを送りましょう！
より複雑なカスタムやサイトリニューアル、その他制作のご相談はハマ企画にご相談ください。