♡育児が楽になるお役立ち情報まとめはココをクリック♡

【SWELL】メインビジュアル設定方法~自分好みにカスタマイズしよう~

しののアイコン画像しの

こんにちは♪
SWELL歴4ヶ月のしのです。

SWELLは初心者に優しく、簡単にちゃんとしたサイトを作り上げることが可能です。

そんなSWELLでは色々なパターンのメインビジュアルを設定することができます。

2020年4月に初めてワードプレスを知った私でも、簡単に自分の好きなようにカスタマイズできました。

ここでは、そんなSWELLのメインビジュアルの設定方法や種類について紹介していきたいと思います。

是非自分好みにカスタマイズしていってくださいね♪

\有料テーマならSWELLで間違いなし/

目次

SWELL メインビジュアルの設定方法

しののアイコン画像しの

まずは基本の設定方法から。

カスタマイズ

左上のカスタマイズをクリック。

SWELLメインビジュアル

トップページ⇒メインビジュアル

順番にクリック。

SWELLカスタマイズ

画像か動画を選ぶ

私は画像にしています♪

SWELLカスタマイズ
しののアイコン画像しの

動画でバーンと載せてるのもかっこいいですよね。

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

PC用とスマホ用のメインビジュアルは同じものを使うこともできますし、別の画像を使用することもできます。

サイズはカスタマイズで調整もできます。

しののアイコン画像しの

私はPCとスマホは別のサイズで作りました♪

このブログのメインビジュアルは以下のサイズです。

PC/3200×800
スマホ/3200×1200
「画像・動画サイズのまま」で設定しています。

数値で設定するこもと可能です。

SWELLカスタマイズ

サイズによっては同じ画像を使うとスマホでは小さくなりすぎたり見えにくくなったりもするので、スマホ用の表示確認を見ながら設定しましょう。

SWELLカスタマイズ

SWELL メインビジュアルをスライドさせる

SWELLでは、画像を2枚以上使ってスライドさせることもできます。(最大5枚)

スライドの動き方や速度も好みにカスタマイズ可能♡

SWELLカスタマイズ
しののアイコン画像しの

適当な写真を追加してみたバージョンはこちら。

フェード

スライド

しののアイコン画像しの

なんだかまた雰囲気が変わりますよね~。

ポメ子のアイコン画像ポメ子

かっこいい系のサイトだったら映えそう!

メインビジュアルにヘッダーを被せる

SWELLではヘッダーとメインビジュアルを別々でなく、被せて表示させることもできます。

ヘッダー→トップページでの特別設定

SWELLメインビジュアルカスタマイズ
しののアイコン画像しの

文字の色は黒・白から選べるよ。
ヘッダー&ロゴの配置もレイアウトでお好みの場所に♡

ポメ子のアイコン画像ポメ子

シンプルな写真なら映えそうだね。

メインビジュアルにテキストやボタンを設置する

設置した画像の上にテキストを載せることもできます。

また、ボタンやブログパーツを設置することも可能です。

トップページ→メインビジュアル

SWELLメインビジュアルカスタマイズ
しののアイコン画像しの

こちらもテキストの位置やカラー、ボタンカラーも選べます♪

SWELLのメインビジュアル例

それぞれの好みにカスタマイズできるだけに、出来上がるメインビジュアルの種類も様々。

実際にSWELLを使用している方々はどういったものを作っているか、いくつか載せていきますので参考にされてくださいね。

参照元:しゃちナスちゃんねる
しののアイコン画像しの

アイコンがメインビジュアルに入れられていて、誰のブログであるかわかりやすいですね。

ポメ子のアイコン画像ポメ子

アイコンやオリジナルマークなんかを入れるとブログにブランド力がつきそうだね♪

参照元:シンプリスト
しののアイコン画像しの

画面いっぱいに大きな画像を持ってきていて、さらに白の背景に白の文字でまさにシンプルなメインビジュアルとなっていますね。
ヘッダーロゴーは左上に配置されています。

参照元:りんごの奮闘BLOG
しののアイコン画像しの

「暮らしを整える」の文字が真ん中に合わせられていて、こちらもシンプルで素敵なデザインです。

参照元:Glasses perm
しののアイコン画像しの

かっこいいメインビジュアルですね。
こちらは記事スライダーを大きくとってメインビジュアルは細長く作られています。

参照元:リモートおとな親子
しののアイコン画像しの

メインビジュアルにヘッダーを被せておりデザイン性の高いトップページになっていますね。
文字がパッと目に入ってきてどういったブログかすぐにわかります。

ぴよ子のアイコン画像ぴよ子

ボタンも設置されていて、ブログの説明文に飛ぶことができるんだね。

メインビジュアルを使わないパターン

ちなみに、メインビジュアルを設定せずにヘッダーロゴだけで作っているブログもたくさんありますので一部紹介しますね。

参照元:LULU MAMA
参照元:Simply Happy
しののアイコン画像しの

メインビジュアルを設定しなくても、ヘッダーロゴでしっかりトップページは作れるんですね。

ポメ子のアイコン画像ポメ子

メインビジュアルを使うかどうかは好みだね!

当サイトからの購入特典

当サイトからSWELLを購入された方でご希望の場合は、メインビジュアルの作成をお手伝いさせていただきます。
(canva使用)

※当方プロではございませんので、あくまでお手伝いという形でご希望に添えない場合もあること・デザインのみで設定等は致しませんのでご了承ください

私の考えつく限りで、ご希望のサイズ・雰囲気・入れたい画像など擦り合わせの上作成致します。

しののアイコン画像しの

もちろん使用しなくても結構です♪
あくまで、初心者でメインビジュアルなんかを作るのも自信がないな…という方のお力になれればと思います。

特典条件

当サイトのリンクを踏んで購入された方。

購入後、お問い合わせページからご連絡ください。

SWELLで自分好みのトップページに

SWELLだと自分好みのトップページが簡単に作れます。

難しいコードやプラグインなんかいらないのは本当にありがたいですね♪

ちょっとここ変えたいな~という時も簡単に差し替えられるので、落ち着くまで色々お試ししてみるのもアリですよ!

しののアイコン画像しの

このブログのメインビジュアル、何代目かわかりません。

せっかく作ったブログ、好きなようにカスタマイズして大事に育てていきましょう♡

\有料テーマならSWELLで間違いなし/

SWELL
よかったらシェアしてね!

この記事を書いた人

5歳男の子と3歳双子の育児に奮闘中の30代ママです。
末っ子は自閉症スペクトラム!
双子育児や障害児育児についての記録やまとめを書いています♪

コメント

コメントする

CAPTCHA


目次
閉じる