特定のclassセレクタを持つ要素の親要素にスタイルを適用する
言ってること伝わります?(笑)
WordPressだと、function.php にごにょごにょすると、bodyタグのクラスセレクタにページスラッグを追加できたりするので、コンテンツ部分を作ってしまってからでも、各ページの特定の部分だけに要素を適用することも可能だったりします。
ところが、基本的にコンテンツ部分のソースには手を加えられない(もしくはページ数が多すぎで手を加えたくない)ようなサイトリニューアルのお仕事で、特定のコンテンツ(スタイル)を持つページだけサイドバー無しにしたいなんて場合、もうどうにもこうにも困ってしまいます。
「そんなことレアケースだろう」と思われるかもしれませんが、もともとゆるゆるのhtmlで作られたサイトを、セキュリティ度合いの高いCMSに移行するなんて仕事が、公立の学校や、公立の施設、病院などでしばしばあるのです。
このような場合、メインのコンテンツは自由にhtmlが書けますが、ガチガチなので、body タグに手を出せませんし、サイドバーはすでにCMS側で作成されてしまっているので、そのフレーム自体を消し去ることができません。、
そんな事情で、大きな表のあるページだけサイドバー無しにするとか「各々のページだけこうしたい」という要望に応えられないのです。
css3では、そのような仕様はなく、css4で出るかもと囁かれていましたが、今のところ、対応しているブラウザはありません。
で、どうするかというとjQueryさんにお願いするしかないようです。
で、どうするかというとjQueryさんにお願いするしかないようです。手を出せるメインコンテンツの部分に以下のコードを埋め込みます(jQueryを読み込めているという前提ですが…)
1 2 3 4 5 6 7 |
<script> (function () { $(function(){ $("body:has(div.home)").addClass("page-home"); }); })(jQuery); </script> |
上記のソースだと、<div class=”home”>が内包されている場合、そのbodyタグに自動的にclass=”page-home”を追加します。
あとは、body.page-home に続けて各要素のスタイルを設定してあげれば良いのです。
上の例はトップページ限定なので、home としていますが、各ページで変えることもできますし、うまく変数を使うこともできるかと思います。
コメントを投稿するにはログインが必要です。