SWELLでメインビジュアルにメニューやアニメーションを入れて個性を出そう

当ページのリンクには広告が含まれています。
SWELLメインビジュアル

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

写真等、画像を入れるだけならすぐに設定することができますが、どうせなら人と違うデザインにしてみたいと思いませんか?

  • メインビジュアルにメニューを入れる
  • メインビジュアルに動きを付ける

以上のことをプラグインやCanvaを使って作っているので、プログラミングがわからない方でもできますよ。

くうか

私のメインブログのメインビジュアルの設定方法を、わかりやすく解説していきます。

この記事はこんな人におすすめ
  • くうかんしんぷるライフのメインビジュアルの設定方法を知りたい
  • メインビジュアルにブログパーツを使う方法を知りたい
  • トップページ内に飛べるページ内リンクの使い方を知りたい
  • アニメーションの使い方を知りたい

\ こちらもおすすめ /

\ 今すぐ公式サイトへ行く /

目次

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

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

くうか

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

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

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

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

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

詳しい設定内容はSWELL公式マニュアルが1番!なので、この記事ではブログパーツでメニューを入れる方法や、アニメーションを追加する方法を解説していきます。

くうか

ブログパーツを使うと、凝ったメインビジュアルにすることができますよ。

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

私のメインブログ「くうかんしんぷるライフ」のメインビジュアルがこちら。

メインビジュアル(PCとモバイル)
メインビジュアル全体像

かすれた線が右から左へ引かれるというアニメーション付き(Canva使用)。

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

メインビジュアルにリンクを入れる
各項目へさりげなくリンク

さりげなく飾りのようで実はリンクという、でも実は飾りなイメージで置いています。(え?)

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

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

くうか

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

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

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

  1. トップメニューをブログパーツで作る
    1. リッチカラムブロックを利用する
    2. ページ内リンクを設定する
  2. メインビジュアルの背景動画をCanvaで作る
  3. カスタマイザーでメインビジュアルの設定をおこなう

となります。

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

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

くうか

チャレンジしてみたい方はぜひ最後まで読んでみてくださいね。

①トップメニューをブログパーツで作る

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

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

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

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

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

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

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

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

しかし今回のトップページでは、メニューは左側に表示させたいので設定していきます。

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

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

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

  • 30:30:40

の比率にする。(合計100になるように)

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

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

リッチカラムブロック全体を選択した状態で、列数を入力していきます。

  • PC:3列
  • タブレット・スマホ:設定しなくて良い

左カラム:

30%で縦に3つのメニュー画像を入れる。
( カラム横幅: PC30 | タブレット空欄|スマホ空欄)

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

変化を出したいので、画像を左寄せにしたり右寄せにしたり、サイズを変えたりしてみました。

真ん中カラム:30%で何も入れていないカラムを入れる。
(カラム横幅:PC30 | タブレット空欄|スマホ空欄)

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

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

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

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

デバイスコントロールの設定
デバイスコントロールの設定
STEP
スマホ表示用リッチカラムブロックを追加

スマホ表示用カラムのイメージはこのようになります。

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

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

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

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

  • PC:設定しなくて良い
  • タブレット・スマホ:3列(画像を3つ横並びにするため)

1段目

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

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

スマホによっては下部のメニューの位置がずれるため、このスペーサーが実は大事。

スペーサーの高さは通常はpx値で入れるけど、ここではvh値で設定しました。%で表示してくれるらしく、vhの方が良さそうだと判断。(参考までに当ブログでは47VH)

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

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

2段目

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

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

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

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

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

これでPCとスマホでメニューの表示を分けることができました。

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

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

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

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

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

ここでは「category」と入力。

HTMLアンカーを入力
HTMLアンカー

STEP2で追加した、ブログパーツ内のメニュー画像にリンク(シャープ+id)を入れる

(例:#category)

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

以上で完了。

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

ブロックエディターのページ内リンクの作り方|WebNote+

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

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

アニメーション付き画像

シンプルにここだけ。

くうか

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

プラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」使用

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

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

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

くうかんしんぷるライフの設定
  • アニメーション:バウンスイン
  • 遅延:1秒
  • 速度:デフォルト

ヤモヲさんの記事にその他の設定まで詳しく書いてあります。

Blocks Animationでスクロールアニメーションをお手軽に|POINT OF VIEW

おまけ:過去のメインビジュアルの参考比率

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

Ver1:はじめてメインビジュアルを設定した

メインビジュアルver1(PC)
PC
メインビジュアルver1(SP)
モバイル

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

ver2:こちらは現在の1つ前のメインビジュアル

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

家のイラストに変更しました。

くうか

懐かしい。色々試してますね。

②メインビジュアルの背景動画をCanvaで作る(サイズ記載)

Canvaにて、かすれた線の部分のみアニメーションを付けました。

Canvaでアニメーションを付ける
Canva編集画面
アニメート設定
  • タイミング:5秒
  • ベーシック:ワイプ
  • アニメート:開始時
  • 速度(Pro版のみ):1番遅い
  • 向き:←

完成するとこうなります。

メインビジュアル

mp4で保存しました。

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

おすすめの圧縮サイト

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

TinyPNG

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

今回のメインビジュアルの動画サイズは、

  • 1600×900(PC・タブレット・スマホ共通)

にしました。

参考記事

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

くうか

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

スマホによってはもしかしたら上手く表示できてないかもしれないので、ご自身の環境でよく確認してください。

動画はCanvaProで作ってます

③カスタマイザーでメインビジュアルの設定をおこなう

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

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

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

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

動画を設定すると、その動画が延々とループされます。

私が作ったアニメーションは、ループされると何だか違和感を感じてしまったので、ループを止めるコードを入れてあります。

Code Snippetsプラグインで、以下の記事で参考にさせていただいたコードを追加しました。

SWELLのメインビジュアルの動画のループを停止するカスタマイズ|非公式SWELL TIPS

くうか

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

【まとめ】SWELLでメインビジュアルにメニューやアニメーションを入れてみよう

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

  1. トップメニューをブログパーツで作る
    1. リッチカラムブロックを利用する
    2. ページ内リンクを設定する
  2. メインビジュアルの背景動画をCanvaで作る
  3. カスタマイザーでメインビジュアルの設定をおこなう

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

くうか

画像サイズの調整が1番大変でしたが、お気に入りのメインビジュアルが完成しました。

\当ブログの利用テーマとレンタルサーバーはこちら/

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

コメント

コメントする

目次