引っかかった!!! テーマ更新の罠(後編)

それではさっそく実験に乗り出しましょう。こういうことはやっぱりトライアンドエラーで解決策を探していくしかありませんからね。まず試してみるべきだと思われることをつらつらと考えてみますと・・・

1、子テーマを一時的に廃して親テーマに戻し、「CSS編集」に子テーマに追記した部分を入力してみる。

2、子テーマの「.container」や「.wrapper」をすべて「.mh-container」とか「.mh-wrapper」に書き換えて、固定ページテンプレートのclass部分も「mh-wrapper clearfix」などに書き換える。

う~んどっちがいいんだろう。『異聞』をアップしているページは小説専用のテンプレートで、その他の固定ページもサイドバーなしの通常よりコンテンツ部分が幅広なテンプレートになっている。これらを逐一手動で変更していくのは面倒くさい。ということは必然的に「2」の方法をとることになるけれど・・・それで解決するんだろうか? 

つまり、こういうことなんだろうと思うんだよね。

親テーマCSS+子テーマCSS→小説専用ページ=正常

親テーマCSS+子テーマCSS→新デフォルトページ=レイアウト崩れ

新親テーマと新デフォルトページの間にある子テーマCSSがこの二つを連動させることを妨害している、と。子テーマCSSを変更すれば新親テーマと新デフォルトページがうまく連動してくれることになるはず。まずは子テーマの「.container」などを「.mh-container」などに変更してみましょうか。それでデフォルト固定ページが正常化して、小説専用ページがレイアウト崩れを起こすのなら、原因はセレクタ名とclass名にあるということになる。それでは、いざ実験。

・・・あれれれれ。結局その他のページのレイアウトが崩れて終わったぞ? container部分は薄いグレーの線で囲われていたのにそれが消失。その上画面横幅一杯に文字が広がってしまった。何がどうなっているんだろう? しかもページ末に設置したHOMEにもどるリンクが勝手にページ上部の右横に場所替えされている。改ページ的なノリなんだろうけど。一体全体どうしてこうなるんだろう? もしかして新親テーマCSSで下マージンが20に変更になったのがいけないのか? 旧データでは下マージンは0だったけど。

試しにこれと併せて各ページテンプレートのclass指定部分も変更してみよう。小説専用ページと幅広ページともにレイアウトは戻った。でも、HOMEへのリンクの位置は相変わらずページの右上にあるし、デフォルトと同様、container部分の線が消失してるのは変わらない。元のデザインの方が気に入っていたのに、何とかならないものか。これって勝手にブラウザーの幅一杯まで広がってしまうような設定になっているだろうか。もしそうなら、Media Queriesという領域が新たに加わったことが影響しているんだろうか。

いずれにしてもcontainer部分のCSSを旧設定に戻せば何とかなるんじゃないか。と、思って「.mh-container」を「.container」に直したCSSを「CSS編集」に書き込んでプレビューすると・・・あら不思議。な、なんと! ちゃんとcontainer部分を囲むグレーの線が復活している! 何でそうなるのかよく分からないけれど、とりあえずは成功なのだ!!! でも・・・結局何がどうしてこういう変化が起きるのかはさっぱり分からなかった。ま、結果オーライってことでいいか♪

了子