MENU
カテゴリー
アーカイブ
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。
SWELLでサイト型トップページを作る!解説→ CLICK!

SWELLでメインビジュアルにメニューを入れる

SWELLでメインビジュアルをカスタム
URLをコピーする
URLをコピーしました!

こんにちは、ゆるミニマリスト主婦のくうかです。

妹分のゆずいろ

SWELLでトップページを作ったけど、メインビジュアルも頑張って設定したいなぁ。

くうか

画像を入れるだけならすぐにできるけど、どうせなら人と違うデザインにしてみる?

妹分のゆずいろ

…私でもできるならやってみたい!

WordPressの有料テーマ「SWELL」では、サイトやブログのファーストビューをカッコ良くできる「メインビジュアル」を設定することができます。

くうか

当ブログのメインビジュアルの設定方法を紹介していきます。

こんな人におすすめ
  • 当ブログのメインビジュアルはどう設定しているか知りたい
  • メインビジュアルにブログパーツを使う場合の方法を知りたい
  • トップページ内に飛べるページ内リンクの使い方を知りたい
Contents

SWELLのメインビジュアルの機能

メインビジュアルとは公式サイトにも書いてある通り、トップページを開いた時に最初に目に飛んでくるエリアのことです。

くうか

サイトの個性が出せるエリアですよね!

SWELLのメインビジュアルには、

  • 画像1枚を表示
  • 画像複数枚をスライド表示
  • 動画

を、入れていくことができます。

通常の設定では、任意のテキストを表示させたり、ボタンでリンクを追加することが可能です。

詳しい設定内容は上記公式マニュアルが1番!なので、この記事では画像1枚にブログパーツでメニューを入れる方法を書いていきたいと思います。

くうか

ブログパーツを使うとさらに機能を増やすことができるんです!

SWELLでメインビジュアルにメニューを入れる

出来上がりはこのようになります。(ちょっと切れてしまった。汗)

メインビジュアル全体像

メインビジュアルはサイトのファーストビュー。

個性を出せる部分ではあるのですが、ユーザーに必ずスクロールさせてしまうという点がずっと気になっていまして…

くうか

ファーストビューで見たいエリアに飛べるようにしたらどうかな?

と考え、トップページの各エリアに飛ぶことができるトップメニューを入れてみました。

では実際にそれをどう実現しているかというと、

  1. トップメニューのブログパーツを作る
    1. リッチカラムブロックを利用する
    2. ページ内リンクを設定する
  2. メインビジュアルの背景画像を作る(PCとモバイルそれぞれ)
  3. カスタマイザーで設定する

となります。

ブログパーツがメインビジュアルで使えるようになったおかげで、私でも実現することができるように…♪

サイトによって調整が多少違ってくるとは思いますが、当ブログの例を以下記載していきます。

くうか

チャレンジしてみたい方は見て行ってください♪

1. トップメニューのブログパーツを作る

【リッチカラム】ブロックを利用したトップメニューを作っていきます。

さらにモバイルで表示を変えるため、【デバイスコントロール】という機能も使っていきます。

STEP
ブログパーツを新規作成
ブログパーツの新規作成
ブログパーツの新規作成
  1. タイトルを付ける
  2. 用途はチェックなしでOK
STEP
PC版リッチカラムブロックを追加

STEP1で作ったブログパーツに【リッチカラム】ブロックを追加する。

リッチカラムブロックを追加
リッチカラムブロックを追加

そしてカラムの比率を決めていく。

メインビジュアルにブログパーツを単に配置するだけでは、画面の中央に配置されてしまいます。

中央に配置したい場合は以下の設定はしなくても大丈夫です。

しかし今回のトップページでは、PCでメインビジュアルの背景画像の右側に写真を配置するため、メニューは左側に表示させたい

ということで、当ブログの場合は、PC:SPのカラムの横幅を

  • 30:70

の比率にする。

リッチカラム列数設定
リッチカラム列数設定

最大の列数を設定しておきます。

  • PC:3列
  • タブレット・モバイル:設定しなくて良い

1段目

テキストがいらない場合は1段目はなしでOK。

左カラム:30%で段落「SELECT MENU」の文字を入れる。
(カラム横幅:PC30 | タブレット空欄|モバイル空欄)

左カラム1段目
左カラム1段目

右カラム:70%で何も入れていないカラムを入れる。
(カラム横幅:PC70 | タブレット空欄|モバイル空欄)

右カラム1段目
右カラム1段目

2段目

左カラム:

15%で縦に3つメニュー画像を入れる。
( カラム横幅: PC15 | タブレット空欄|モバイル空欄)

15%でさらに縦に3つメニュー画像を入れる。
( カラム横幅: PC15 | タブレット空欄|モバイル空欄)

左カラム2段目
左カラム2段目

右カラム:70%で何も入れていないカラムを入れる。
(カラム横幅:PC70 | タブレット空欄|モバイル空欄)

右カラム2段目
右カラム2段目

最後にリッチカラムブロック全体を選択→【グループ化】し、【デバイスコントロール】をPCのみとする。

デバイスコントロールの設定
デバイスコントロールの設定
STEP
SP版リッチカラムブロックを追加

STEP2で作ったブロックの下に【リッチカラム】ブロックを追加する。

SP版リッチカラムブロックの列数設定
SP版リッチカラムブロックの列数設定

最大の列数を設定しておきます。

  • PC:設定しなくて良い
  • タブレット・モバイル:6列(画像を6つ横並びにするため)

1段目

カラム幅100%で【スペーサー】ブロックを適当なサイズで入れる。
(カラム横幅:PC空欄 | タブレット100|モバイル100)

スペーサーブロックを入れる
スペーサーブロックを入れる

2段目

【スペーサー】ブロックの次のカラムから、1つずつ画像をカラムに追加していく。

当ブログでは6つの画像を横並びにしたいため、6回追加しました。

最後にリッチカラムブロック全体を選択→【グループ化】し、【デバイスコントロール】をSPのみとする。

くうか

これでPCとモバイルでメニューの表示を分けることができました。

STEP
メニュー画像にページ内リンクを入れる

トップメニューでは、トップページ内の好きな項目へすぐさま移動できるように作ったものなので、各項目へ飛べるようにページ内リンク(アンカーリンク)を使用する。

※もちろん別ページへのリンクを使ってもOK

SWELLでのページ内リンクの使い方を以下記載。

あらかじめ飛ばしたい見出しの設定で【高度な設定】→【HTMLアンカー】にid(名前)を付けておく

ここでは「newpost」と入力。

HTMLアンカー
HTMLアンカー

STEP2で追加したメニュー画像にリンク(シャープ+id)を入れる

(例:#newpost)

アンカーリンクの設定
アンカーリンクの設定

以上で完了。

ページ内リンクのさらなる使い道を知りたい方は、さとしんさんの記事を読んでみてくださいね。

参考サイト → ブロックエディターのページ内リンクの作り方

2. メインビジュアルの背景画像を作る

写真だけを使う場合は特に作るという作業は必要ありませんが、圧縮はしておきましょう。

おすすめの圧縮サイト

パンダでおなじみ。画質もさほど落ちないと思う。

WebPに変換して圧縮することができる。

さらにモバイルで写真がきれいに表示されない場合は、画像のサイズを調整しましょう。

当ブログのメインビジュアルの画像サイズは、

  • PC:1600×900
  • モバイル:700×600

にしました。

参考サイト → SWELLの画像サイズまとめと設定方法|マニュオン

妹分のゆずいろ

画像がぼやける場合…サイズが合ってない?

参考サイトではスマホでのおすすめサイズは横幅600pxなのですが、タブレットも考慮して700pxで作ってみました。

くうか

スマホによってはもしかしたら上手く表示できてないかもしれないので、自分の環境でよく確認してね!

\画像はCanvaProで作ってます/

3. カスタマイザーで設定する

ブログパーツとメインビジュアル画像が用意できたら、カスタマイザーで設定します。

【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】

特筆する設定項目は以下の通り。

設定項目設定内容
メインビジュアルの表示内容画像
表示設定Scrollボタンを表示させるにチェック
メインビジュアルの高さ設定ウィンドウにフィットさせる
スライド画像1(PC用)PC用に用意した画像を設定
スライド画像1(SP用)SP用に用意した画像を設定
ブログパーツID1作成したブログパーツのIDのみ入力
くうか

メインビジュアルの設定は以上となります!
詳しい内容はお好みで決めてくださいね。

SWELLでメインビジュアルにメニューを入れる方法まとめ

SWELLでメインビジュアルにメニューを入れる方法のまとめ。

  1. トップメニューのブログパーツを作る
    1. リッチカラムブロックを利用する
    2. ページ内リンクを設定する
  2. メインビジュアルの背景画像を作る(PCとモバイルそれぞれ)
  3. カスタマイザーで設定する

ブログパーツを使えば、メインビジュアルにさらに機能を追加することができるので、気になったらぜひ色々なチャレンジをしてみてくださいね。

妹分のゆずいろ

画像サイズの調整が1番大変だった!

くうか

苦労したけどよく頑張ったね♪

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

フォロー待ってます

くうかんしんぷるライフ - にほんブログ村

楽天ROOMに愛用品を登録しています

楽天ROOM

ライフスタイルまとめメディアへ

SWELLでメインビジュアルをカスタム

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

\ おすすめのテーマ /

シンプルでスタイリッシュなデザインと高機能が備わったテーマ
快適すぎてびっくりしちゃうかも!?

この記事を書いた人

ゆるくミニマリストを目指している中1小5兄妹のママ。
整理収納アドバイザー2級、元システムエンジニア。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしてシンプルな空間にしたいと思っています。

コメント

コメントする

CAPTCHA


目次
トップへ
Contents
閉じる