WordPress テーマAstra3.0によるサイト作成の記録
レスポンシブ設定で、デスクトップPC/タブレット端末/モバイルフォンそれぞれに応じたヘッダレイアウトに調整する。
使用サーバー:ロリポップ
デバイスに応じたロゴ画像サイズの調整
デスクトップPC向けに加えてタブレット端末とモバイルフォン向けのレイアウトを設定する。
レスポンシブ設定の切り替え
外観>ヘッダービルダーの画面で、左下にあるレスポンシブ設定切り替えボタンを使い、タブレット向け/モバイルフォン向けの画面に切り替える。
中央のボタンでタブレット用画面に切り替えて、ロゴ画像の幅をタブレット向きに調整。
同様にモバイルフォン向けにも調整。
デスクトップPC/タブレット/モバイルフォンそれぞれの画面サイズに応じた画像の横幅が設定される。
キャッチフレーズに注意
上の画像ではキャッチフレーズを非表示にしているが、このオプションはレスポンシブ設定に関係しない。
つまり、非表示にすると、デスクトップPC/タブレット/モバイルフォンすべてで非表示になる。
メニューの確認
タブレットモードとモバイルフォンモードでは、メニューが表示されていない。
これは、テーマカラーとヘッダ背景色が同色のため。
実際にはメニュー用のボタンがあるため、ヘッダ右端付近をクリックするとメニューが現われる。
初期設定ではフライアウト形式のメニューとなっている。
テーマカラーを変更してアイコンを確認
念のためテーマカラーを一時的に変更してメニューの存在を確認する。
背景色と同化していたところにハンバーガーメニューのアイコンがあるのがわかる。
モバイルメニューのルックをカスタマイズ
レスポンシブ設定がタブレットおよびモバイルフォンの場合、スタンダードなナビゲーションメニューの代わりにメニュー用アイコンが表示される。
メニューアイコンとメニューのデザインをカスタマイズする。
アイコンボタンを変更する
レスポンシブ設定で、タブレットまたはモバイルを選択しているばあいヘッダービルダー上には「メインメニュー」の代わりに「ボタン切り替え」というパーツが表示されている。
また、左側のプロパティ項目にも「ボタン切り替え」が表示される。
「ボタン切り替え」をクリックすることで、ボタン自体のアイコンやサイズを選択できる。
「トグルボタンのスタイル」では、アイコンの周囲に輪郭線をつけたり、アイコン以外を塗りつぶすことができる。
スタイルを「アウトライン」にするとアイコンの周囲が輪郭線で囲まれる。
「塗りつぶし」を選ぶとアイコン自体は白くなり、アイコン以外の部分がテーマカラーで塗りつぶされる。
スタイルを「塗りつぶし」にしてテーマカラーをフォレストグリーンに戻すと、一見白いアイコンだけのように見える。
これでも一見いいように見えるが、デスクトップPCモードのメインメニュー色も元に戻っている(見づらくなっている)ので要注意。やはりテーマカラーの指定はやり直した方がいい。
注意ポイント
トグルボタンのデザイン設定は、タブレットモード/モバイルフォンモード共通で、それぞれ個別に設定することはできない。
モバイルメニューの設定
トグルボタンの設定がボタンそのものに対する指定なのに対して、ボタンをクリックして現われるメニューについては「モバイルメニュー」設定でカスタマイズする。
レスポンシブ設定がタブレットまたはモバイルモードのとき、ヘッダービルダー設定画面の左側とヘッダビルダーの設定エリアに自動的に「モバイルメニュー」設定ボタンが現われる。
メニュー項目の区切り線
”General"タブの「Item Divider」オプションをチェックすると、メニュー項目の区切り線を表示できる。
区切り線の色は「区切り色」で指定。
メニューアイテムの配置を調整
”Design”タブでは、メニューアイテムの文字色や配置を指定できる。
「メニュースペース」は各アイテム内の文字位置を調整する。いわゆるパディングに相当。
下の図では左のパディングのみ指定している。
「マージン」は文字通りマージンで、メニュー全体の配置を調整する。
配色の指定
色>メニューグループでは、テキストやリンク色とメニューアイテムの背景色を指定する。
下の図ではアイテムの背景色を指定。
モバイルメニュー全体の設定
モバイルメニュー全体の形式や表示位置は、[OFF CANVAS]という項目で設定できる。
メニュースタイルの指定
”General”タブの「ヘッダータイプ」では、メニュー全体のスタイルを「フライアウト」、「全画面」、「ドロップダウン」の3つから選択できる。
「標準」はフライアウト形式で、メニューがコンテンツの上に一部オーバーラップする。
フライアウトメニューの配置はデフォルトが右で、左に変更することができる。
「全画面」は、画面全体をメニューで覆うため、コンテンツは完全に隠れてしまう。
「ドロップダウン」はメニューが現われて、コンテンツを下へ押し出す。
ドロップダウンターゲット
詳細不明
コンテンツの配置
メニューアイテム内のテキスト配置。中央、右寄せ、左寄せから選べる。
メニューの背景色と[閉じる]アイコンアイコンの色
”Design”タブでは、メニュー全体の背景色や背景画像を指定できる。
また開いているメニューを閉じるアイコンの色を設定できる。
モバイルメニューの割り当て
タブレットとモバイルフォンで表示されるメニューはナビゲーションメニューを元に自動的に割り当てられるが、よく見るとアイテムの並び順が違っている。
これは「ナビゲーション」メニューを表示させる指定が正しく行われていないため。
「メニューの位置」設定で「メインメニュー」にしかチェックしていないので、「モバイルメニュー」の方にもチェックする。
これで「ナビゲーション」メニューが、PC用の”メインメニュー”とモバイル端末用の”モバイルメニュー”の両方で使われるようになる。