見出し画像

【ペライチ基礎】ペライチでヘッダーメニューを設置する方法

ペライチの作成方法が簡単に学べるマニュアルです。

今回は、あると便利なヘッダーメニューの設置方法をお伝えします。

ペライチで作るランディングページは縦に長くなりがちなので、ヘッダーメニューがあると大活躍です。

サイトを閲覧している人にとってはかなり便利な機能なので、ぜひ設置して活用しましょう

それでは早速設置方法をご説明します。

ペライチでヘッダーメニューを設置する方法

メニューの設置方法はボタンの設置と似ています。

まずはボタンの使い方を確認しておきましょう。

ボタンの設置方法をまとめた記事を過去に公開してますのでチェックしてくださいね。

それでは編集をしていきましょう。

まずは編集画面を開き「ブロックの追加」から「ヘッダー/メニュー」を選択しましょう。

コメント 2020-07-10 062727

いくつかのヘッダーメニューとフッダーメニューがあります。

オススメなのは(上部固定)と書かれたメニューです。

これは、常にページの上部にメニューを表示してくれるブロックです。

ページの位置に関係なくメニューが見えるので非常に便利です。

他にはロゴ画像を入れることができるブロックや2段のテキスト編集エリアがあるもの、ボタンが1つのものなどがあります。

コメント 2020-07-10 063042

いくつかメニューを並べてみました。

見た目が様々ですね!

用途に応じて適宜選択してください。

今回は「左テキスト+右メニュー(上部固定)」を使ってご説明します。

コメント 2020-07-10 062827

それではブロックを追加してメニュー部分を編集しましょう。

コメント 2020-07-10 062929

メニューの編集画面はこんな感じです。

コメント 2020-07-10 063115

背景色

背景色を変更するとこんな感じ

コメント 2020-07-10 065150

あまり強い色を選ぶと、見栄えが悪くなることがあるので、薄い色もしくはネイビーなどの深い色を選ぶと良いです。

メニュー文字色

メニュー文字色は黒と白を選択できます。

デフォルトは黒が選択されていて、上の画像では白に変更しています。

メニュー文字サイズ

メニューの文字のサイズを変更することができます。

コメント 2020-07-10 063359

大きくしすぎるとみためのバランスが悪いので、タイトル文字よりは小さいサイズが良いです。

メニュー位置

メニューの位置を選べます。

コメント 2020-07-10 062929

左寄せ・右寄せ・中央の3つから選べます。

デフォルトは右寄せになっています。

メニュー

メニューの設定はボタン設定と同じです。

ペライチのページは、ページ公開枠が2つ以上の時に、既に作成している別のサイトをリンクとして使用することができます。

メニューは数を増やしたり減らしたりすることができます。

コメント 2020-07-10 073845

各メニューの右上にある×ボタンをクリックすることで、メニューを削除できます。

また、下の+ボタンをクリックすると、メニューを追加することができます。

メニューは「テキスト」に入力された文字が横並びに表示されます。

メニューが多くなると、隣のメニューとの境目がわかりづらくなります。

コメント 2020-07-10 074410

テキストの先頭に「●」を入力するなどして、メニュー通しの区切りがわかりやすくしておきましょう。

コメント 2020-07-10 074434

実際にメニューを設置したページを用意しました。

メニューをクリックして動作確認をしてみましょう。

メニューの設定完了後は必ずプレビュー画面から動作確認をしてください。

設定ししているブロック番号が間違っていると、スクロース先が一致しなくて、サイトとしては見づらくなってしまいます。

というわけで、メニューの設置方法は以上です。

まとめ

いかがでしたか??

ボタンの設置が1箇所にいくつか集まっている感じなので、さほど難しくはなかったと思います。

上部固定メニューを使うだけで、サイトの仕上がりがワンランクアップします!

ロゴ画像をお持ちの方は上部固定で画像を挿入できるメニューもあるので、

そちらを使うといいですね!

なんでもご相談ください。

サイト作成に関するご相談はいつでも受け付けています。

コメントやメッセージでお問合せ下さい。

ブログとTwitterで情報発信中です。ぜひチェックしてみてください。

https://twitter.com/can_kids_banana

この記事が気に入ったらサポートをしてみませんか?