webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

      2021/02/16

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームページ制作請負)を少しリニューアルしてみた件についてお話します。 しばらくほったらかしだったのですが、ぶろぐなどに使ったCSSテクとかも使って、(一部ですが)落ち着いたデザインに仕上げてみました。さっそくみていきましょう。

■管理人のお仕事用サイト・リニューアル例

https://wp-web.sounds-stella.jp/

プチリニューアルでこんな感じに。ヘッダーまわりなどを中心に行いました。最新ではないけど、ちょっと前からトレンドになった、『ヒーローヘッダー(画像が画面いっぱいに広がるヘッダー)』ぽい要素を取り入れ、『横幅いっぱいに広げる・一部のパーツはZ軸で重ねる』みたいな感じにしました。

基本的に、スマホ対応wpサイト(wordpress)のお仕事が、年末にかけて多かったので、引き続き『スマホで見込みのお客さんに見つけてもらおう』的な雰囲気を出すためスマホが出てきています。

■web系の技術情報(ドメインやCSSレイアウトなど)

■ドメインいっぱいで管理が大変なときはサブドメインにし、関連性ある語句をいれる

別ドメインを割り当ててもよかったんですけど、むーむーのアカウントに既にいっぱいドメインがあって、管理が大変になっていたので、(すでにある、このサイトのsounds-stella.jpドメインの)サブドメインを割り当てることにしました。

業務内容との関連性を持たせた感じですし、オーディオやアレンジみたいなのをやっていたので『web系なのに、soundがドメインに入って大丈夫か?』って思われそうですけど、これは『音』って意味ではなく、ドメイン取ったときから『○○のように見える』って意味なので、問題がないわけです。一番いいたいのはこれでした(笑)

これにより、オーディオ系のサイトとは別サイトとして運用することができます。

■横幅全体に広げた画像に、透けて重なるメインメニュー

以前このサイトに書いた『【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法』 /archives/5187 というテクをちょっと応用して作りました。

『position: relative/absoluteと、z-index指定で重ねる』『背景だけ透けて、文字は透けないようにするのにbackground-color: rgba』というCSSを取り入れています。

■スマホ対応にするため、メニューを2種用意し、メディアクエリで切り替える

しかし、上記のCSSだと『スマホでメニューがうまく表示できない(タップしても出てこない)』みたいな難点がありました。そこでスマホ対応にするために、『すけて重なるメニュー』と『スマホ向けのきちんと表示するメニュー(z-indexなどの指定が無い)』の2種を用意しました。

これらをメディアクエリでデバイス幅に応じて切り替え、スマホ時にもきちんとメニューが出るようにしました。

■あとがき・まとめ

自分のお仕事サイトはしばらくほったらかしで『紺屋の白袴』っぽくてちょっと気が引けていましたが、やっと落ち着いたデザインにすることができました。今後も、お仕事で使ったテクや自社サイトで使ったテクがありましたら、お伝えしていきます。


【カテゴリ】 - CSS
【タグ】 -

  関連記事

【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする

今回は、かなり地味めなCSSプロパティ(字間スペース&行の高さ) ...

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...