Chromeのアップデートでサイトのレイアウトが崩れたときの対処法【CSS編集】

  •   
    ラップトップと花

    こんにちは!未経験からHTML&CSSを学び、自作のWordPressテーマでこのブログを運営している、えひめのMiho(@ehimemiho)です。

    ブログを開設して一年3ヶ月…先日突然サイトのレイアウトが崩れ、たいへん焦った経験をしました。

    なかなか原因がわからなかったのですが、このたび無事に修正が終わったので、その対処法を書き残します。

    どなたかの参考になればうれしいです。

    TOPページの記事カードが、二列から一列に!

    今年5月末頃から急に、デスクトップ端末でのブログTOPの表示が崩れて、戻らなくなりました。

    ブラウザはGoogle Chromeです。

    ↓それまで二列に並んでいたTOPページの記事カードが、突然一列になったのです。

    記事カードが一列になった
    記事カードの表示がいつのまにか「一列」に。
    記事カードが一列になったTOPページ
    画像をタップすると大きく表示されます

    ↓元々は下のように、記事カードを二列に並ばせていました。

    記事カードが二列で並んだTOPページ
    ものとレイアウトは記事カード「二列」だった

    崩れる前のTOPページは、デスクトップ端末で「2列×5行」全10記事を表示するようにコードを書いていました。

    【style.css】のメディアクエリは、デスクトップ→横幅 1440、1280、1024pxで書き分けており、今回のレイアウトの崩れは 1440、1024px でおきていました。

    表示が崩れた原因は、Chromeのアップデートの影響

    しばらく様子を見てもレイアウトの崩れは直りません。

    「初心者が作ったテーマだからなにか不具合があったのかも?」と、いろいろググってみたものの原因はわからず、困り果てました。

    そこで、WordPress運営のコンサルをお願いしているフルスタックエンジニア Arisaさん @arisa_dev)に聞いたところ、すぐに回答がありました。

    これはChromeによるスタイルの変更が原因でしょうね。

    Chromeが最近、特定のデフォルトスタイル(ボタンやMacデフォルトフォント)のスタイル表示を変えましたので、それによって若干ずれたのだと思います。

    Mihoさんの場合、横幅をグリッドレイアウトのカラムを使用せず、pxで設定されていますので、それでブラウザの仕様変更に運悪く遭遇してしまい、今回の崩れがおこったのだと思います。

    Mozilla Firefoxでは問題なくデスクトップ端末でも並列していますので、ブラウザによる問題ですね。

    Arisaさんからの回答

    なるほど!

    Chromeのアップデートの影響は初めてのことで驚きましたが、仕方がありません…。

    「ブログの顔=TOPページ」が崩れたまま放置するのは忍びないので、さっそく修正に取りかかりました。

    コード

    デベロッパーツールで、修正箇所をみつける

    ⒈Chromeの検証(デベロッパツール)の使い方

    Google Chromeにはデベロッパーツール(要素の検証機能)というとても便利な機能があるので、それを使いました。

    まずは調べたいページを、Chrome(クローム)の画面で開いておき、下記の手順でツールを起動します。

    デベロッパツールの起動方法
    ①画面上のどこでも良いので、右クリック
    ②表示されるメニューから「検証」をクリック
    ③デベロッパツールが画面の下に開く

    ⒉HTMLとCSSで修正すべきセレクタを見つけ、値を調整する

    デベロッパーツールの左上にある四角いアイコンをクリックし、「選択モード」にします。

    見たい所にカーソルを合わせると、その部分のHTMLコードが表示されます。

    選択モード
    選択モードにする方法

    今回の原因について、テーマ開発の経験から「記事カードを二つおさめるのに必要なメインコンテンツ幅がなんらかの理由で足りなくなり、カードが下に押し出されているのでは?」と目星をつけました。

    なので修正案は、
    ①メインコンテンツの幅を大きくする
    ②記事カードの幅を小さくする

    の2つになります。

    まず、①「メインコンテンツの幅(width)を大きくする」をデベロッパーツール上で試したところ、今度はサイドバーがメインコンテンツの下に押し出されたため、却下となりました。

    次に②「記事カードの幅を小さくする」を試します。

    ↓記事カード部のセレクタ名は、「.item-inner 」とわかりました。

    一列の時のCSS編集

    .item-inner に対して指定しているstyleが、右下に表示されています。

    この中の「幅 = width」を 436px→434pxへ2px小さくしたところ、記事カードがシュッと二列に戻りました!

    一列の時のCSS確認

    下に押し出されていたカードが本来の位置にハマった瞬間は、なかなかの爽快感でした 笑

    サイドバーの位置も今度はそのまま維持されており、問題はなさそうです。

    修正のポイントは、

    記事カードを格納しているメインコンテンツの幅は変えずに、カードの幅を2px小さくしたことで、メインコンテンツ内に二列で収めることができた、というわけです。

    CSSを修正し、テーマファイルを更新して完成!

    こうしてデベロッパーツールで検証することで、修正すべきCSSの箇所と方法(セレクタ名と値)がわかりました。

    でも、これだけでは本番環境には反映されません。

    このブログ(WordPress)では「子テーマのない、親テーマだけのテーマファイル」を読み見込ませています。

    【ehime_mikan_thema】の
テーマファイル
    オリジナルテーマ【ehime_mikan_thema】の
    ファイル

    なので、レイアウト修正にはさらに以下の作業が必要になります。

    テーマファイル更新までの手順



    ①検証画面で修正したCSSのコードを、練習環境(MAMP)のテーマファイルにある「styles.css」にコピペし、ローカル環境で反映を見る

    ②Chromeのデベロッパーツールを使って、他サイズの端末にも問題がないかなど再確認

    ③WordPressのダッシュボードで一時的に別のテーマを有効化し、古いテーマを削除する

    ④修正した「styles.css」を含むMAMPのテーマファイルを圧縮しWordPressのダッシュボードでアップロード後、有効化します。

    !注意!テーマファイルを入れ替える前に、必ずWordPressのバックアップを取っておきましょう。

    おわりに

    ・今回、Chromeのアップデートによるデザイン仕様変更の影響と思われる、サイトレイアウトの崩れを経験しました。

    ・修正には、Chromeにはデベロッパーツール(要素の検証機能)がとても役に立ちました。

    ・子テーマがないため、直接テーマファイルのstyles.cssのコードを修正し、WordPressのダッシュボードでテーマファイルごと再アップロードする作業が必要でした。

    原因がわからなくて焦りましたが、ドイツ在住のフルスタックエンジニア Arisaさん @arisa_dev)のおかげで無事にレイアウトが元に戻りホッとしています。

    今回の経験から、ブログを手直ししながら運営していくことでサイトへの愛着がさらに増すことを実感しました。

    ではでは〜、また読みにきてくださいね!

    関連記事>>すべて公開!私のWeb制作スキルについて【HTML/CSS,WordPress】

    関連記事>>文系でパソコンも苦手だった私がCodeGritでプログラミングを学べた理由

    関連記事>>シンプルな囲み枠(ボックスデザイン)のサンプル4つ