HPのヘッダを新調した話

どうも、じんたろうです。

いろんなことを並行して少しずつ進めている私ですが、今回はWordpressのヘッダを新調した話です。

０から始める副業生活

副業に限らず、資産形成とそれに伴う制度の情報整理行い、端的に内容を伝えていくことを目的としてブログを運営しています。

上のアイキャッチも、だいぶ適当に作ったものなので見直したいのですが、今回はヘッダー部分を見直しました！
とはいえ、画像でなんとなくテキストを打ち込んで作ってみた素人づくりですが。。

完成形

何にハマったかというと、レスポンシブデザインです。

レスポンシブデザインとは、要するにどのブラウザ／どの端末で開いてもイケてるHPで表示されてね、という設定となります。

Cocoonを使っているのですが、ブラウザサイズによってヘッダーの裏地がチラチラ見えたり、見切れたりします。

切れて表示されてしまう

スマホだと、切れすぎて謎になる

そこで出会ったのが、こちらの記事です。
この記事に書かれているコードを指定するだけで、なんとレスポンシブでずれないヘッダーになります！

スマホもこの通り。ちょっとサイズが・・・ですが。

いやー、先人たちの知恵は偉大ですね！日々勉強です。