ちょっと前までは「デザインなんて内容が充実していれば何でもいい！！」なんて勝手に思っていましたが、ちょっとカスタマイズできるようになってくると・・・「やっぱり見た目だな！！」と意識がすっかり変わってきました。
このサイトもずっとカスタマイズほぼなしで運営していました。でも思うようになってくるとこれが実に楽しくて、何時間があっという間に過ぎて行きますね。
今回はCSSデザイン初心者の私が、「ここのデザインは変更できないだろう・・・」なんて挫折しかけたところを解決に導いた、「無敵のdivタグ様」について紹介します。CSSカスタマイズ慣れてしている方には全く参考にならない情報ですから同じところで躓いた初心者の方だけ見ていただければと思います。
頭を悩ませるプラグインで表示するコンテンツのCSS
WordPressでテーマのカスタマイズを行っている上で問題になるのがプラグイン独自に設定されているCSSの変更。これで悩む方は多いと思います。
私も初心者ですから何をどう変更してもできない・・・なんてあきらめかけていました。
プラグインを使ってショートコードなどでコンテンツへ挿入する場合、どこのデザインデータが適用されるかは大きく分けて
- テーマのCSSに合わせて表示されるもの
- プラグイン独自にCSSファイルを持っていて、それが適用されるもの
- プラグイン独自のCSSとプラグインが用意したカスタムCSS記入欄へ入力したものが適用されるもの
の３つがあります。１の部分はテーマのCSSがそのまま使われますから何もしなくてもいいのですが、それはメジャーなタグに対するものだけ（例えば見出しに使うhタグなどに限られる）なので、殆どが２か３かということになりますね。
でもここで問題が・・・その他の要素はどう変更したらいいのか？？という問題。特に当サイトのように背景の色を変更する場合にカスタマイズできないとそこだけ白背景になってしまったりして格好悪いですね？仕方なく背景白で・・となりそうです。そこを簡単にカスタマイズできる方法があるんですね。
divタグを有効に活用してCSSの問題を解決する
プラグインでも３のようにカスタムCSSが書けるようになっているものが多くなってきましたが、結局元のCSSが分からないと変更が効かないという欠点もあると思いますので今回は３のカスタムCSSは無視して、２に対して変更する方法を紹介します。
htmlタグとして「まとまり」を表現するタグにdivがあります。このタグは位置を指定したり、ページ内リンクのターゲットにしたりと使う機会が多いタグなのですが、実はこのタグを使って「CSSはこれを使ってね！」と指定することもできるのです。
書き方は簡単
<div class=”ここにCSSで使う名前を入力”>CSSを適用して表示するショートコードやPHP文、文章など</div>
- ここにCSSで使う名前を入力
- CSSを適用して表示するショートコードやPHP文、文章など
ここはいわば何でもOKです。自分で分かりやすい文字列にします（－ハイフンも使えます）
※他で既に設定されている文字列になるとどちらか後に書かれた方が優先されてしまいますから、「自分の名前-プラグインの名前」みたいにするといいかと思います。
ここにそのCSSを適用する内容を記述します
これを使ってCSSの編集をしていきましょう。ざっくりした手順は下の通り
- 何でもいいのでウィジェットや本文に挿入したショートコードなどをこのタグで囲んで保存しておきましょう（これをしただけでは何も変化はありません）。
- プラグイン独自のCSSを特定してテーマのCSSへコピーしましょう
- コピーしたCSSの名前を変更する
- CSSの追記や変更を行う
これは開発者ツール（Google ChromeならF12キーを押して適用されているCSSを見たいところで右クリック→検証）で特定するか、プラグイン編集から「〇〇.css」のようなデザインが書かれたファイルの中を見て特定するかのいずれかになります。
開発者ツールの場合は通常の「.○○」というセレクタの代わりに「div.○○」と表示されるので区別できます。「div.○○」がプラグイン独自のCSSです。
確実にカスタマイズした適用内容が適用されるように「div.○○～}（CSSの閉じ子）」までをコピーしてテーマのCSSへ貼りつけます
ここで登場するのが先ほどつけた<div class=”ここにCSSで使う名前を入力”>。コピーしたCSSの先頭にある「div.○○」の部分を「.ここにCSSで使う名前を入力」に置き換えます。
これで準備完了！
コピーを元に色や線の変更をしたり、CSSを追記したりしましょう。終わったら保存してくださいね。
・・・そしてページをリロードしてみると・・・・「おお～～～できてるじゃん！！！」。カスタマイズ成功です！！
変更が適用されないときは
カスタマイズしたはずのCSSが反映されない要因は
- <div class=”ここにCSSで使う名前を入力”>の名前とCSSの「.ここにCSSで使う名前を入力」が違う
- CSSコードが間違っている
- ブラウザのキャッシュが効いている
のいずれかです。１と２はチェックするしかないですから割愛します。
３の場合はインターネットブラウザが表示速度を速めるために一定時間開いたページを保存する便利で不便な機能ですから、先ほど出てきた開発者ツールを活用することで解決できます。Google Chromeの場合は
- F12キーを押して開発者ツールを起動する
- リロード（再読み込み）ボタンを右クリックし「キャッシュを消去してハード再読み込み」をクリックする
これでキャッシュがクリアされ、すべての情報が再読み込みされます。
※普通にCSSをカスタマイズしていて変更されないトラブルもこれで大抵解決できます。
どうですか？解決できましたか？これで本当に自由にサイトのデザインが変更できるようになりますね！
以上、初心者にとって悩みどころであるプラグインの表示するコンテンツに独自のCSSを適用する方法でした。
