wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

   

こんにちは、管理人@SS_mshpです。

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームページ制作請負)を少しリニューアルしてみた件についてお話します。

しばらくほったらかしだったのですが、ぶろぐなどに使ったCSSテクとかも使って、(一部ですが)落ち着いたデザインに仕上げてみました。さっそくみていきましょう。

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

■あとがき・まとめ

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【PHPでWPカスタマイズ】プラグイン不使用で、テーマに関連記事表示機能を実装しPV・滞在時間を上げる

今回は、サイトをしっかり見てもらうために、『WordPressサイトに、 …

PHP・shuffleやarrayを使った、画像ランダム表示方法~メインビジュアルやバナー・テキストにも利用可能

今回は、以前お取引先のスクールの担当者さまと、『サイトのメインビジュアル …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

【WPカスタムフィールドはこう使う】カップ焼きそばレビュー記事に、カスタムフィールドで評価スコアを(CSSつけ方もあり)

今回はwordpressの機能『カスタムフィールド』で、より具体的に利用 …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …