SWELL(スウェル)

【SWELLリッチカラム使い方】フルワイドで画像3列と下に大1列のレイアウト

 

 

ばらもん。
SWELLの『リッチカラムを使って画像をフルワイドで3列配置する方法』を教えて欲しい

 

上記のお悩みを解決します。

 

本記事の内容

  •  SWELLの『リッチカラム』の使い方について

こんな方におすすめ

  • リッチカラムの使い方を知りたい方
  • フルワイドで画像を3列並べたい方
  • インパクトのあるホームページを作成されたい方

 

それでは、本題に入ります。

 

筆者はこんな人

AFFINGER6とSWELLを使って、2つのブログを運営中。

AFFINGER6とSWELLのメリット・デメリットを理解している。

両テーマを同時に使っているからこそ発信できるリアルな声。

AFFINGER6とSWELLを徹底的に比較して、テーマ選びに悩まれている方へ手助けをすることが当ブログのコンセプト

 

『リッチカラム』の使い方

完成形は下記です。

 

 

作り方を解説していきます。

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

 

step
2
コンテンツ幅は『フルワイド』

 

step
3
見出しは削除しておく

見出しはあってもいいですが、画像をピチっと揃えたい場合には削除しておくことをオススメします。

 

step
4
リッチカラムブロックを選択

 

step
5
列数(パソコン)は3。余白はオール0

パソコンは3列表示にします。

スマホは1列に設定しています。
スマホは2列表示だと、ちょっとしんどいかなぁという印象。

 

カラム間の余白を0にすることで、画像をピチっと敷き詰めることができます。

 

step
6
コンテンツサイズはフルワイド。パディング量はオール0。

フルワイドブロックの設定は、コンテンツ横幅をフルワイドにしておきます。

上下のパディング量を0にしておくことで、画像をピチっと揃えることができます。

 

step
7
カラムを追加する場合①

リッチカラムのカラムを追加したいときは、いちばん左上のカラムにカーソルを置きます。

カーソルを置いたあとに、↑を2回押下することでカラム追加ボタンが現れます。

アプデで修正されていました!(2022/11/29確認)

 

ばらもん。
リッチカラムを使い始めた当初は、なかなかカラム追加できなくて焦りました笑

 

step
8
カラムを追加する場合②

画像3列を配置したあとに、下に画像大を1列並べるときにカラムがもう一つ必要になります。

ステップ8、9の手順を覚えておいてください。

 

step
9
画像を配置していく

画像の大きさは揃えておくとキレイに揃います。

私は、canvaを使って画像の大きさを揃えています。

 

step
10
画像の配置完了

 

step
11
第一段階完成

 

step
12
画像上にテキストを追加可能

画像上にテキストを追加可能です。

しかし、この機能を使うと画像にリンクを貼ることができなくなります。

リンクが必要な場合にはSWELLボタンでリンクを配置することをオススメします。

 

step
13
画像上に文字を入力

 

step
14
第二段階完成

 

step
15
1列のカラムを追加

ステップ7・8でご説明した方法で、3列カラムの下にカラムを1つ追加します。

カラム横幅(パソコン)を100%にします。

 

step
16
完成

1列のカラムに画像を追加して完成です。

 

step
17
サイドバーを非表示

サイドバーを表示している場合は、非表示にしておきます。

 

まとめ

 

ポイントをまとめます。

ポイント

SWELLのリッチカラムを使うことで、画像3列とその下に1列の画像をフルワイドでレイアウト可能

操作性が良く、直感的に作業が可能

 

私が運営しているもうひとつのブログ『ぶろぐしる~』のトップページでも、画像フルワイドは多用しています。

さらに、カバーブロックを組み合わせて動画も混ぜ込んでいます。

 

SWELLならやりたいことが簡単に実現できると感じている今日このごろです。以上です。

SWELLの初期設定完了までを画像多めでまとめてみました。

\SWELLで快適なブログ執筆作業に取り組んでみる/
【SWELL導入手順】ポイントと注意点を画像多めでくわしく解説

 

\AFFINGER6とSWELLを徹底比較中!/

\AFFINGER6とSWELLで悩まれている方へ!/

 

私は2つのブログでAFFINGER6とSWELLを同時に使っています!

  • 当ブログ(AFFINGER6)
  • 雑記ブログ(SWELL)

 

AFFINGER6とSWELLを同時に使っている私は、『SWELL』をオススメします。

 

ポイント

デザインや操作性を求めるなら→『SWELL』

カスタマイズやアフィリエイトを追求するなら→『AFFINGER6』

 

AFFINGER6かSWELLかどちらを有料テーマ選びで悩まれていませんか?

両テーマを同時に使っている私が、AFFINGER6とSWELLを徹底的に比較しました。

下記記事をご覧ください。

さらに詳しく

 

\AFFINGER6&SWELLを同時に使っている私がオススメするテーマ/

SWELLならやりたかったことができるはず

SWELLのデモサイトを見てみる

/サイト作りの参考になります\

 

\まだのひと!/

アフィリエイトブログを考えている方は、A8.netに登録をしておいて損はないと考えています。
A8.net は、登録無料の大手ASPです。
A8.net自体もアフィリエイトできるのでメリットありありだと感じています。(成果報酬は500円/件)

【エックスサーバーセルフバック】損せずにブログを始める注意点に必見情報をまとめました。

当ブログで頻繁に書いていることですが、私は『AFFINGER6』よりも『SWELL』をオススメします。
テーマ選びに悩まれているなら『【AFFINGER6とSWELL】比較!この7つだけ抑えておけばOK!』に目を通すことであなたの『答え』が見つかるかもしれません。

 

↓にAFFINGER6の特典も付けていますがスルーでオッケーでーす(笑)

頑張って、特典作ったんですがね・・・涙。

 

当ブログ限定特典!

\ドメインパワー=6.4なのに?!/

ばらもん。
検索12位→1位へアップさせたリライト手順を大公開!

 

こんなことが分かるよ!

1位を実際に取った『検索クエリ(ジャンルは食品宅配で、A8.netに広告があります。)(月間検索ボリューム500~1000&競合性=低)』・・・2023年2月時点は『3位』(だいぶ順位が下がってきました。)

クリック率上昇が見込めるタイトルの付け方

SEO効果が期待できる記事の書き方

キーワード選定方法

 

検索1位を取って変わったこと(古い情報で申し訳ございません・・・。)

平均CTR=46.3%=約2人に1人はクリック(2021.4-9月平均実績)

ページ単体で1168PV/月を達成(2021.3月実績)

アドセンス収益アップ

 

過去6か月間の実績

 

一般的に検索1位の平均CTRは、『32~35%』と言われている中で驚異の『46.3%』を記録しています。(6ヶ月平均でここまで高いクリック率は少ないのではないでしょうか。)

 

ばらもん。
タイトルの付け方も我ながら上手だと自負します。

 

 

1ページ目に表示されても、タイトルの付け方が悪いとクリック率は低いです!もったいないです!

 

 

特典では、クリック率上昇が見込めるタイトル付け方のコツも大公開しています!

 

1位を取った検索クエリは、本来は他人には教えたくない宝物です。

なぜか?

ポイント

ドメインパワー6.4が取った1位ですよ?笑
あなたが奪おうと思えば、1位を奪えちゃうクエリです。

ジャンルは食品宅配系です。(兄弟ブログの『ぶろぐしる~』で公開している記事になります)

※2023年2月にクエリを調べたところ、競合が増えてきています。

 

 

宝箱に大事にしまうことはヤメました。
アフィリエイトを始める方の参考になれば良いと考え、私は公開します。

食品宅配系の特化ブログに持って来いの検索クエリであると感じています。

 

ネットに出回っているAFFINGER6の特典は、実に様々です。

 

特典の数だけで目を引こうとしている方も多く拝見します。
しかし、よーっく考えてみてください。

 

ココがポイント

『量よりも質が大切』ではないでしょうか?

 

特典記事には、門外不出の情報がたくさん詰まっています。

 

\当ブログ限定特典付き!/

AFFINGER6(特典付き)を手に入れる

 

ポイント

公式からも期間限定特典『SUGOI MOKUJI(すごいもくじ) [LITE]』が付いてきます。

さすがAFFINGER6

30代男性

購買意欲をそそる装飾がとっても豊富!

ゴリゴリにカスタマイズして、他ブログとの差別化をすることができています!

凝り性のひとはハマりすぎに要注意です(笑)

 

\ プラグインまとめ買いでお得!39,800円(13,600円お得!)/

【まとめ買い】ACTION PACK3 - AFFINGER6EX版(特典付き)を手に入れる

EX版とは「AFFINGER6」の特別機能追加バージョン

 

 

-SWELL(スウェル)