モバイルヘッダーロゴが中央になっていたので左に直した（Cocoon 2.7.3.1）

• スマホで自サイトを表示したら、ロゴの左端から中央に変わっていました。
• サイトロゴはもともとは中央で、自サイトでは以前にカスタマイズしていたところです¹。
• style.cssのロゴクラス（.mobile-menu-buttons .menu-button.logo-menu-button）に「justify-content: flex-start」を追加して戻しました。
• ちょうどCocoonテーマの更新で 2.7.3.1になっていました。

1. ヘッダーロゴの位置がずれている？

いつものように自サイトを見ていたら、モバイルヘッダーロゴの位置が変わっていました。

style.css に以下のコードを追加することで元に戻しました。

/** モバイルヘッダーロゴが中央になっていたので左に直した 2024-04-26*/
.mobile-menu-buttons .menu-button.logo-menu-button {
	justify-content: flex-start;
}

2. 原因となる要素とスタイルを調べる

まずは、CSSの何が原因になっているのか確認するため、Chromeで「検証」しました。

余白がついている要素を探していくと、「li.mobile-menu-buttons .menu-button.logo-menu-button」が見つかりました。

その要素のスタイルをいろいろ無効化していくと、「justify-content: center」が関係していることがわかりました。

3. style.cssでjustify-contentを初期値（flex-start）に戻す

justify-contentは、フレックスアイテムの主軸方向の揃え位置を指定するプロパティです²。
初期値は「flex-start」。

「WordPress設定」の「外観」から「テーマを編集」で「style.css」の末尾に追加します。

4. 原因となったサイト更新は？（Cocoon 2.7.3）

WordPressのテーマやプラグインは自動更新にしています。
一応、何が原因かわかるように更新通知メールで届くようにしています。

どうも直前にCocoon 2.7.2.6から2.7.3.1への更新があったのが関係しているようです。

Cocoon 2.7.3の更新履歴にある不具合修正を見てみると、以下の項目が関係していそうです。

• ヘッダー・アピールエリア背景がiOSに対応していなかったのを対応
• スマホのロゴ表示の上下に隙間ができてしまう不具合修正
• モバイルのサイトロゴにレイジーロードを付与しないように変更
• モバイルヘッダーがレイアウトシフトする不具合修正

ちなみに以前のカスタマイズを振り返ってみると、画像の左余白を固定にして左揃えにしていました。

.logo-menu-button img {
  margin-left: 8px;
}

そう考えると、フレキシブルボックスの処理が関係しているのかな、と思います（余白 auto による中央揃えからcenterに変わった）。

自サイトでは気になるたびに、子テーマのstyle.cssでけっこう微調整しています。
本家の親テーマが更新や不具合修正するたびに、少しずつ重複するスタイルが増えてしまっているんだろうな、と思います。

いずれ整理しないといけないとは思うのですが。

5. 【追記】ヘッダーロゴのタッチ範囲を広げた（2024-05-12）

ヘッダーメニューのロゴの空白部分がタッチに反応しなかったので、ロゴ扱いにしました。

.mobile-menu-buttons .menu-button>a {
   width: 100%;
}

こちらもどうぞ。

note風スタイル第２弾！モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート（CSS）を変更しました。前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。今回のメインは モバイルメニューです。どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。モバイルメニューボタンをいろいろ変更した上部バーはすっきりさせました。下部バーはLINE登録、ツイッ...

chiilabo.com

[Cocoon] サイトロゴのリンク先をページ種類で変えた（WordPress）

Cocoonテーマでサイトロゴのリンク先を変更したいと思って、 functions.phpをカスタマイズしました。add_filterで「'mobile_header_site_logo_url'」の処理で条件分岐するようにして、記事ページとトップページではブログ一覧に移動するように変更しました。ロゴのリンク先を分岐させたいサイト上のロゴを押したとき、通常はトップページに移行します。しかし、記事上に限ってはブログ一覧ページに移行するように変更しようと思います。以下のコードを ...

chiilabo.com

[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」（片方だけでは暗黙）

PageSpeed Insights（PSI）の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけを指定していました。高さだけでも表示サイズは計算できていましたが、PageSpeed Insightによると「ユーザー補助」の面で減点になるようです。ヘッダーロゴのサイズヘッダーロゴのサイズは、Cocoon設定の「ヘッダー」で修正しました。「...

chiilabo.com

1. note風スタイル第２弾！モバイルメニューを編集 – スマホ教室ちいラボ
2. justify-contentプロパティの意味と使い方 | CSS | できるネット–

QRコードを読み込むと、関連記事を確認できます。