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

SWELLメインビジュアルにメニュー2

SWELLでのメインビジュアルの左側にメニューを設置する方法の第2弾として、解説していきたいと思います。

今回はメニューに背景カラーを設定しています。

ヘッダーとメインビジュアル、そして固定ページのメニュー部分の解説となります。

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

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

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

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

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

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

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

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

同じくメインビジュアルの左側にメニューを設置する方法ですが、こんなのも解説しています。

tyonoro-demo-1の画像
目次

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

背景色をつけたメインビジュアルの左側にメニューを設置しました。

今回はこんな感じ

tyonoro-demo-2のアイキャッチ

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

私はCanvaで作成しました。
お好きなもので作成してくださいね。

>>

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

カスタムサイズで、幅1600px高さ900pxにして新しいデザインを作成をクリックします。


今回はこの様な画像を作成しました。
メニューエリアにする為の左の茶色部分の幅は、全幅1600pxの20%にあたる320pxにします。

WordPressの固定ページ

固定ページを作成しておきます。
ホーム(トップページ)私たちお知らせ(投稿ページ)お問い合わせです。

WordPressテーマSWELLのヘッダー

カラー設定

カスタマイズヘッダーをクリックします。


カラー設定ヘッダー背景色を今回は#dda92dにします。


>>ヘッダー背景、ヘッダーの追従設定、ヘッダーバー設定、キャッチフレーズ設定はこちら

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

>>ヘッダーのグローバルメニューを非表示にするにはこちら

WordPressテーマSWELL スマホ開閉メニュー

>>スマホ開閉メニューの設定はこちら

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

>>メインビジュアルの設定はこちら

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

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

メインビジュアル

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


PCサイズのみ表示

タイトルを分かりやすくメインビジュアルにします。

リッチカラムをクリックします。


固定ページの、ホーム私たちお知らせお問い合わせを入力します。

列数PCで2にします。

ツールバーの配置全幅にします。

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


入力した固定ページ名のカラム横幅20%にします。

余白設定カスタムパディングを使用するオンにします。左側を10pxにします。


各固定ページ名と固定ページ名の間スペーサー高さ10pxを設定します。


ツールバーを使って各固定ページのリンクを貼ります。

文字のサイズLにします。


をクリックしてハイライトをクリックし、固定ページ名全てを文字色白にします。
(見えにくいですがw)


右側のカラムテキストを入力します。

ツールバーでテキストの配置中央寄せにします。

高度な設定追加CSSクラスに、ここではmv-textと入力します。


SPサイズのみ表示

テキストを入力します。

ツールバーでテキストの配置テキスト中央寄せにします。

デバイスコントロールスマホサイズでのみ表示するをクリックします。

高度な設定追加CSSクラスsp_onlyが付いているのを確認します。


固定ページ

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

新たにブログパーツを作成します。

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


タイトルは固定ページメニューとします。

リッチカラム4カラムにします。

作成しておいた固定ページ用の画像を設置します。

各画像ツールバーリンクを貼ります。


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

列数パソコンで4列にします。

カラム間の余白左右の余白0.1remにします。


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

ブログパーツをクリックします。


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

作成したブログパーツメインビジュアル呼び出しコードの数字を覚えておきます。
(ここでは32ですが各自数字が違います。)


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


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


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


ブログパーツID[1]先程覚えていた数字を入力します。


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

次に固定ページのブログパーツです。

呼び出しコードコピーします。


管理画面外観ウィジェットをクリックします。


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

カスタムHTML内容に先程コピーした呼び出しコードを貼り付けます。

保存をクリックします。


メインビジュアルのテキストサイズを変更

カスタマイズ追加CSSをクリックします。


パソコン表示用とスマホ表示用のメインビジュアルのお好みのテキストサイズをCSSでここに表記します。


解説は以上になります。

まとめ

SWELLのブログパーツは、アイデア次第で色々アレンジできて利用価値が非常に高いですよね。

これからもまだまだ他のアイデアで解説していきたいと思います。

ここではシンプルな単体の固定ページメニューでの設定でしたが、固定ページに階層がある場合は、SWELLブロックのアコーディオンを使用すれば可能です。

作成方法付きのSWELLを使用したデモサイト集のサイトになります。

あわせて読みたい

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次