WordPressでブログを始めるに当たって、テーマ（テンプレート）に｢Simplicity2｣を使わせていただきました。 カスタマイズするに当たって勝手が違ってハマってしまった事があったので、その解決方法について書いておきます。 （これからWordPressに挑戦する人の参考になれば。） ※Simplicity2の話なので、基本的に、テーマのインストールまで完了している人向けです。
やってみて、まず第一にハマったのは、｢WordPressの改行問題｣ですが… これは他のブログから引っ越してきた人ならば、既に経験済み、解決しているんじゃないかと思います。 というか、これは｢Simplicity｣の問題ではなく、WordPress側の仕様の問題ですね。 （もし一からスタートと言う人はこちらを確認どうぞ。。。）
次にハマった、最大の面食点(笑) 以前のブログで記事内で使っていたタグの｢スタイル設定｣が効かないのです…Σ(-_-;) 例えば、記事の中で<H>タグ使うと思いますが、H2～4に｢Simplicity｣によってスタイルが既に設定されてしまっている。 他にも、例えばテーブルタグ。テーマの中でスタイル指定されているようで、以前のブログからインポートしてきた記事で、テーブルを使ってる部分のレイアウトが、全部崩れてしまっていました。 過去に他のブログで、記事の中で使っていたタグがあった場合に、それがテーマによって使われてるタグだと、テーマによるスタイル設定が優先されてしまうのです。 じゃぁ設定を個別にしてやればよいはずじゃ…？ しかしやっみると、追記したスタイルが効かないという、謎の現象にハマってしまいまして。。。orz （これ、結構、最初にハマる人、いるんじゃないでしょうかね？）
※タグに直接書く、インラインによる記述方法だと全て効きます。 しかし、旧ブログでは、テンプレートのスタイルシートに｢クラス名｣を記述して使っていたタグがほとんどなわけで。 その記述をそのままSimplicityのスタイルシート部分に記述してもダメ。 いちいち、すべてのタグにスタイルを書き足すのも、記事が多すぎてやってられませんし ※例えばテーブルの<td>タグにすべて style="hogehoge" を書き加えていくというのも、置き換え機能を使ってもちょっと大変ですし、そんなの美しくない。
さて、後から書き加えたスタイルシートが効かないのは何故なのか？ FC2ブログ（で使っていたテンプレート）では、このような問題はほとんど起きませんでした。なぜかというと、スタイル指定の書き方の思想の問題なんじゃないでしょうか。
スポンサーリンク
FC2ブログの場合 ―――― FC2が公式に用意しているテンプレートの一番基本的なやつ＝｢ Basic White ｣というのをベースに改造していましたが ―――― 全ての見出しや領域に固有の名前（ID)が振られていて、設定はすべてそのID指定で行うようになっていたのです。 なので、IDが重ならないようにさえ気をつけていれば、テンプレートによるスタイル指定の影響を受けることはないわけですね。 しかし、Simplicityでは、領域名にIDが振られていて、その中でクラス名が指定されているという書き方になっていますね。 これ自体別に間違ってる書き方ではない、むしろ効率の良い書き方だと思いますが。私が書くのでも多分そうする(笑) 昔、FC2で、全部にIDが振ってあるのが、なんでそんな面倒なことしてるんだろう？と思ってたのですが、通常のタグに影響を与えないためだったのだと、今更気づきました…(^^;)
Simplicityでは、例えば、記事の書かれている領域に｢ #main ｣という ID が付けられていて、その｢ #main ｣の中にある H2 タグはこう、というような記述の仕方になっているわけです。 しかし、つまり… 同じ｢ #main ｣領域の中で｢ H2 ｣タグを使ってしまうと、その設定の影響を受けてしまうわけですね。 では｢ H2 ｣にクラス名を指定してやればいいんじゃないの？と思いますが、それでは効かない、というところでハマりました。。。
色々試行錯誤して、｢ class ｣ではなく｢ ID ｣をつけてやると効く（場合がある）というのは分かりましたが、それでもどうしても効かないものもあったり。 調べる前に色々試してしまうのが悪い癖ですが(笑) 行き詰まってようやっと、スタイルシートのルールについて改めて検索してみたところ… https://bibabosi-rizumu.com/css-priority/
【スタイルシートの｢ id ｣｢ class ｣｢ type ｣には優先順位がある】
恥ずかしながら、これ、ちゃんと理解していませんでした… 説明されてみれば、確かにそういう動作になっていますね。。。
詳しくは、上記他いろいろなサイトで解説されていますが、ざっくり結論だけ言うと、スタイル指定の優先順位は
- 後に書いたものが優先
- typeセレクタは一番弱い（※無印のタグ指定より、idやclassがついてるほうが優先）
- classよりidのほうが強い
- classやidの数が多いほうが優先
<div id="main">
<h2>TEST</h2>
</div>
ここに、以下のようなスタイルが指定されていたとして
#main h2 { color: red; }
この領域内で
h2.class { color: blue; }
のように指定しても、｢ #main h2 ｣のほうが｢ h2.class ｣より強いので、h2.classの指定が無視されてしまうのです。。。
ずばり、解決方法は簡単 #mainを頭にくっつけて｢ #main h2.class ｣のように指定してやれば効くようになります。 頭に｢ #main ｣が加わったことで、優先度が昇格したわけですね。 しかし、上記の優先順位のルールにあるように、複数のclassやidが重なって指定されていると、多いほうが勝ちますので注意が必要ですね。 ただ、Simplicityでは、ほぼ #main を付け加えてあげれば行けるみたいです(メインカラム内の場合)。 ※Sinplicityの場合、記事本文の領域全体を覆っているのが｢ main ｣という ID のコンテナとなっていますね。
概要図がSimplicityサポートサイトに紹介されていました。 https://wp-simplicity.com/simplicity-structure/ 画像がすぐ見たい方はこちら↓をクリックこの図が後々大変参考になりました、感謝です。（※ただ、Sinmlicity1の頃のものなのでしょうか、クラス名が現在はID名に変わっている部分があったりと、現在のSimplicity2とは若干違っている部分があるようなので、参考までに。）
また、Simplicityの場合は、記事の本文が書かれている領域のidが｢ the-content ｣となっているので、記事の領域だけの中でスタイル指定してやるようにすれば、スタイルを変更してしまった事で全体のレイアウトを崩してしまう可能性がなくなりますね。 なので、Simplisity2のスタイルシート（子テーマのスタイルシートですね）に
#main #the-content hoge { mokemoke: mememe; }
のように記述しておけば、ほぼ、OKという結論になりました。 ｢ the-content ｣だけでも良さそうなものですが、それだと優先順位で負けることがあったので、「 #main 」とダブルで指定することで、優先順位を上げています。 とりあえず、この指定の仕方で｢ table ｣のスタイルを自分のイメージにあうように設定したので、古いブログからインポートしてきた記事の中にあるテーブルのレイアウトは崩れずに表示できるようになりました(^^;) 細かくは個別の記事毎に、おかしくないかチェックしてやる必要がありますが・・・(*_*)
罫線<hr>に関してだけは、上記のように「#main #the-content」を追記してもなぜかうまく行かなかったのですが、サポート掲示板で相談したところ「width:auto;」を付け加えたら、狙い通りの動作をするようになりました。「width:100%;」や「指定なし」ではダメでした。
「width:auto;」と「width:100%;」の違いについては、いまひとつ、理解が足りていないようで・・・
今後の研究課題としておきます・・・o(_ _)o 
コメント