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