当ページのリンクには広告が含まれています。 カスタマイズのやり方

SWELLで画像の上に文字を置く方法４つの方法

筆者はこんな人

34インチのウルトラワイドモニター

34インチのウルトラワイドモニターをフル活用！ 気分転換で動画を見始めたら止まらない笑

ばらもん。
ばらもん。
AFFINGER6とSWELLを使って、6つのブログを運営しているビール大好き自称鳥人間です！

特化ブログの数

本記事を読むメリット

SWELLの画像の上に文字を置く機能を使て、ブログの滞在時間や回遊率を上昇させることが期待できます

SWELLで画像の上に文字を置く４つの方法

結論から申し上げますと、SWELLで画像の上に文字を入れる方法は４パターンあります。

ココがポイント

  1. 画像上にテキストを追加
  2. SWELLのメインビジュアル機能
  3. SWELLのフルワイドブロック機能
  4. メディアとテキストブロックを使った文字入れ

私が上記の機能をフルに使って、『サッカースポーツ少年団』のLPデモページを作成してみました。

本記事を読むことで、上記のようなLPページを作成することが可能になります。

順番に解説をします。

画像上にテキストを追加

13-画像上のボックスメニューのカスタマイズ完成

SWELL機能で、『画像上にテキストを追加』があります。

私はカテゴリーリンクを作成するときに多用しています。

設定方法は下記。

step
1画像ブロックを挿入

1-SWELLで画像の上に文字を置く方法

step
2『画像上にテキストを追加』をクリック

2-画像ブロックを挿入して、画像上にテキストを追加を選択

step
3テキストを入力

5-SWELL書式を選択

テキストを入力出来たら、見やすいようにテキスト色を変更しておきます。

6-テキストカラーを変更

step
4ブロックを追加することも可能

3-画像にブロックを挿入可能になる

step
5段落ブロック以外にも、様々なブロックを追加可能

4-段落ブロックを挿入

step
6こんな感じ

7-テキストカラーを白っぽくしてみた

step
7ボックスメニューブロックを追加してみる

8-ボックスメニューを入れてカスタマイズ

step
8ボックスメニューブロックが挿入される

9-画像にボックスメニューを挿入

step
9テキストカラーを変更

10-ボックスメニューのテキストカラーを変更

step
10こんな感じ

11-ボックスメニューのテキスト入力

step
11豊富なアイコン

12-ボックスメニューのアイコンを変更

適切なアイコンに変更して、完成です。

13-画像上のボックスメニューのカスタマイズ完成

ボックスメニューブロックを挿入した例をご紹介しました。

他にも、画像に文字入れをしてSWELLボタンを置くだけでもいい感じになります。

 

↓タブで切り替え可能。




SWELLボタンを設置してもいい感じ

SWELLの画像上にテキストを追加の活用方法

リッチカラムと画像のアニメーションを組み合わせた方法です。

SWELLでアニメーションを付ける方法はSWELLでアニメーションを画像に付ける手順にまとめています。

画像上に文字入れをする方法

アニメーションは下記のような感じ。

画像の文字入れとアニメーションの組み合わせ


ご紹介したように、SWELLは画像上にさまざまなブロックを挿入することが可能です。

文字だけではなく、ボックスメニューブロックやSWELLボタンブロックを挿入することでブログ内の回遊率が上昇すると感じています。

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

1-SWELLのメインビジュアルの完成形

SWELLのメインビジュアル機能を使うことで、トップページの画像に文字をのせることができます。

上記は、私が運営しているゴルフ特化サイトの『ゴルフしる～』のメインビジュアル。
私はメインビジュアルを多用しているので、実際に見てみることをオススメします。

設定方法は下記。

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

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

step
2テキスト入力

3-メインビジュアルにテキスト設定

画像に応じたテキスト入力

  • メインテキスト
  • サブテキスト

step
3メインビジュアルの高さ設定

4-画像をフィットさせるのがオススメ

私は『ウインドウサイズにフィットさせる』に設定しています。

自分で高さ調整もできますが、パソコンやスマホで思った通りに表示が難しかったです。

step
4フィルター処理

5-画像効果を付けないとこんな感じ

SWELLのメインビジュアル機能には、下記の４つのフィルターが用意されています。

ポイント

  1. ブラー
  2. グレースケール
  3. ドット
  4. ブラシ

step
5ブラー効果

6-メインビジュアルのブラー効果

step
6グレースケール効果

7-メインビジュアルのグレースケール効果

step
7ドット効果

8-メインビジュアルのドット効果

step
8ブラシ効果

9-メインビジュアルのブラシ効果

step
9リンクやボタン設置も可能

10-メインビジュアルにはリンクやボタンを挿入可能

もっと詳しく

  • リンク先URLのみを入力した場合には、メインビジュアル自体がリンクボタンになります。
  • ボタンテキストを入力した場合には、リンクボタンが出現します。

step
10詳細設定

11-メインビジュアルのテキスト色や配置変更

テキストの位置は３種類。

  1. 左側
  2. 中心
  3. 右側

テキスト設定は下記。

  • テキストカラー
  • テキストシャドウカラー
  • ボタンカラー
  • ボタンタイプ（白抜きorボーダー）

step
11メインビジュアルは最大５枚セット可能

12-メインビジュアルは最大で5枚までセット可能

step
12メインビジュアルのスライダーのオススメ設定

13-メインビジュアルのスライダーオススメ設定

私のオススメ設定

  • スライドの切り替えアニメーション：フェード
  • スライドの表示中アニメーション：ズームイン
  • スライドの切り替わり速度：5000
  • スライドが切り替わる間隔：5000

スライドの切り替えが早すぎると、せっかく入力した文字を読み切ることができません。

テストをしながら試行錯誤した結果、『5000』がベストだと感じています。

SWELLのフルワイドブロック機能

0-フルワイドの画像の上に文字入れ完成形

SWELLのフルワイドブロックを使って、画像上に文字入れをしていきます。

私のLPページで、頻繁に使っているテンプレートになります。

設定方法は下記。

step
1フルワイドブロックを挿入

1-フルワイドブロックを選択

step
2コンテンツサイズを設定

2-サイト幅や上下のパディング量を設定

  • コンテンツサイズ＝サイト幅
  • 上下のパディング量＝40

step
3見出しを入力

3-見出しを設定

step
4テキストサイズをXLに変更

4-見出しの文字サイズを変更

step
5見出しのスタイルはセクション用を選択

5-見出しのスタイルはセクション用

step
6適宜、テキストを入力

6-見出しの下にテキストを追加

step
7テキストサイズを変更

7-必要に応じてテキストサイズを変更

step
8ボックスメニューブロックを挿入

8-ボックスメニューを挿入

step
9ボックスメニューが挿入される

9-ボックスメニューが挿入される

step
10リンクボックスを削除してひとつにする

10-ボックスメニューの数の変更

step
11ボックスメニューがひとつになる

11-ボックスメニューをひとつにする

step
12ボックスメニューのタイトルを入力

12-ボックスメニュー名を入力

step
13ボックスメニューのアイコンを変更

13-ボックスメニューアイコンを変更

step
14ボックスメニューのアイコンをメールにしてみた

14-ボックスメニューアイコンをメールにしてみた

step
15段落ブロックとボックスメニューブロックを選択

15-段落ブロックとボックスメニューブロックを選択

step
16段落ブロックとボックスメニューブロックをグループ化

16-ボックスメニューと段落ブロックをグループ化

step
17適宜、テキストを入力

17-段落ブロックを追加してテキスト入力

step
18テキストを中央寄せにする

18-テキストを中央に配置

step
19ソーシャルアイコンブロックを挿入

19-ソーシャルアイコンブロックを挿入

step
20Instagramを選択

20-インスタグラムを選択

step
21Instagramアイコンが挿入される

21-Instagramアイコンが挿入される

step
22Instagramアイコンを中央揃えにする

22-Instagramアイコンを中央揃えにする

step
23ソーシャルアイコンのスタイルをロゴのみにする

23-ソーシャルアイコンのスタイルをロゴの身に変更

step
24サイズを超特大にする

24-ソーシャルアイコンのサイズを特大に変更

step
25段落ブロックとソーシャルアイコンブロックを選択

25-段落ブロックとソーシャルアイコンブロックを選択

step
26段落ブロックとソーシャルアイコンブロックをグループ化

26-段落ブロックとソーシャルアイコンブロックをグループ化

step
27SWELLボタンを選択

27-SWELLボタンブロックを挿入

ソーシャルアイコンブロックの下には、SWELLボタンブロックを入れます。

step
28SWELLボタンが挿入される

28-SWELLボタンが挿入される

step
29SWELLボタンのスタイルを変更

29-SWELLボタンのスタイルやサイズを変更

ボタンサイズも『大』にしておきます。

step
30SWELLボタンのカラー設定

30-SWELLボタンのカラー設定

step
31フルワイドブロックに背景画像を挿入

31-フルワイドブロックに背景画像を挿入する

step
32オーバーレイカラーを設定

32-オーバーレイカラーを黒にして不透明度は10に設定

オススメ設定

  • オーバーレイカラー＝黒
  • 不透明度＝10

step
33こんな感じだけど、文字が見えづらい

33-オーバーレイカラーを黒にすると文字が見づらくなる

step
34フルワイドブロックのテキストカラーを白に設定

34-テキストカラーを白色に設定

step
35ボックスメニューのアイコンカラーを白に設定

35-ボックスメニューのアイコンカラーを白色に設定

step
36完成

36-フルワイドブロックを活用した画像上に文字入れ完成

 

SWELLのフルワイドブロックは、とってもオシャレな機能だと感じています。

トップページやLPページには欠かせない機能ですね。

 

メディアとテキストブロックを使う画像の上に文字入れ

0-メディアとテキストブロックを使った完成形

メディアとテキストブロックを使って、画像上に文字入れをする方法もあります。
LPページに使うと効果的だと感じている方法です。

方法を簡単に解説をします。

step
1フルワイドブロックを挿入

1-フルワイドブロックを選択

step
2コンテンツサイズを設定

2-サイト幅や上下のパディング量を設定

  • コンテンツサイズ＝サイト幅
  • 上下のパディング量＝40

step
3

1-メディアとテキストブロックの選択

step
4メディアを挿入

2-メディアを挿入

step
5メディアが挿入される

3-メディアが挿入される

step
6右カラムにテキストを入力

4-右側にテキスト入力

step
7段落ブロックの下にテーブルブロックを挿入

5-テーブルブロックの挿入

step
8テーブルブロックのカラム数と行数を設定

6-テーブルブロックのカラム数と行数の設定

step
9テーブルブロックのスタイルをシンプルに変更

7-テーブルスタイルをシンプルに設定

step
10テーブルブロックにテキストを入力

8-テーブルにテキスト入力

step
11テキストサイズを適宜、変更

9-テキストサイズを変更

step
12メディアとテキストブロックを選択

10-メディアとテキストブロックを選択

step
13メディアとテキストブロックのスタイルをブロークングリッドを選択

11-メディアとテキストブロックのスタイルをブロークングリッドを選択

step
14ブロークングリッドを選択すると画像上に文字が重なる

12-ブロークングリッドにするとこんな感じ

step
15右カラムのブロックをすべて選択してグループ化

13-テキストを選択してグループ化

step
16グループ化したブロックのスタイルを『深み』に変更

14-スタイルを深みに変更

step
17デザイン調整

15-フルワイドブロックのテキストカラーを白色、オーバーレイカラーを黒にして透明度は50

文字が見づらいので、下記の設定をします。

参考

  • テキストカラー＝白
  • オーバーレイカラー＝黒
  • オーバーレイカラーの不透明度＝50

step
18完成

16-メディアとテキストブロックを使った画像の上に文字入れ完成

以上が、メディアとテキストブロックを使った画像上に文字入れをする方法です。

テンプレートをひとつ用意しておけば、汎用性がかなり高いと感じています。

まとめ

ポイントをおさらいしておきます。

本記事のポイントまとめ

  • SWELLは画像の上に文字を入れる方法が多種多様で、オシャレなサイト作りに欠かせない機能だと感じているよ！

以上です。

-カスタマイズのやり方