SWELLでメインビジュアルを設定してブログをおしゃれに！【文字載せテクニック公開】

どうも、ダルメです。

SWELLではトップページのカスタマイズが簡単にできます。

SWELLではトップページに「メインビジュアル」というものを設定できるのをご存じでしょうか？

「メインビジュアル」とはトップページにあるイメージ画像みたいなものです

当ブログのメインビジュアル

上記の画像がメインビジュアルです。

メインビジュアルがあるとサイトのイメージがよくなりませんか？

この記事ではSWELLのメインビジュアルの設定方法と注意点について解説していきたいと思います。

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

SWELLのメインビジュアルは【カスタマイズ】→【トップページ】から設定することができます。

メインビジュアルの設定場所

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

ここではSWELLのメインビジュアルのかんたんな設定方法について解説していきます。

写真の上の文字を見やすくするテクニック

メインビジュアルで画像にテキストを乗せる際、テキストが読みずらくなってしまうことがあります。
これは画像と文字の視認性が確保できていな状態だからです。

視認性を確保できていない具体例

メインビジュアルの上の文字が見づらかったり、文字が読めない状態はよくある失敗です。

こういった場合、視認性を向上するには画像の色を少し変えてあげるのがカンタンです。

SWELLではメインビジュアルを簡単に編集することができるので、細かい編集の技術は必要ありません。

オーバーレイカラーで視認性を確保

文字と背景の色に差があるほど視認性は向上します。

SWELLのメインビジュアル機能「オーバーレイカラー」で視認性を確保しました。

これで文字が改善前よりも少し見やすくなったと思います。

オーバーレイカラーは【メインビジュアル】⇒【表示設定】⇒【オーバーレイカラー】で設定します。

そして文字色を「黒」→「白」に変更しています。

こうすることで背景と文字に差がついて視認性が向上⇒文字が読みやすくなります。

フィルターでさらに視認性を確保

背景をフィルター処理するとさらに文字が読みやすくなります。

特にイラストのような線がはっきりしている背景はブラー（ぼかし）をかけてあげると可読性が上がります。

フィルター処理は【メインビジュアル】⇒【表示設定】⇒【フィルター処理】で設定可能です。

SWELLではブラーを含めて以下のフィルター処理ができます。

メインビジュアル画像の上に文字を乗せる場合は可読性も意識してみましょう。

まとめ：メインビジュアルを設定しよう

SWELLでは簡単にメインビジュアルを設定できます。

SWELLの設定位置は以下のとおりです。

メインビジュアル設定場所：【カスタマイズ】⇒【トップページ】⇒【メインビジュアル】

そしてメインビジュアル設定時は可読性が重要です。

画像に乗っかっている文章を読みやすくするには以下の方法が有効です。

• 画像にオーバーレイカラーをいれる
• 画像をフィルター処理する
• 文字の色を変更する

編集で文字と画像の色の差を出してあげましょう。

メインビジュアルがあるとブログの印象がとても変わります。

SWELLではメインビジュアルを簡単に設定できるので是非お試しください。

では。