ワードプレステーマ SWELLをお使いなら、覚えてほしいブロックはリッチカラムブロック♪
通常のカラムブロックがより細かく設定できるSWELL独自のブロックです。
トップページをサイト型にするときも大活躍なのでぜひ、使ってみてくださいね。
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
リッチカラムブロックを使いこなすと、あなたのブログがもっと見やすく・もっと使いやすくなりますよ。
- 通常カラムブロックとの違い
- リッチカラムブロックの使い方
- リッチカラムブロックの使用例
あなただけの使い方がみつかりますように・・
通常のカラムブロックとの違い
![](https://tumuginote.com/wp-content/uploads/2022/08/rich1.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rich1.png)
カラムブロックをこまか~く設定できるようになったのがリッチカラムブロック♪
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
カラムブロックとリッチカラムブロックの違いを表にしてみたよ
カラムブロック | リッチカラムブロック | |
---|---|---|
カラム数の設定(デスクトップ) | 1~6 | 1~8 |
カラム数の設定(タブレット) | 1~8 | |
カラム数の設定(モバイル) | 1~2 | 1~8 |
表示スタイル4種類 | 4種類 | 3種類 |
横スクロール | ||
余白設定 | ||
カラム横幅設定 | ||
カラム間の余白 |
細かく設定できることで、自由自在な表現ができるようになりました。
リッチカラムブロックでできること
リッチカラムブロックだからできる5つの設定を紹介します♪
- デバイスごとの列数
- カラム横幅
- 余白設定
- カラム間の余白
- 横スクロール
ポイント
設定をする内容によってリッチカラムブロックを選択する部分が異なります。
![](https://tumuginote.com/wp-content/uploads/2022/08/risentaku.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/risentaku.png)
画像の3つのブロックの選択があるので、詳細設定をするときは注意してくださいね。
- 段落
- カラム項目
- リッチカラム全体
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
ブロックの選択に注意しながら、ひとつづつ見ていきましょー♪
デバイスごとの列数
リッチカラムブロックではデバイスごとに列数の設定ができます。
デスクトップ・タブレット・モバイルそれぞれ1~8まで設定することができるんです。
たとえば、デスクトップでは8・タブレットでは4・モバイルでは2で設定してみます。
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
それぞれのタブで表示を確認してみてね
![](https://tumuginote.com/wp-content/uploads/2022/08/rc1-2.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc1-2.png)
デバイスごとにあなたが見せたいようにカラムを設定することができます。
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
こんな感じで簡単に設定できちゃうよ
カラム横幅
カラムの横幅を%で設定できるのもリッチカラムブロックのすごいところ!
全体が100%になるように、自由に設定できますよ。
15+30+20+35=100
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0005.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0005.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
見せたいコンテンツの大きさに合わせて設定することができます♪
余白設定
リッチカラムブロックではブロック周りの余白を設定できます。
設定なし
1
2
![](https://tumuginote.com/wp-content/uploads/2022/08/rc4.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc4.png)
設定あり
1
2
![](https://tumuginote.com/wp-content/uploads/2022/08/rc6.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc6.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc5.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc5.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
段落の周りの余白が設定できるよ
カラム間の余白
カラムとカラムの間の余白を設定できます。
設定なし
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0006.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0006.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc7.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc7.png)
設定あり
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0007.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0007.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc8.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc8.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
カラム間の余白が設定できちゃいます。
横スクロール
リッチカラムブロックは横スクロールできるようになりました。
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
この進化もうれしい♪
つむぎの好きなたべもの5選
1.いちご
2.プリン
3.フレンチトースト
4.ドーナツ
5.するめ
![](https://tumuginote.com/wp-content/uploads/2022/08/rc9.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc9.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
5つ目に笑っちゃった
リッチカラムブロックの使い方
リッチカラムブロックの基本的な使い方
![](https://tumuginote.com/wp-content/uploads/2022/08/rc10.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc10.png)
+をクリックしてリッチカラムブロックを呼び出します。
使用例
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
リッチカラムを使うとどんなことができるの?
リッチカラムの使用例を3つ紹介します♪
最新の記事など
ツムギノオトのトップページで使っています。
ピックアップバナー風
![チャコ](https://tumuginote.com/wp-content/uploads/2022/02/9.png)
![チャコ](https://tumuginote.com/wp-content/uploads/2022/02/9.png)
![ガオタ](https://tumuginote.com/wp-content/uploads/2022/02/1.png)
![ガオタ](https://tumuginote.com/wp-content/uploads/2022/02/1.png)
![スー](https://tumuginote.com/wp-content/uploads/2022/02/10.png)
![スー](https://tumuginote.com/wp-content/uploads/2022/02/10.png)
![ルノ](https://tumuginote.com/wp-content/uploads/2022/02/5.png)
![ルノ](https://tumuginote.com/wp-content/uploads/2022/02/5.png)
好きなところにピックアップバナー風に設置できます♪
PCだと4列、モバイルだと2列で設定してありますよ。
4コマ漫画風
タイトルが思いつかず、4コマ漫画風にしましたが、横スクロールをつかってオススメ情報を載せてもかわいい♪
SWELLのオススメポイント
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0001.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0001.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0002.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0002.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0003-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0003-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0003-2.png)
![](https://tumuginote.com/wp-content/uploads/2022/08/rc0003-2.png)
まとめ
SWELLをお使いならぜひ挑戦してほしいブロックがリッチカラムブロック。
慣れてくるとトップページにも、記事中にも使えてとっても便利なブロックです。
こまか~くいろいろ設定できるから、個性的な使い方もできますよ♪
![](https://tumuginote.com/wp-content/uploads/2022/02/ai20220131-300x169.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/ai20220131-300x169.png)
コメント