圧倒的な使い心地を追求するWordPressテーマホームHOMEアップデート情報このページでは、WordPressテーマ「SWELL」のアップデート情報に関する記事をまとめています。WordPressテーマ「SWELL」の基本的な設定についての記事一覧ページです。2019.06.20記事上のウィジェットエリアこのページでは、グローバルナビ(ヘッダーメニュー)の基本的な設定方法を解説していきます。グローバルナビとは、PCで表示した時にヘッダーに表示されるナビゲーションのことです。グローバルナビスマホ表示時、グローバルナビは開閉メニューの中へ移動する仕様となっています。目次前広告表示エリア目次ヘッダーメニューの設定方法まずはメニューの設定画面へ移動しましょう。管理画面の左メニューから「外観」>「メニュー」と進んでください。「メニュー」を選択すると、メニューを設定できる画面に移動します。【1】メニューを作成する初めてメニューを作成する場合は、以下のような画面が表示されているかと思います。「1」の入力エリアに、今回作成するグローバルナビ用メニューの名前を入力してください。わかりやすく、「グローバルナビ」や「ヘッダーメニュー」などでいいでしょう。メニュー名が入力できたら、「2」の「メニューを作成」ボタンをクリックして、メニューを作成してください。【2】メニュー項目を選択・追加する次に、先ほど作成したメニューに表示したい項目を追加していきます。「1」のエリアから、メニューに追加したい固定ページにチェックを入れます。チェックが入った状態で、「メニューに追加」ボタンをクリックします。展開してメニュー項目を選択・入力してください。【3】メニューの位置を選択して保存メニューの項目が追加できたら、最後に「メニューの位置」を選択し、保存します。「1」のエリアにSWELLで設定可能な各メニューが表示されているので、「グローバルナビ」を選択しておきましょう。「メニューを保存」ボタンをクリックすると、メニューの状態が保存されます。「メニューの位置」を選択しない場合、グローバルナビとしては表示されないので注意してください。【4】子メニューの設定方法についてPCで表示されているグローバルナビに「子メニュー」を設定すると、マウスホバーした際に親メニューの下にふわっと子メニューが表示されます。子メニューの設定方法は簡単で、追加済みのメニュー項目をマウスで掴み、ドラッグして横にずらすだけです。上画像のオレンジで囲んだメニュー項目のように、少しだけ右にずれた状態となればOKです。当サイトのグローバルナビのように、メニュー名の下に英語表記を加えることもできます。当サイトのグローバルナビ各メニューの「説明」という設定項目にて小さく表示されるテキストを設定できます。各メニュータブの右端にある「(小さな三角アイコン)」をクリックすると、各メニューの詳細設定パネルが開きます。その中の「説明」と表示されたテキストエリアにて、メニューの英語表記を入力してください。了もちろん、大きく表示する方を英語にして小さく表示する方を日本語にしてもOKです。実はこの「説明」欄はデフォルト状態では非表示になっていますので、以下の手順を参考にして表示状態へ切り替えてください。メニューの編集画面の右上に表示されている「表示オプション」をクリックします。上からチェックリストが表示されてくるので、「説明」という項目にチェックを入れてください。冒頭で、「グローバルナビ」はスマホで表示した際に開閉メニュー内に移動すると説明しました。スマホ表示でもヘッダー部分にナビゲーションを表示させることができるようにしています。基本的には、グローバルナビの設定手順と同じです。異なるのは、「メニューの位置」を、「ヘッダーメニュー(スマホ)」にチェックするという点だけです。グローバルナビと同じメニューを表示させたい場合は、グローバルナビ用に作成したメニューで、「グローバルナビ」と「ヘッダーメニュー(スマホ)」の両方にチェックを入れておきましょう。「外観」>「メニュー」スマホ用ヘッダーメニューでは、子メニューは非表示となります。@ddryo_loos了SWELL開発者SWELLの開発者です。普段はフリーランスのフロントエンジニアとして活動しています。