というわけで今回はサイトのデザインについてです。
恥ずかしならプログラマーを自称しておきながら、フロントエンド(※Webとか云々)に関しては初心者でして、ずっと見ないフリをしてきました。
そろそろ流石にデザインを触らないダメだろうということで、やっと重い腰をあげました。
まあWordPressさんはできる子なので追加CSSに好きなデザインのコードをコピペするだけで完成します。
h2 {
/* 中身略 */
}というわけでh2タグにデザインを入れてみました。
上手く反映されました！
ところがどっこい
追加CSSってサイト全体の同名のタグのデザインを変えてしまうんです。
その結果どうなるかというと……。
ぎゃー！カテゴリページまで……。
綺麗に全部の段落タグのデザインが変わったね
こんなつもりじゃ……。
そうなんです、ちょっと想定していなかった範囲まで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を整形してくれます。
入れ子になったクラスがどこまで続いているのか判別するのに大変役立ちました。
CSSに今回のコードを反映させてみましょう
最初に狙っていた部分だけCSSが反映されました！
同じような状態になって困っている人は全部の記事にクラスを記載したりする前にこの方法を試してみてほしいです！！！本当に。
もっと本気でサイトをデザインしたいなら
こちらの本がおススメです！
公式サイトには書籍の中のコードを使用した素敵なサンプルも載っているのでぜひ確認してみてください。
いつか私もこんなヌルヌル動くサイトを作ってみせます！
いつになることやら……。