さてさて。一応前編で追悼の言葉らしきものを述べさせてもらったので、父にはそれで納得してもらうと言うことで(いや、絶対納得していなくて特上のウイスキーを待ってると思うんだけど)、CSSとClass指定との格闘の記録を書いていこうと思います!
フッターにもあるとおり、私はMH THEMESが作成したmh-magazineーliteという無料版のテーマを利用させてもらっている。テキストのみで構成されたページも見やすいし、写真をアップしてアイキャッチ画像やサムネイル画像として表示しやすそうという利点に引かれた。とはいえ、思っていた以上に写真をアップしていないんだけど(笑)
小説をアップしたり、ゆくゆくは年表とか地図もアップしたりしようと思っていたので、固定ページのレイアウトはかなり手を入れた。トップページ(デフォルトpage)、投稿ページや404・検索結果ページ(single)、投稿インデックスページ(index)以外のページにはサイドバーが表示されないように別個にテンプレートを作成している。
で、である。なぜか私が独自に作成したテンプレートを使っているページではなく、オリジナルのテンプレートを使っているページにレイアウト崩れが起きている!!! 一体全体どういうことなんだろう??? IEでもchromeでも同じような崩れ方をしているので、ブラウザーごとの設定がおかしいわけではない。全体的なCSSの指定がおかしいのだ。おそらく、親テーマと子テーマの指示の一部が齟齬を来していて、その齟齬がオリジナルの固定ページテンプレートとの間に影響しているということだろう(あくまで推測でしかないけど)。試しに子テーマを外したらトップページのレイアウト崩れが回復したから子テーマのCSSが関わっている可能性は高い。
まずは旧CSSと新CSSを比べてみる。バックアップにある旧CSSには2月17日の日付があるから前回更新時の日付なんだろうか? このところ忙しくてよく覚えていないや。んで、私が上書きした子テーマ用のCSSはというと・・・あれ? 2014年12月9日になっている。ありゃりゃ。どうやらjetpackの「CSS編集」で編集したものをデータベース上に反映するのを忘れていたらしい。改造記録簿の方にはつけてあるのに・・・全くしょうがないなあ。
で、新旧のデータを比べてびっくり。旧の方にはバージョン表記が1.6.9とあるのに新の方は1.8.1だって。どんだけ更新を見逃してきたんだろう。これだけバージョンが変われば中身も相当変わっているはずだよ。ふたつのCSSファイルを手っ取り早く比較するためにdifff(http://difff.jp/)というサイトにお邪魔して、新旧データをコピペして比較すると・・・。
びっくりするほど変わっている。新規追加された領域が多い。今まで画像はprettyPhotoという部分で表示する際のCSSが制御されていたみたいなんだけど、そこがごっそり消えていて、Media Queriesという領域が新たに加わっている。他にもSlickNavとかが加わり、従来あったFlexSlider部分にも大幅に加筆されているっぽい。これじゃあレイアウト以外にも何かが変わってしまっている可能性は高い。
レイアウトに絡む部分をよくよく見ていくと、どうやらセレクタ名が変更になっているっぽい。今までは「.container」とか「.wrapper」だったものに接頭辞が付いている! 「.mh-container」とか「.mh-wrapper」になっている!!! それなのに私が作った固定ページテンプレートとそのCSSがきちんと指示どおりに表示されているのは一体どういうことなんだろう???
と、いうことは・・・若干青くなってデフォルトのpage_phpを見てみると・・・やっぱり思ったとおり!!! 当然class名が変わっていて「div class=”mh-wrapper clearfix”」って指定が入っていますよ。レイアウトの基本となる部分の指示が変わっている。でもでもでもでもでもでも・・・・・・なんでデフォルトの方がレイアウト崩れを起こしていて私が作った方はしっかり表示されているんだろう??? 逆じゃないかなあ。何でこうなるんだ???
単純な解決策はたぶんそれほど難しくない。いっそのことすべてテンプレートを自作してしまえば済みそうな気がする。でも、原因を突き止めないと本当の解決ではない。また同じようなトラブルが発生した時、対処療法では済まなくなるかもしれないから。
思った以上に長く書き連ねてしまったので、解決編は「つづく」ということで。でも、本当に次回投稿で終わるんかいな・・・。
了子