WordPressのカスタマイズをしていると、ある特定のページの一部のデザインだけを変えたいということがあります。
今回はCSSだけで変える方法の紹介です。
目次
特定のページのみのデザインを変えるには
WordPressであるページのデザインを大幅に変えたい場合、そのページ独自のテンプレート（phpファイル）を作り、それを読み込ませるのが基本です。
さらにそのページの中の一部分だけをテンプレート化し読み込ませるようにすれば、メンテナンスも楽で他のページでも使い回すことができます。
僕自身、
- トップページ
- プロフィールページ
- 著者（「この記事を書いた人」）
- 固定ページ
- 税理士事務所のページ
など、あらゆる部分でテンプレートを個別に作ってカスタマイズし、それぞれ読み込ませています。
ただ、これはWordPressを始めたばかりの方や、ちょっとCSSをいじれるようになったばかりの方に取ってはハードルが高いのも事実です。
「大掛かりなカスタマイズではなく、このページのこの部分だけを少し変えたい」というときもあるでしょう。
今回は、そのような特定のページの一部分だけのデザインをCSSだけで変える方法の紹介です。
特定のページの一部のデザインをCSSだけで変える方法
投稿または固定ページのidを確認
まずは、デザインを変えたい固定ページまたは投稿ページのidを調べます。
ブラウザのデベロッパーツールを起動（ChromeであればF12キー）すると、右の方にコードが沢山書かれた部分がでてきます。
WordPressの固定ページの場合、この中のbodyタグ（<body class=で始まる部分）を見ていくと、「page-id-〇〇」という部分があります。
ここの数字が固定ページのidです。（下の画像では1341）
投稿ページ（記事ページ）の場合は、「postid-〇〇」となっています。
デベロッパーツールを使わない場合、デザインを変えたいページを開いた状態でブラウザ上部の「投稿を編集」または「固定ページを編集」をクリックすると、ブラウザの上の部分にURLが出ます。
ここの数字でもidの確認ができます。（画像では7203）
CSSで指定
ページのidが分かれば、あとは普段通りCSSを書いていくだけです。
書き方は、最初に
- 固定ページの場合→.page-id-〇〇
- 投稿ページの場合→.postid-〇〇
と書き、その後に半角スペースを入れて要素を指定していきます。
実際に書いてみるとこんな感じです。
.page-id-1341 .entry-content figure {
max-width: 100%;
}今回は、「idが1341である固定ページの、本文エリアの画像の最大横幅を100%にする」といった意味のコードを書いています。
僕の場合、プロフィールページの本文内の画像がスマホページで大きくなりすぎてしまい、横揺れが発生していました。
上記のコードを書くことで横幅内に収まるように修正しています。
少しでも参考になれば嬉しいです。
サービスメニュー
Postscript執筆後記
昨日はお客様の中間納税の手続きをしつつ、ブログ執筆。画像も多めの記事だったので時間がかかりました。
今日はプロフィールページに写真をアップロードしようとしたところ、スマホ表示で手こずりだいぶ時間を使ってしまいました。
おかげでブログネタになりましたが。
Something New一日一新
Instagramに今日の一日をアップ＼本を出版しました／
＼セルフマガジン無料送付／
