• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

高度なカスタマイズ

特定のページのみCSSを反映させる方法

特定のページのみCSSを反映させる方法

DigiPressには「オリジナルスタイルシート設定」という機能があり、この機能が提供するテキストエリアに任意のCSSを記述し保存することで、テーマの既定のCSSを直接編集せずに安全に確実にテーマのCSSとして組み込むことができます。

DigiPressのカスタマイズ項目にない箇所のデザイン変更の方法については以下をご覧ください。

オプションにない箇所を好みのスタイルにカスタマイズする

今回のカスタマイズサンプルでは、上記ページのカスタマイズ方法の更に応用編として、特定のページのみ任意のCSSを反映させる方法をご紹介します。

例として、ある固定ページのタイトルのみ、フォントサイズを変更する方法を記載しています。

※Chromeでの作業例です。

1. コンソールを開く

capture 2015-05-07 17.18.22 copy
まずは変更したい要素である固定ページのタイトルにカーソルを合わせて、Chromeの右クリックメニューから「要素を検証」を選択し、コンソールを表示します。

2. 対象要素を確認する

capture 2015-05-07 17.18.45 copy
ここで、対象要素は .single-title というclassが付けられたH1タグで括られていることがわかります。

3. 対象ページの固有IDがあるセレクタを確認する

capture 2015-05-07 17.19.12 copy
DigiPressテーマでは、シングルページごとでbodyタグに固有の投稿IDが付けられたclass(セレクタ)が挿入されます。

この固定ページのみにCSSを適用させるため、そのままコンソールでbodyタグを見つけ、そのclassから投稿IDが付いたセレクタを見つけます。
この固定ページでは .page-id-1328 というclassがこのページの固有のセレクタとなります。

投稿ページの固有セレクタ例

capture 2015-05-07 17.30.18 copy

カテゴリーページのカテゴリーID付きのセレクタ例

capture 2015-05-07 17.30.04 copy

4. ページ固有のセレクタ付きで対象要素のCSSを作成する

capture 2015-05-07 17.19.57 copy
手順2、3から、このページ固有のセレクタをまとめ、任意のCSSを作成します。

この例では、.page-id-1328 h1.single-title がこの固定ページのタイトルのみを対象とするセレクタになります。

5. オリジナルスタイルシート設定に記述、保存

capture 2015-05-07 18.09.57 copy
あとは「オリジナルスタイルシート設定」にこのページ固有のセレクタのCSSを記述し保存すれば完了です。

Return Top