WordPressのカスタマイズをしていると、ある特定のページの一部のデザインだけを変えたいということがあります。

今回はCSSだけで変える方法の紹介です。

目次

特定のページのみのデザインを変えるには

WordPressであるページのデザインを大幅に変えたい場合、そのページ独自のテンプレート(phpファイル)を作り、それを読み込ませるのが基本です。

さらにそのページの中の一部分だけをテンプレート化し読み込ませるようにすれば、メンテナンスも楽で他のページでも使い回すことができます。

 

僕自身、

  • トップページ
  • プロフィールページ
  • 著者(「この記事を書いた人」)
  • 固定ページ
  • 税理士事務所のページ

など、あらゆる部分でテンプレートを個別に作ってカスタマイズし、それぞれ読み込ませています。

 

ただ、これはWordPressを始めたばかりの方や、ちょっとCSSをいじれるようになったばかりの方に取ってはハードルが高いのも事実です。

「大掛かりなカスタマイズではなく、このページのこの部分だけを少し変えたい」というときもあるでしょう。

今回は、そのような特定のページの一部分だけのデザインをCSSだけで変える方法の紹介です。

特定のページの一部のデザインをCSSだけで変える方法

投稿または固定ページのidを確認

まずは、デザインを変えたい固定ページまたは投稿ページのidを調べます。

ブラウザのデベロッパーツールを起動(ChromeであればF12キー)すると、右の方にコードが沢山書かれた部分がでてきます。

 

WordPressの固定ページの場合、この中のbodyタグ(<body class=で始まる部分)を見ていくと、「page-id-〇〇」という部分があります。

ここの数字が固定ページのidです。(下の画像では1341)

Chromeのデベロッパーツールで固定ページのidを確認  

 

投稿ページ(記事ページ)の場合は、「postid-〇〇」となっています。

Chromeのデベロッパーツールで投稿ページのidを確認

 

デベロッパーツールを使わない場合、デザインを変えたいページを開いた状態でブラウザ上部の「投稿を編集」または「固定ページを編集」をクリックすると、ブラウザの上の部分にURLが出ます。

ここの数字でもidの確認ができます。(画像では7203)

WordPressの管理画面からページのidを確認

CSSで指定

ページのidが分かれば、あとは普段通りCSSを書いていくだけです。

書き方は、最初に

  • 固定ページの場合→.page-id-〇〇
  • 投稿ページの場合→.postid-〇〇

と書き、その後に半角スペースを入れて要素を指定していきます。

 

実際に書いてみるとこんな感じです。


.page-id-1341 .entry-content figure {
  max-width: 100%;
}

今回は、「idが1341である固定ページの、本文エリアの画像の最大横幅を100%にする」といった意味のコードを書いています。

 

僕の場合、プロフィールページの本文内の画像がスマホページで大きくなりすぎてしまい、横揺れが発生していました。

上記のコードを書くことで横幅内に収まるように修正しています。

 

少しでも参考になれば嬉しいです。

サービスメニュー

Postscript執筆後記

昨日はお客様の中間納税の手続きをしつつ、ブログ執筆。
画像も多めの記事だったので時間がかかりました。

今日はプロフィールページに写真をアップロードしようとしたところ、スマホ表示で手こずりだいぶ時間を使ってしまいました。
おかげでブログネタになりましたが。

Something New一日一新

Instagramに今日の一日をアップ

\本を出版しました/

\セルフマガジン無料送付/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

お金・時間・やりがいなどのバランスを取り人生を楽しむことをサポートする、東京の30代税理士。ひとり社長。
ブログ「FAVPRESSO」は平日毎日更新。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援など。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。
名刺、ロゴ、WordPressテーマ、本の表紙から音楽まで自作する、自称超クリエイティブ。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 『独立して人生を楽しむ方法』