追加CSSを編集したら、サイト全体のデザインが変わってしまったよ【一部分だけデザインを変えたい】

2022-02-20

というわけで今回はサイトのデザインについてです。

恥ずかしならプログラマーを自称しておきながら、フロントエンド(※Webとか云々)に関しては初心者でして、ずっと見ないフリをしてきました。

そろそろ流石にデザインを触らないダメだろうということで、やっと重い腰をあげました。

まあWordPressさんはできる子なので追加CSSに好きなデザインのコードをコピペするだけで完成します。

h2 {
	/* 中身略 */
}

というわけでh2タグにデザインを入れてみました。

記事ページのh2タグを使っている箇所
管理人代理
管理人代理

上手く反映されました!

ところがどっこい

追加CSSってサイト全体の同名のタグのデザインを変えてしまうんです。

その結果どうなるかというと……。

カテゴリページのh2タグを使っている箇所
管理人代理
管理人代理

ぎゃー!カテゴリページまで……。

上司
上司

綺麗に全部の段落タグのデザインが変わったね

管理人代理
管理人代理

こんなつもりじゃ……。

そうなんです、ちょっと想定していなかった範囲までh2見出しタグが使われていたので記事ページ以外のあんなものやこんなものまでデザインが変わってしまう事態に……。

さあ、クラスを指定だ!

CSSはこんなこともあろうかと、段落タグに加えて、クラスも指定できるようになっています。

h2.archive__title {
	/* 中身略 */
}

こちらのコードだとh2見出しを使っていてかつ、クラス名が「archive__title」となっているクラスにのみ設定が反映されます。

こんな感じの表記でクラスを指定すれば問題ないです!

さあ、記事ページのクラスを調べてみましょう!

管理人代理
管理人代理

ブラウザ上で「ctrl+U」キーを押すとページのソースコードが見れますよ。

こちらが当サイトの記事ページのh2タグです!

<h2 id="メモリリークとは何ぞや">メモリリークとは何ぞや</h2>
上司
上司

idしか書いてないね。
もしかして、クラス指定してないんじゃ……。

管理人代理
管理人代理

ご明察!

ちなみに、もしクラス指定されているのであれば、以下のような表記になります。

<h1 class="singular-header__title entry-title">行追加のInsertメソッドがひたすらに遅くなっていく件について[VBA]</h1>

当サイトは本文中の見出しタグではクラスが指定されないテーマを使用しております。
idは目次の移動先判別用に付いているものなので、もちろん記事内で同じ値が使われることはありません。

さてどうするか

この場合、何ができるか考えてみましょう。

  • 諦める
  • 本文の見出しタグにクラスがつくようにテーマのソースコードを改変する
  • 「HTMLとして編集」機能を使用して見出しタグに1個1個クラス名を追加していく
  • データベースの記事のデータを直接修正してクラス名を追加していく
  • 記事ページだけ特別なCSSファイルを読み込むようにする
  • CSSを工夫する
上司
上司

「諦める」と「CSSを工夫する」以外の選択肢は実現可能なの?

管理人代理
管理人代理

ま、まあ私ほどのプログラミングレベルになると可能……ですかね……。
もしくは時間をかければ……。

手間もリスクも高くてメリットがないので、「CSSを工夫する」以外の選択肢は却下です。

指定のクラスではCSSを反映されないようにする

特定クラスを除外する方法

管理人代理
管理人代理

「CSSを工夫する」といっても何ができるのやら。

上司
上司

CSSにはこんな表記方法があるよ。

h2:not(.archive__title) {
	/* 中身略 */
}

これ、何をする表記かというと……

特定のクラスの除外」です!

この場合はh2でかつ、カテゴリページのタイトルのクラス名である「archive__title」だった場合、CSSを反映させない、という意味になります。
それ以外のh2見出しにはそのままデザインが反映されます。

除外したいものにクラス名が付いている場合にできる荒業です。

親のクラスを指定する方法

上司
上司

他にはこんな表記方法も使えるよ。

.entry-content h2 {
	/* 中身略 */
}

こちらは記事の本文全体のクラス名(つまり、記事ページのh2タグの親となるクラス名)を指定する方法です。

このこの場合は記事全体を囲っている「entry-content」クラス内のh2にCSSを反映させる、という意味になります。

こちらの方が正統派なCSSの書き方ではあります。
ただ、テーマによってはコードがぐちゃぐちゃで何のクラスで囲まれているかわからなかったり、結局そのクラスも記事のみ使われているものなのかどうかの調査が大変だったりします。

管理人代理
管理人代理

このサイトの場合は他のプラグインのクラスがたくさんあって判別が大変でした……。

上司
上司

目的やスキルに合わせてCSSの書き方を変えよう!

下記のサイトでは入力したHTMLを整形してくれます。
入れ子になったクラスがどこまで続いているのか判別するのに大変役立ちました。

https://lab.syncer.jp/Tool/HTML-PrettyPrint/

CSSに今回のコードを反映させてみましょう

記事ページのh2タグを使っている箇所
カテゴリページのh2タグを使っている箇所
管理人代理
管理人代理

最初に狙っていた部分だけCSSが反映されました!

同じような状態になって困っている人は全部の記事にクラスを記載したりする前にこの方法を試してみてほしいです!!!本当に。

もっと本気でサイトをデザインしたいなら

こちらの本がおススメです!

公式サイトには書籍の中のコードを使用した素敵なサンプルも載っているのでぜひ確認してみてください。

管理人代理
管理人代理

いつか私もこんなヌルヌル動くサイトを作ってみせます!

上司
上司

いつになることやら……。