こんにちは、りんごです！
デザインの自由度の高いWordpressでブログを書いていると、定期的にデザイン（レイアウト）を変えたくなる時が来ますよね。私はブログを開くたびに変えたくなります。笑
今回もまた、ヘッダーのデザインを変えたのですが、それによりモバイル版のデザインがどうしても気に食わないものになってしまいました。。。
PC版のデザインはまあまあ気に入っていて変えたくないのに、モバイル版がどうしても気に食わない。。どうしよう。。。ということで！
PC版とモバイル版でヘッダー画像を変えることにしました！
が、これがとっても大変でした。泣 週末2日かけて解決したので、記事にしておこうと思います！
PC版とモバイル版でヘッダー画像を変える方法
まずは、前提としてこのブログのPC版の設定をご紹介します。
私はあまりPCに詳しくなく、ネットで調べたものを組み合わせているだけなので、用語など間違えて使っているかもしれません。読みづらかったらごめんなさい！
PC版のヘッダー設定
まず、テーマはCocoonを使っています。使ってる人が多いので、情報がネット上にたくさんあり、私のようにPCに詳しくない人には一番いいテーマなような気がします♡
ネットで調べたところ一般的にヘッダーは「背景画像＋ロゴ」で作っている方が多いのかなと思います。ですが、私は自分でヘッダー画像を作りたかったので、トロントで撮った写真を使ってCanvaで編集したものを使いました。
Canvaはサムネ作ったりするのも簡単だし、無料でできることが多いのでおすすめです♡
この作成した画像を「ヘッダーロゴ」として設定し、ヘッダーレイアウトを「センターロゴ（スリムメニュー）」に設定しました。（ヘッダーロゴサイズは幅：1240 高さ：200）
ロゴだけでは画面いっぱいに表示されなかったので、背景色を画像に合わせて境目が見えないようにしました。
↓こんな感じになりました。（ちょっとスクショがゆがんでるけど…笑）
この設定はCocoon設定＞ヘッダーでできます。
モバイル版のヘッダー変更
モバイル版ではトップ画を変えて以下のようにしました。
こうするためには、プラグイン「Multi Device Switcher」も検討しましたが、これはテーマごと変わるのでレイアウトごと全部設定し直しになるようで、非常にめんどくさいです。笑
私のようにレイアウトはそのままでトップ画だけ変えたい場合には、CSSをいじることになります。※CocoonのQ&Aページにphpを書き換えるというのも出ていましたが、CSSだけでできました！
まず、CSSを書き込む場所は外観＞カスタマイズ＞追加CSSです。
そして、ここに下記のCSSを書き込みます。
黄色のラインが画像のサイズで、赤のラインが画像のURLです。
画像のサイズはスマフォによって見え方が違うと思うので、確認しながら数値をいじってください。
画像はまずライブラリに写真をアップロードし、メディア＞ライブラリから該当画像を開き、リンクをコピーという箇所に画像のURLがあります。
おわり
以上です！
わかってしまえば簡単ですが、調べてここまでいくのにすごく苦労しました。笑
同じようにデザインを変更したい方のお役にたてれば嬉しいです♡
コメント