【WordPressテーマSWELL】トップページのメインビジュアル下側にメニューを設置する方法

SWELLでメインビジュアル下側にメニューの画像

SWELLのメインビジュアルの下の方にメニューを設置したいんでけど、どうすればいいの?

SWELLのブログパーツってとても優秀で、またまたブログパーツを活用させていただき作成していきます。

今回は、メインビジュアルの下側にメニューを設置するデザインになります。

用意するものと参考サイト

■ WordPressにSWELLをインストール
>>WordPressテーマSWELLを購入からWordPressにインストールするまでの手順

■ レンタルサーバーとドメイン
>>【2022年度】Xserverお申し込み方法(初めての方にわかりやすく解説)

■ XserverにWordPressをインストールとSSL化設定
>>【Xserver】WordPress簡単インストールとSSL設定の方法

■ サイトのアイコンとロゴ画像
>>サイトアイコンやロゴ画像の作り方(Hatchful利用で無料作成)
>>(無料枠でも使用できます。)
>>背景透過
>>画像圧縮

■ メインビジュアルの画像(1600px×900px)
>>(無料枠でも使用できます。)

■メインビジュアルでメニューとして使用する各固定ページ名の画像と、各固定ページでメニューとして使用する各固定ページ名の画像(50px×100px)
>>(無料枠でも使用できます。)

WordPressがよくわからないよ。。。って方はまずこちらをご覧になって慣れてみてくださいね。

目次

【WordPressテーマSWELL】ヘッダーとメインビジュアルの デモ画像

今回はヘッダーにメニューを設置せず、メインビジュアルの下側に設置しました。

メインビジュアルの画像作成

私はCanvaを使用していますが、お好きなもので作成してくださいね。

メインビジュアルのサイズ

SWELLが推奨されているメインビジュアルのサイズは1600px×900pxです。

Canvaのカスタムサイズをクリックします。

幅1600px 高さ900pxにし、新しいデザインを作成をクリックします。

こんな感じで、画像の下側にメニューを設置するのを想定して画像を作成します。

WordPressの固定ページ

今回は、Home(トップページ)、AboutNews(投稿ページ)、Contactを作成します。

WordPressのヘッダー

ヘッダーの背景

管理画面外観カスタマイズヘッダーをクリックします。


トップページでの特別設定ヘッダーの背景を透明にするかどうかする(文字色:黒)にします。


ヘッダーの追従設定

ヘッダーにグローバルメニューを表示しないので、ヘッダーを追従させるのチェックは外します

ヘッダーバー設定

ヘッダーバー設定表示設定で、SNSアイコンリストを表示するのチェックを外します。

キャッチフレーズ設定

キャッチフレーズ設定キャッチフレーズ表示位置は、表示しないを選びます。


WordPressのヘッダーのグローバルメニューを非表示

外観メニューをクリックします。


メニュー名をグローバルナビと入力して、HomeAboutNewsContactを項目として追加します。

メニューの位置は、グローバルナビにチェックを入れます。

公開をクリックします。


せっかく作成しましたが、削除していきます。
そうしないと、グローバルナビを非表示にできないのでw

▼をクリックしてプルダウン表示します。

削除をクリックして削除します。

HomeAboutNewsContact全てのメニューを同様に削除します。

メニュー名のグローバルナビ自体は削除せずこのままにしておいてくださいね。

WordPressのスマホ開閉メニュー

新たにスマホ開閉メニュー内というメニュー名を入力します。

メニューの位置スマホ開閉メニュー内にチェックを入れます。

次をクリックします。


HomeAboutNewsContact、の項目を追加します。

公開をクリックします。


WordPressテーマSWELLのメインビジュアル

トップページをクリックします。


メインビジュアルをクリックします。


画像にチェックを入れます。


表示設定メインビジュアルの高さ設定ウィンドウサイズにフィットさせるを選びます。

フィルター処理なしを選びます。

オーバーレイカラーの不透明度0にします。


各スライドの設定スライド[1]スライド画像[1](PC)の画像を選びます。

メインテキスト[1]は削除します。

公開をクリックして保存します。


WordPressテーマSWELLのブログパーツを作成

メインビジュアルで使用するものと、パソコン表示のみでの固定ページで使用するものの2つのブログパーツを作成します。

メインビジュアルで使用するブログパーツ

ブログパーツ新規追加をクリックします。


タイトルはわかりやすくなんでもいいのですが、ここではメインビジュアル下方にメニューとしました。

スペーサー高さ750pxで設定します。


スペーサーの下にリッチカラムPCの列数4カラム間の余白左右の余白0にします。


それぞれの画像にツールバーリンクを貼ります。


スペーサークリックし、シフトを押しながらカラムクリックします。

グループ化をクリックします。


ツールバーデバイスコントロールPCサイズでのみ表示するにします。

公開をクリックして保存します。


固定ページメニューで使用するブログパーツ

管理画面に戻りブログパーツ新規追加をクリックします。

タイトルはなんでもいいのですがここでは固定ページメニューとします。

リッチカラムで画像を横に並べます。

ツールバーデバイスコントロールPCサイズでのみ表示するにします。

列数4カラム間の余白左右の余白0にします。


それぞれの画像にツールバーを使ってリンクを貼ります。

公開をクリックし保存します。


WordPressテーマSWELLのブログパーツを各場所に設置

ブログパーツ(メインビジュアル)

管理画面ブログパーツをクリックします。


先程作成したメインビジュアルブログパーツコード数字を覚えておきます。

ここでは32ですね。(数字は決まっていません。)


外観カスタマイズをクリックします。


トップページをクリックします。


メインビジュアルをクリックします。


ブログパーツID[1]に先ほどから覚えていた32を入力します。

公開をクリックして保存します。


ブログパーツ(固定ページメニュー)

再び管理画面ブログパーツをクリックします。

固定ページメニューショートコードをコピーします。


外観ウィジェットをクリックします。


固定ページ上部カスタムHTMLドラッグ&ドロップします。

カスタムHTML内容に先程コピーしたショートコードを貼り付けます

保存をクリックします。


解説は以上になります。

お疲れ様でした!

まとめ

ブログパーツとスペーサーで色んなアレンジできそうですね!

ぜひチャレンジしてみてくださいね。

〜本日も最後まで読んでいただき、ありがとうございました。〜

SWELLを使用したデモサイト専用サイトです。

あわせて読みたい
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次