WordPressテーマSWELLでは、サイトやブログのファーストビューを飾る「メインビジュアル」を設定することができます。
写真等、画像を入れるだけならすぐに設定することができますが、どうせなら人と違うデザインにしてみたいと思いませんか?
- メインビジュアルにメニューを入れる
- メインビジュアルに動きを付ける
以上のことをプラグインやCanvaを使って作っているので、プログラミングがわからない方でもできますよ。
![](https://hitamukidesign.blog/wp-content/uploads/ico-point.png)
私のメインブログのメインビジュアルの設定方法を、わかりやすく解説していきます。
- くうかんしんぷるライフのメインビジュアルの設定方法を知りたい
- メインビジュアルにブログパーツを使う方法を知りたい
- トップページ内に飛べるページ内リンクの使い方を知りたい
- アニメーションの使い方を知りたい
\ こちらもおすすめ /
\ 今すぐ公式サイトへ行く /
SWELLのメインビジュアルの機能
メインビジュアルとは公式サイトの設定方法にも書いてある通り、トップページを開いた時に最初に目に飛んでくるエリアのことです。
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
サイトの個性が出せるエリアですね。
SWELLのメインビジュアルには、
- 画像1枚を表示
- 画像複数枚をスライド表示
- 動画
を、入れていくことができます。
通常の設定では、任意のテキストを表示させたり、ボタンでリンクを追加することが可能です。
詳しい設定内容はSWELL公式マニュアルが1番!なので、この記事ではブログパーツでメニューを入れる方法や、アニメーションを追加する方法を解説していきます。
![](https://hitamukidesign.blog/wp-content/uploads/ico-point.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-point.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-point.png)
ブログパーツを使うと、凝ったメインビジュアルにすることができますよ。
SWELLでメインビジュアルにメニューやアニメーションを入れる方法
私のメインブログ「くうかんしんぷるライフ」のメインビジュアルがこちら。
![メインビジュアル(PCとモバイル)](https://hitamukidesign.blog/wp-content/uploads/swellmain-complete.jpg)
![メインビジュアル(PCとモバイル)](https://hitamukidesign.blog/wp-content/uploads/swellmain-complete.jpg)
かすれた線が右から左へ引かれるというアニメーション付き(Canva使用)。
SWELL独自ブロックのブログパーツを使って、「各エリアへのリンク画像」・「サイトマップへのリンク画像(アニメーション付き)」を配置しています。
![メインビジュアルにリンクを入れる](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-link.jpg)
![メインビジュアルにリンクを入れる](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-link.jpg)
さりげなく飾りのようで実はリンクという、でも実は飾りなイメージで置いています。(え?)
メインビジュアルは、サイトのファーストビュー。
個性を出せる部分ではあるのですが、ユーザーに必ずスクロールさせてしまうという点がずっと気になっていまして…
![](https://hitamukidesign.blog/wp-content/uploads/ico-hatena.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-hatena.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-hatena.png)
ファーストビューで見たいエリアに飛べるようにしたらどうかな?
と考え、トップページの各エリアに飛ぶことができるトップメニューを入れてみました。
では実際にそれをどう実現しているかというと、
- トップメニューをブログパーツで作る
- リッチカラムブロックを利用する
- ページ内リンクを設定する
- メインビジュアルの背景動画をCanvaで作る
- カスタマイザーでメインビジュアルの設定をおこなう
となります。
ブログパーツがメインビジュアルで使えるようになったおかげで、私でも実現することができるように…♪
サイトによって調整が多少違ってくるとは思いますが、メインブログの例を以下解説していきます。
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
チャレンジしてみたい方はぜひ最後まで読んでみてくださいね。
①トップメニューをブログパーツで作る
【リッチカラム】ブロックを使用したトップメニューを作っていきます。
さらにPCとスマホで表示を変えるため、【デバイスコントロール】という機能も使っていきます。
![ブログパーツの新規作成](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-new.jpg)
![ブログパーツの新規作成](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-new.jpg)
- タイトルを付ける
- 用途はチェックなしでOK
STEP1で作ったブログパーツに【リッチカラム】ブロックを追加する。
![リッチカラムブロックを追加](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-newblock.jpg)
![リッチカラムブロックを追加](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-newblock.jpg)
そしてカラムの比率を100%になるように決めていく。
メインビジュアルにブログパーツを単に配置するだけでは、画面の中央に配置されてしまいます。
中央にメニューを配置したい場合は以下の設定はしなくても大丈夫です。
しかし今回のトップページでは、メニューは左側に表示させたいので設定していきます。
PC表示用カラムのイメージはこのようになります。
![メインビジュアル内ブログパーツのカラム比率(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-ratio.jpg)
![メインビジュアル内ブログパーツのカラム比率(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-ratio.jpg)
ということで、当ブログの場合は、PCのカラムの横幅を
- 30:30:40
の比率にする。(合計100になるように)
まずは最大の列数を設定しておきます。
![リッチカラム列数設定(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-set.jpg)
![リッチカラム列数設定(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-set.jpg)
リッチカラムブロック全体を選択した状態で、列数を入力していきます。
- PC:3列
- タブレット・スマホ:設定しなくて良い
左カラム:
30%で縦に3つのメニュー画像を入れる。
( カラム横幅: PC30 | タブレット空欄|スマホ空欄)
![左カラム(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-left.jpg)
![左カラム(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-left.jpg)
変化を出したいので、画像を左寄せにしたり右寄せにしたり、サイズを変えたりしてみました。
真ん中カラム:30%で何も入れていないカラムを入れる。
(カラム横幅:PC30 | タブレット空欄|スマホ空欄)
![真ん中カラム(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-center.jpg)
![真ん中カラム(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-center.jpg)
右カラム:40%でサイトマップ画像を入れ、左寄せにする。
(カラム横幅:PC40 | タブレット空欄|スマホ空欄)
![右カラム(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-right.jpg)
![右カラム(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-right.jpg)
最後にリッチカラムブロック全体を選択→【グループ化】し、【デバイスコントロール】をPCサイズのみとする。
![デバイスコントロールの設定](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-device.jpg)
![デバイスコントロールの設定](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-device.jpg)
スマホ表示用カラムのイメージはこのようになります。
![メインビジュアル内ブログパーツのカラム比率(SP)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-ratio.jpg)
![メインビジュアル内ブログパーツのカラム比率(SP)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-ratio.jpg)
STEP2で作ったリッチカラムブロックの下に、もう1つ【リッチカラム】ブロックを追加する。
![リッチカラム列数設定(SP)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-set.jpg)
![リッチカラム列数設定(SP)](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-set.jpg)
最大の列数を設定しておきます。
- PC:設定しなくて良い
- タブレット・スマホ:3列(画像を3つ横並びにするため)
1段目
左カラム:横幅60%で【スペーサー】ブロックを適当なサイズで入れる。
(カラム横幅:PC空欄 | タブレット60|スマホ60)
![スペーサーブロックを入れる](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-left.jpg)
![スペーサーブロックを入れる](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-left.jpg)
スマホによっては下部のメニューの位置がずれるため、このスペーサーが実は大事。
スペーサーの高さは通常はpx値で入れるけど、ここではvh値で設定しました。%で表示してくれるらしく、vhの方が良さそうだと判断。(参考までに当ブログでは47VH)
右カラム:横幅40%でサイトマップ画像を入れて、右寄せする。
(カラム横幅:PC空欄 | タブレット40|スマホ40)
![サイトマップ画像を入れる](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-right-1.jpg)
![サイトマップ画像を入れる](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-pc-right-1.jpg)
2段目
横幅は指定せず、各カラムにメニュー画像を追加していく。
![メニュー画像を3つ並べる](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-menu.jpg)
![メニュー画像を3つ並べる](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-menu.jpg)
当ブログでは3つの画像を横並びにしました。
最後にリッチカラムブロック全体を選択→【グループ化】し、【デバイスコントロール】をスマホサイズのみとする。
![デバイスコントロールの設定](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-device.jpg)
![デバイスコントロールの設定](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-sp-device.jpg)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
これでPCとスマホでメニューの表示を分けることができました。
トップメニューでは、トップページ内の好きな項目へすぐさま移動できるように作ったものなので、各項目へ飛べるようにページ内リンク(アンカーリンク)を使用する。
※もちろん別ページへのリンクを使ってもOK
SWELLでのページ内リンクの使い方を以下記載。
1あらかじめ飛ばしたいトップページ内の見出しの設定で【高度な設定】→【HTMLアンカー】にid(名前)を付けておく
ここでは「category」と入力。
![HTMLアンカーを入力](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-anchor.jpg)
![HTMLアンカーを入力](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-anchor.jpg)
2STEP2で追加した、ブログパーツ内のメニュー画像にリンク(シャープ+id)を入れる
(例:#category)
![アンカーリンクのURL設定](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-anchor-url.jpg)
![アンカーリンクのURL設定](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-anchor-url.jpg)
以上で完了。
ページ内リンクのさらなる使い道を知りたい方は、さとしんさんの記事を読んでみてくださいね。
今回は、サイトマップへと飛べるリンク画像にプラグインを使ってアニメーションを入れてみました。
![アニメーション付き画像](https://hitamukidesign.blog/wp-content/uploads/swellmain-tositemap.png)
![アニメーション付き画像](https://hitamukidesign.blog/wp-content/uploads/swellmain-tositemap.png)
シンプルにここだけ。
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
その方が強調されるかな?という狙い。
インストールすると、編集画面で以下のような設定項目が追加されます。
![アニメーションの設定](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-animeset.jpg)
![アニメーションの設定](https://hitamukidesign.blog/wp-content/uploads/swellmain-parts-animeset.jpg)
どのアニメーションにするかと、発動までの遅延時間を設定すればOKです。
- アニメーション:バウンスイン
- 遅延:1秒
- 速度:デフォルト
ヤモヲさんの記事にその他の設定まで詳しく書いてあります。
おまけ:過去のメインビジュアルの参考比率
過去に採用したメインビジュアルのカラム比率を、参考までに紹介します。
Ver1:はじめてメインビジュアルを設定した
![メインビジュアルver1(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-ratio-ver1-pc.jpg)
![メインビジュアルver1(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-ratio-ver1-pc.jpg)
![メインビジュアルver1(SP)](https://hitamukidesign.blog/wp-content/uploads/swellmain-ratio-ver1-sp.jpg)
![メインビジュアルver1(SP)](https://hitamukidesign.blog/wp-content/uploads/swellmain-ratio-ver1-sp.jpg)
写真の部分はメインビジュアルの背景画像です。
ver2:こちらは現在の1つ前のメインビジュアル
![メインビジュアルver2(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-ratio-ver2-pc.jpg)
![メインビジュアルver2(PC)](https://hitamukidesign.blog/wp-content/uploads/swellmain-ratio-ver2-pc.jpg)
![メインビジュアルver2(SP)](https://hitamukidesign.blog/wp-content/uploads/swellmain-ratio-ver2-sp.jpg)
![メインビジュアルver2(SP)](https://hitamukidesign.blog/wp-content/uploads/swellmain-ratio-ver2-sp.jpg)
家のイラストに変更しました。
![](https://hitamukidesign.blog/wp-content/uploads/ico-bikkuri.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-bikkuri.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-bikkuri.png)
懐かしい。色々試してますね。
②メインビジュアルの背景動画をCanvaで作る(サイズ記載)
Canvaにて、かすれた線の部分のみアニメーションを付けました。
![Canvaでアニメーションを付ける](https://hitamukidesign.blog/wp-content/uploads/swellmain-anime-canva.jpg)
![Canvaでアニメーションを付ける](https://hitamukidesign.blog/wp-content/uploads/swellmain-anime-canva.jpg)
- タイミング:5秒
- ベーシック:ワイプ
- アニメート:開始時
- 速度(Pro版のみ):1番遅い
- 向き:←
完成するとこうなります。
mp4で保存しました。
メインビジュアルに写真だけを使う場合は特に作るという作業は必要ありませんが、圧縮はしておきましょう。
パンダでおなじみ。画質もさほど落ちないと思う。
さらにスマホで写真がきれいに表示されない場合は、画像のサイズを調整しましょう。
今回のメインビジュアルの動画サイズは、
- 1600×900(PC・タブレット・スマホ共通)
にしました。
参考記事
![](https://hitamukidesign.blog/wp-content/uploads/ico-hatena.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-hatena.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-hatena.png)
画像がぼやける場合…サイズが合ってない?
スマホによってはもしかしたら上手く表示できてないかもしれないので、ご自身の環境でよく確認してください。
\ 動画はCanvaProで作ってます /
③カスタマイザーでメインビジュアルの設定をおこなう
ブログパーツとメインビジュアル動画(または画像)が用意できたら、カスタマイザーで設定します。
特筆する設定項目は以下の通り。
設定項目 | 設定内容 |
---|---|
メインビジュアルの表示内容 | 動画 |
表示設定 | Scrollボタンを表示させるにチェック |
メインビジュアルの高さ設定 | ウィンドウにフィットさせる |
動画1(PC) | 作成した動画を設定 |
ブログパーツID1 | 作成したブログパーツのIDのみ入力 |
動画を設定すると、その動画が延々とループされます。
私が作ったアニメーションは、ループされると何だか違和感を感じてしまったので、ループを止めるコードを入れてあります。
Code Snippetsプラグインで、以下の記事で参考にさせていただいたコードを追加しました。
SWELLのメインビジュアルの動画のループを停止するカスタマイズ|非公式SWELL TIPS
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
メインビジュアルの設定は以上となります。詳しい内容はお好みで決めてくださいね。
【まとめ】SWELLでメインビジュアルにメニューやアニメーションを入れてみよう
SWELLでメインビジュアルにメニューやアニメーションを入れる方法のまとめ。
- トップメニューをブログパーツで作る
- リッチカラムブロックを利用する
- ページ内リンクを設定する
- メインビジュアルの背景動画をCanvaで作る
- カスタマイザーでメインビジュアルの設定をおこなう
ブログパーツを使えば、メインビジュアルにさらに機能を追加することができるので、気になったらぜひ色々なチャレンジをしてみてくださいね。
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
![](https://hitamukidesign.blog/wp-content/uploads/ico-original.png)
画像サイズの調整が1番大変でしたが、お気に入りのメインビジュアルが完成しました。
\当ブログの利用テーマとレンタルサーバーはこちら/
コメント