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

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

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

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

妹分のゆずいろ

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

くうか

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

妹分のゆずいろ

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

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

くうか

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

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

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

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

くうか

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

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

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

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

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

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

くうか

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

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

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

メインビジュアル
メインビジュアル全体像

Canvaで作った背景画像に、

背景画像
背景画像

ブログパーツで、「各エリアへのリンク画像」・「サイトマップへのリンク画像(アニメーション付き)」を配置しています。

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

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

くうか

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

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

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

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

となります。

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

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

くうか

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

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

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

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

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

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

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

そしてカラムの比率を100%になるように決めていく。

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

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

しかし今回のトップページでは、メニューは左側に表示させたい

PC版カラムのイメージはこのようになります。

メインビジュアル内ブログパーツのカラム比率(PC)
カラムの比率(PC)

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

  • 20:40:40

の比率にする。

リッチカラム列数設定(PC)
リッチカラム列数設定(PC)

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

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

左カラム:

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

左カラム(PC)
左カラム(PC)

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

真ん中カラム(PC)
真ん中カラム(PC)

右カラム:40%でサイトマップ画像を入れ、左寄せにする。
(カラム横幅:PC40 | タブレット空欄|モバイル空欄)

右カラム(PC)
右カラム(PC)

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

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

SP版カラムのイメージはこのようになります。

メインビジュアル内ブログパーツのカラム比率(SP)
カラム比率(SP)

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

リッチカラム列数設定(SP)
リッチカラム列数設定(SP)

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

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

1段目

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

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

右カラム:横幅50%でサイトマップ画像を入れて、右寄せする。
(カラム横幅:PC空欄 | タブレット50|モバイル50)

サイトマップ画像を入れる
サイトマップ画像を入れる

2段目

横幅は指定せず、メニュー画像を追加していく。

メニュー画像を6つ並べる
メニュー画像を6つ並べる

当ブログでは6つの画像を横並びにしました。

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

デバイスコントロールの設定
デバイスコントロールの設定
くうか

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

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

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

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

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

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

ここでは「newpost」と入力。

HTMLアンカー
HTMLアンカー

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

(例:#newpost)

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

以上で完了。

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

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

STEP
画像にアニメーションを追加する

今回は、サイトマップへと飛べるリンク画像にアニメーションを入れてみました。

アニメーション付き画像

シンプルにここだけ。

くうか

その方が強調されるかな?という狙い。

Blocks Animation: CSS Animations for Gutenberg Blocks」というプラグインを使っています。

インストールすると、投稿の編集画面で以下のような設定項目が追加されます。

アニメーションの設定
アニメーションの設定

英語なので正直「!?」と思ってしまいましたが…

どのアニメーション(Animation)にするかと、発動までの遅延時間(Delay)を設定すればOKなようです。

ヤモヲさんの記事に詳しく書いてあるので、気になったら読んでみてくださいね。

参考サイト → Blocks Animationでスクロールアニメーションをお手軽に|POINT OF VIEW

過去のメインビジュアルの参考比率

過去に採用したメインビジュアルのカラム比率を、参考までに紹介します。

メインビジュアルver2(PC)
メインビジュアルver2(PC)
メインビジュアルver2(SP)
メインビジュアルver2(SP)

写真の部分はメインビジュアルの背景画像です。

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

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

おすすめの圧縮サイト

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

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

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

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

  • PC:1600×900
  • スマホ・タブレット:960×600

にしました。

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

妹分のゆずいろ

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

くうか

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

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

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

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

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

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

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

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

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

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

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

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

妹分のゆずいろ

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

くうか

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

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

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

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

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

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

コメント

コメントする

CAPTCHA


目次