wordpressでのスマホ対応webサイト制作・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種を用意しました。

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

■あとがき・まとめ

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



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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき、困ったことがあったので、対処方法を紹介します。 ワードプレスのファイル構成やCSSの学 …

ワードプレスの子テーマって、なぜ必要なの?

今回は、ワードプレスサイトを作るときにたまに話題になる『子テーマ』について取り上げます。 『必要だ』といわれていますが、どんなときに必要か・子テーマを入れないこ …

【wpプラグイン】SiteGuard WP Pluginってどんな風にセキュリティに強くなるの?

今回は、サイト乗っ取りとか不正ログインみたいなリスクを減らせそうなワードプレスのプラグインを使ってみます。 利用するのは『SiteGuard WP Plugin …

(ヘッダーとか見出しの要素を)片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』ではない、ちょっと変わったデザインにしてみます。 使う場所によって『ヘッダー』とか『見出し』 …

CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)

今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使ってたfc2ぶろぐがあったので(fc2は外部ファイル読み込み・ヘッダーに書く、両方できる) …

スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動してしまうという症状が発生したので、それにCSSの修正で対処してみます。 元のテーマは『wp …

【ワードプレスサイト製作】レスポンシブ左右ボックスとaudioで、音楽素材サイトを作る

今回は、ワードプレスを利用して、新しいサイトを作ってみたときの話題です。 テーマは『stinger新しいバージョン』を選択。レスポンシブ左右ボックスとaudio …

ワードプレスwebサイトの、記事カテゴリー調整方法~設定しかた、親・子カテゴリ使い分け

今回は、このサイトにも使われているweb制作ツール・ワードプレスでの、カテゴリーの調整方法についてです。 最初のうちは気にしなくてよいかもしれないけれど、記事が …

CSSの『Expected RBRACE 』エラーって何なの?(ワードプレス4.9で判明)

今回は、ワードプレスを新バージョンにしたら判明した、変なCSSエラーがでていた件についてお話します。 エラーがわかる便利な機能がついてるんで、今まで(致命的では …

【ワードプレスサイト製作】俺の最低限なインストールプラグイン晒す 

今回は、ねた準備中につき雑談です。 管理人はワードプレス勢ですが、なるべくプラグインは少なくなるようにしています。どういうのをインストールしているか、さっそくみ …