WordPress

WordPress サイト制作 #05 ヘッダのレスポンシブ設定

WordPress テーマAstra3.0によるサイト作成の記録

レスポンシブ設定で、デスクトップPC/タブレット端末/モバイルフォンそれぞれに応じたヘッダレイアウトに調整する。

使用サーバー:ロリポップ

使用テーマ:Astra

 

デバイスに応じたロゴ画像サイズの調整

デスクトップPC向けに加えてタブレット端末とモバイルフォン向けのレイアウトを設定する。

 

レスポンシブ設定の切り替え

外観>ヘッダービルダーの画面で、左下にあるレスポンシブ設定切り替えボタンを使い、タブレット向け/モバイルフォン向けの画面に切り替える。

WordPressサイト構築 #0501

レスポンシブ設定切り替えボタン

 

中央のボタンでタブレット用画面に切り替えて、ロゴ画像の幅をタブレット向きに調整。

WordPressサイト構築 #0502

タブレット用にロゴ画像の幅を調整。

 

同様にモバイルフォン向けにも調整。

WordPressサイト構築 #0502

モバイルフォン向けに調整

 

デスクトップPC/タブレット/モバイルフォンそれぞれの画面サイズに応じた画像の横幅が設定される。

キャッチフレーズに注意

上の画像ではキャッチフレーズを非表示にしているが、このオプションはレスポンシブ設定に関係しない。

つまり、非表示にすると、デスクトップPC/タブレット/モバイルフォンすべてで非表示になる。

 

メニューの確認

タブレットモードとモバイルフォンモードでは、メニューが表示されていない。

これは、テーマカラーとヘッダ背景色が同色のため。

WordPressサイト構築 #0504

実際にはメニュー用アイコンがある。

 

実際にはメニュー用のボタンがあるため、ヘッダ右端付近をクリックするとメニューが現われる。

初期設定ではフライアウト形式のメニューとなっている。

WordPressサイト構築 #0505

フライアウトメニューが開いたところ。

 

テーマカラーを変更してアイコンを確認

念のためテーマカラーを一時的に変更してメニューの存在を確認する。

背景色と同化していたところにハンバーガーメニューのアイコンがあるのがわかる。

WordPressサイト構築 #0506

メニューアイコンを確認

 

モバイルメニューのルックをカスタマイズ

レスポンシブ設定がタブレットおよびモバイルフォンの場合、スタンダードなナビゲーションメニューの代わりにメニュー用アイコンが表示される。

メニューアイコンとメニューのデザインをカスタマイズする。

 

アイコンボタンを変更する

レスポンシブ設定で、タブレットまたはモバイルを選択しているばあいヘッダービルダー上には「メインメニュー」の代わりに「ボタン切り替え」というパーツが表示されている。

また、左側のプロパティ項目にも「ボタン切り替え」が表示される。

「ボタン切り替え」をクリックすることで、ボタン自体のアイコンやサイズを選択できる。

WordPressサイト構築 #0508

アイコンタイプとサイズの指定。

 

「トグルボタンのスタイル」では、アイコンの周囲に輪郭線をつけたり、アイコン以外を塗りつぶすことができる。

WordPressサイト構築 #0509

トグルボタンのスタイル設定

 

スタイルを「アウトライン」にするとアイコンの周囲が輪郭線で囲まれる。

WordPressサイト構築 #0510

アウトラインを指定した場合

 

「塗りつぶし」を選ぶとアイコン自体は白くなり、アイコン以外の部分がテーマカラーで塗りつぶされる。

WordPressサイト構築 #0511

「塗りつぶし」を選んだ場合。

 

スタイルを「塗りつぶし」にしてテーマカラーをフォレストグリーンに戻すと、一見白いアイコンだけのように見える。

WordPressサイト構築 #0512

塗りつぶしでテーマカラーを元に戻した場合。

 

これでも一見いいように見えるが、デスクトップPCモードのメインメニュー色も元に戻っている(見づらくなっている)ので要注意。やはりテーマカラーの指定はやり直した方がいい。

 

注意ポイント

トグルボタンのデザイン設定は、タブレットモード/モバイルフォンモード共通で、それぞれ個別に設定することはできない。

 

モバイルメニューの設定

トグルボタンの設定がボタンそのものに対する指定なのに対して、ボタンをクリックして現われるメニューについては「モバイルメニュー」設定でカスタマイズする。

 

レスポンシブ設定がタブレットまたはモバイルモードのとき、ヘッダービルダー設定画面の左側とヘッダビルダーの設定エリアに自動的に「モバイルメニュー」設定ボタンが現われる。

WordPressサイト構築 #0513

モバイルメニューの設定

 

メニュー項目の区切り線

”General"タブの「Item Divider」オプションをチェックすると、メニュー項目の区切り線を表示できる。

区切り線の色は「区切り色」で指定。

WordPressサイト構築 #0514

メニューアイテムの区切り線を表示

 

 

メニューアイテムの配置を調整

”Design”タブでは、メニューアイテムの文字色や配置を指定できる。

「メニュースペース」は各アイテム内の文字位置を調整する。いわゆるパディングに相当。

下の図では左のパディングのみ指定している。

WordPressサイト構築 #0515

アイテム内の文字位置を調整。

 

「マージン」は文字通りマージンで、メニュー全体の配置を調整する。

WordPressサイト構築 #0516

マージンはメニュー全体の配置を指定。

 

配色の指定

色>メニューグループでは、テキストやリンク色とメニューアイテムの背景色を指定する。

下の図ではアイテムの背景色を指定。

WordPressサイト構築 #0517

メニューアイテムの背景色を表示。

 

モバイルメニュー全体の設定

モバイルメニュー全体の形式や表示位置は、[OFF CANVAS]という項目で設定できる。

WordPressサイト構築 #0518

[OFF CANVAS]をクリックする。

メニュースタイルの指定

”General”タブの「ヘッダータイプ」では、メニュー全体のスタイルを「フライアウト」、「全画面」、「ドロップダウン」の3つから選択できる。

「標準」はフライアウト形式で、メニューがコンテンツの上に一部オーバーラップする。

WordPressサイト構築 #0519

フライアウト形式

フライアウトメニューの配置はデフォルトが右で、左に変更することができる。

 

「全画面」は、画面全体をメニューで覆うため、コンテンツは完全に隠れてしまう。

WordPressサイト構築 #0520

全画面表示。

 

「ドロップダウン」はメニューが現われて、コンテンツを下へ押し出す。

WordPressサイト構築 #0521

ドロップダウン形式。

 

ドロップダウンターゲット

詳細不明

コンテンツの配置

メニューアイテム内のテキスト配置。中央、右寄せ、左寄せから選べる。

 

メニューの背景色と[閉じる]アイコンアイコンの色

”Design”タブでは、メニュー全体の背景色や背景画像を指定できる。

WordPressサイト構築 #0522

Designタブに切り替える。

WordPressサイト構築 #0523

メニューの背景色を指定。

 

また開いているメニューを閉じるアイコンの色を設定できる。

WordPressサイト構築 #0524

[閉じる]ボタンの色を指定する。

 

モバイルメニューの割り当て

タブレットとモバイルフォンで表示されるメニューはナビゲーションメニューを元に自動的に割り当てられるが、よく見るとアイテムの並び順が違っている。

WordPressサイト構築 #0525

ナビゲーションメニューとモバイルメニューの内容が違う

 

これは「ナビゲーション」メニューを表示させる指定が正しく行われていないため。

「メニューの位置」設定で「メインメニュー」にしかチェックしていないので、「モバイルメニュー」の方にもチェックする。

これで「ナビゲーション」メニューが、PC用の”メインメニュー”とモバイル端末用の”モバイルメニュー”の両方で使われるようになる。

 

WordPressサイト構築 #0526

「モバイルメニュー」のチェックをオンに。

 

-WordPress
-