【SWELL】リッチカラムの使い方6選!!

2021年9月、SWELL独自の新しいリッチカラムブロックが導入されました。

この【リッチカラムブロック】がすごく優秀で、今までのカラムブロックより使い勝手がぐんと良くなっています。

このページでは、具体的にリッチカラムブロックを使うとどんなことが出来るのか?お伝えできればと思います。

のこ

6選という微妙な数字はご愛敬♪

目次

【SWELL】独自のリッチカラムブロックとは

わたしのトップページで使っていた通常のカラムブロック

【SWELL】独自のリッチカラムブロックは、 カラムブロックをさらに使いやすくしたブロックです。

まず、カラムブロックとは画面を複数に分割できる機能をもつブロックのことです。

画像や投稿リスト・テキストなどいろんなものを配置できます。

【SWELL】独自のリッチカラムブロックでは、デバイスによって表示列数を設定することができます。

のこ

パソコンタブレットスマホで表示される列数を設定できるんです。

横幅の設定や余白設定もできるので、自分好みのカラムブロックをつくることができます。

【SWELL】独自のリッチカラムブロック基本的な使い方

STEP
リッチカラムブロックを追加しましょう

赤く囲ったリッチカラムをクリックしましょう。

STEP
追加設定でカラムの表示設定、余白の設定などをしましょう

スタイル

実際の表示はこんな感じ♪

タイトルイメージ
デフォルト
ボーダー
シャドウ

列数・余白の設定

  • PCだと1~8まで
  • タブレットだと1~8まで
  • モバイルだと1~6まで

カラム横幅の設定

【横幅の設定範囲】

  • PCだと10~100まで
  • タブレットだと10~100まで
  • モバイルだと10~100まで

それぞれのデバイスによっても横幅を設定できます。

ほんの少しの数字の違いでも、見え方が変わるので意識してみたい部分です。

のこ

合計が100になるようにすると、こんな感じで細かく設定できるよ

【SWELL】独自のリッチカラムブロックでできること

ブログトップページの新着記事のお知らせに使う①

左のカラムに最新の記事を入れて、右のカラムにはタブブロックで新着・人気記事を表示させるタイプ

のこ

タブをクリックするとモバイルの時の表示も見れますよ♪

追加設定

全体の設定

左側部分の設定

右側部分の設定

のこ

左の最新記事の横幅を少し小さく(45)してバランスとってます♪

ブログトップページの新着記事のお知らせに使う②

3カラムにしてタブを使わず、左から最新記事・新着記事・人気記事を表示させるタイプ

タブにせず、PC表示を三列にしてみました

追加設定

写真たちをアルバムのように飾るように使う①

追加設定

全体の設定

全体の設定

下の4枚の写真の部分の設定

写真たちをアルバムのように飾るように使う②

のこ

好きなようにレイアウトできますよ

追加設定

全体の設定

真ん中の列の設定

4枚配置して、真ん中2枚だけ写真を載せる

下の列の設定

2枚配置する

のこ

真ん中の列の設定は余白も調整したら、もっと素敵だな!

好きなところにピックアップバナー風に使う

追加設定

画像にリンクを貼りましょう

メディアとテキスト風に使う

注意事項として、左が画像のものしか作れません。

モバイル表示にしたときに、左が上になってしまうので・・・。

そこはメディアとテキストの方が優秀です。

でも、左が画像で良しとするなら、右側のテキスト部分をわりと好きなようにつくれます。

追加設定

全体の設定

右側の設定

まとめ

【SWELL】独自のリッチカラムブロックは通常のカラムブロックを細かく設定できるブロックです。

デバイスごとの表示数や、余白・カラムの横幅など設定できます。

今回は【SWELL】独自のリッチカラムブロック をどんな風に使ったらいいんだろう?とお悩みのみなさんの参考になるように、6つアイディアをご紹介しました。

皆さんの作りたい!気持ちのヒントになったら嬉しいです。

また、何か思いついたら、追加していきますね。

シンプルなのに、高機能 。

もっと気軽に、楽しく記事を書こう。

それを可能にするWordPressテーマです。

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

コメント

コメントする

CAPTCHA


目次
閉じる