いやー、ついに本日INDEXのサイトが稼働しました。こちらです。https://index-id.jp/

こうなるまでに、最後に待ち受けていた問題は、表題の「welcartで、スマホ等小さい画面で、ヘッダーメニューが右側のカートメニューと重なってしまうこと」でした。ですので今日はその解決法を示します。解決法は大きく２つの対策に別れます。それぞれを下記に示します。

小さい画面のとき、サイト名とメニューを縦に並べる方法

今回はWALDENというテーマを使いましたので、下記ファイルを（X serverを使っているなら、ファイルマネージャを使って）変更します。

サイト名/wp-content/themes/welcart_walden/library/css/walden.css

今回の場合は、上記ファイルの「h1#site-title, div#site-title」という要素に対する「float: left;」(サイトタイトルを左寄せで置き、その後に続けて次の要素であるメニューを配置する、という命令)を取り除けばOK。

すぐに反映されない場合はブラウザの履歴をクリアすれば反映されます。

ちなみに、welcartのテーマであるWALDENは、welcart basicの子テーマですので、さらなる子テーマは作れないので、バックアップを取って直接cssファイルを触りました。

サイト名とカートメニューが重なることへの対処法

カートメニューを避けることで対応します。というのも、カート等のナビ（ .utilities ）はabsoluteで配置されていますので、スマホサイズの時（responsive.css の 480px以下の指定）にabsoluteを解除します。

wp-content/themes/welcart_walden/library/css/responsive.css

の中の、「.utilities 」の{}の中に「position: relative;」(absoluteだと重なってもそのままそこに居続けるが、relativeなら避けて表示してくれる)を書き込めばOK。こちらもすぐ反映されない場合はブラウザのキャッシュをクリアして下さい。

終わりに

以上、めでたしめでたし！というわけで一旦ホームページ製作は終了です。さて今日はINDEXにきて飲み会です。ではまた明日。

• 

• 

•