【SWELL】ブロックおぼえがき その１

なぜわざわざブロック一覧の記事を書くか。

それは…

自分がSWELLのブロック機能を全部把握していないからです！！

なんでもノートに書いて覚える派なんです…

記事執筆中に「こういう装飾使いたい。あったっけ？」って一覧から探し出すのが面倒なので

これを機にビジュアルごと覚えたいと思います。押忍。

サイト型トップページのカスタマイズに使えそうなブロックの見出しには”★”印が付いています。

表示サンプルとして、結構な確率でSWELLの紹介をしているのですが、今のところ整備してあるのがSWELL関係のものしかないので必然的に出現率が高くなっております…ご了承ください。

SWELLブロック

リスト入りブロック

アコーディオン

デフォルトで開いた状態にする設定可能、開閉時のアイコン / 、 / 、 / も変更可能。

バナーリンク★

テキスト

サブテキスト

ブラー効果、影をつける、角の丸み、テキストカラー、オーバーレイカラー（＆不透明度）をカスタマイズ可能。

ボックスメニュー★

標準スタイル

テキストカラー、アイコンカラー、アイコンタイプ（SVG・画像）、列数の変更が可能。

塗りスタイル

テキストカラー、背景カラー、アイコンタイプ（SVG・画像）列数の変更が可能。

SWELLボタン★

ボタンサイズ（小・標準・大・カスタム）、カラー、ボタンの計測設定、アイコン設定、広告タグ設定が可能。

キャプションボックス

カラー設定、アイコン設定が可能。

リッチカラム★

デフォルト

ボーダー

シャドウ

横スクロール設定、列数、カラム間の余白、カラム横幅、余白設定（カスタムパディング）が可能。

説明リスト（DL）

デフォルト

デフォルトの説明リスト

デフォルトの説明リスト

項目のタイトル(DT)

項目の説明(DD)

左に線

左に線の説明リスト

左に線の説明リスト

項目のタイトル(DT)

項目の説明(DD)

横並び

横並びの説明リスト

横並びの説明リスト

項目のタイトル(DT)

項目の説明(DD)

縦並び表

縦並び表の説明リスト

縦並び表の説明リスト

項目のタイトル(DT)

項目の説明(DD)

FAQ

シンプル

シンプルのFAQ

シンプルのFAQ

Quo usque tandem abutere, Catilina, patientia nostra?

The quick brown fox jumps over the lazy dog.

線あり

線ありのFAQ

線ありのFAQ

Quo usque tandem abutere, Catilina, patientia nostra?

The quick brown fox jumps over the lazy dog.

ボックス

ボックスのFAQ

ボックスのFAQ

Quo usque tandem abutere, Catilina, patientia nostra?

The quick brown fox jumps over the lazy dog.

ストライプ

ストライプのFAQ

ストライプのFAQ

Quo usque tandem abutere, Catilina, patientia nostra?

The quick brown fox jumps over the lazy dog.

Q/Aアイコンの形（四角・角丸・丸）、Qアイコンの色＆Aアイコンの色（各6通り）の変更が可能。

フルワイド★

横幅、見出し（デフォルト・セクション用）、上下のPADDING量、テキストカラー、背景色、背景画像、上下の境界線の形状（斜線・円・波・ジグザグ）の変更が可能。

ステップ

デフォルト

ビッグ

スモール

「STEP」の文字、始まりの番号、STEP番号の形（円形・四角形）、ビッグの場合はSTEP番号の並び（縦並び・横並び）の変更が可能。
各ステップ項目の上書き設定（番号や文字の表示/非表示・カラーなど）も可能。

タブ★

ノーマル

ふきだし

下線

タブサイズ設定、背景色、スクロール設定、ボーダー設定が可能。

ABテスト

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

AブロックとBブロックの内容が、それぞれ設定した比率で表示されます。

こちらはBブロックです。Bには画像＋リンクボタンを挿入してあります。

広告タグ★

あらかじめ登録しておいた広告タグを呼び出すことができます。これは「バナー型」の広告です。

編集画面はこんな感じ

ふきだし

あらかじめ登録してあるふきだしを
呼び出すことができます

ふきだしの向きは左右変更可能

ふきだしの形も変更可能（発言・心の声）

ふきだしの線の有無も変えられます

アイコンの丸枠有無もワンクリックで変更♪

他に、ふきだしのカラー設定も可能です

ブログパーツ★

当ブログはSWELLを利用しています

WordPressテーマ SWELL

17,600円

国内シェア率No.1(※)のGPL100%テーマ。ブロックエディタに完全対応。 (※)2024年MANUON調べ

SWELL公式サイトへSWELLの特徴を見てみる

あらかじめ登録しておいたブログパーツを簡単に挿入することができます。

編集画面はこんな感じ

リンクリスト★

デフォルト

フォントサイズ、アイコン設定、アイコン位置、カラー設定が変更可能。

ボタン

角丸率、フォントサイズ、アイコン設定、アイコン位置、カラー設定が変更可能。

投稿リスト★

カード型

リスト型

リスト型（左右交互）

サムネイル型

テキスト型

記事の表示設定

関連記事

デフォルト

あわせて読みたい

【読んだ】本の話【読みたい】 小学生〜高校生くらいまではけっこう本を読んでいたのですが 大学生以降は本を読むことがめっきりなくなりました。 そんな中でも、比較的最近読んだ数少ない本（挫折も…

画像＆抜粋文の表示・非表示、キャプション＆ページタイトルの上書きが可能。

スリム

テキスト

スリム、テキストスタイルともにページタイトルの上書き、アイコン設定（全2種類）が可能。

制限エリア

ここに書いてある文章は実は制限エリアの文字です。ログイン状態、表示期間、ページで制限が可能です。

制限していないのであんまり意味がありません。

編集画面ではこのように見えています

制限エリアの設定

商品レビュー

WordPressテーマ SWELL

総合評価

( 5 )

メリット

• ブロックエディタに完全対応
• 直感で操作でき、おしゃれなデザインのブログがサクッと作成できる
• シェア率が高いので、解説サイトが多い

デメリット

• お値段がちょいとお高めかも
• クラシックエディタ（旧エディタ）を使用していた人はブロックエディタへの慣れが必要

RSS

投稿数、リストレイアウト（カード型・リスト型・テキスト型）、表示する情報、最大カラム数の変更が可能。

使いこなせたら便利な機能らしいけど
まだちょっとよくわからんな…

テキスト

「段落」と「見出し」は割愛します

リスト

• Lorem ipsum
• Quo usque tandem abutere, Catilina, patientia nostra?
• The quick brown fox jumps over the lazy dog.

スタイルの変更可能。

引用

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

https://ja.wikipedia.org/wiki/Lorem_ipsum

テキストと背景の色変更が可能。

コード

<B>太字にするよ</B>
<I>これは斜体になるよ</I>

テキストと背景の色変更が可能。

詳細

デフォルトで詳細説明を開いておくか設定可能、テキストと背景の色変更が可能。

整形済みテキスト

スペースや　改行を
そのまま表示してくれるブロックです
これは後ろに半角スペース2個  あり
これは後ろに全角スペース2個　　あり

分かりにくいですが、整形済みテキストの方は改行と半角スペース2個がそのまま反映されています。通常のテキストの方は半角スペース2個が1個の表示になっています。

テキストと背景の色変更が可能。

プルクオート

テキストと背景の色変更、枠線、角丸の変更が可能。

テーブル

デフォルト

ストライプ

シンプル

二重線

表の横幅固定、ヘッダー・フッターセクション、横スクロール設定、テキストと背景の色変更などが可能。

もうちょっと細かい設定もできるようになっていますが
ここでは割愛します

詩

祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
驕れる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひにはほろびぬ、ひとへに風の前の塵に同じ。

いろはにほへと　ちりぬるを
わかよたれそ　　つねならむ
うゐのおくやま　けふこえて
あさきゆめみし　ゑひもせす

整形済みテキストと似てる！

テキストと背景の色変更が可能。

クラシック

クラシックエディター機能が使えるようになっています。

編集画面はこんな感じ

今回はここまでです！

機能が思ったよりいっぱいありました…

使いこなせていないことがわかったわね

その2へつづく！

あわせて読みたい

【SWELL】ブロックおぼえがき その２ 前回から引き続きまとめていきます！ サイト型トップページのカスタマイズに使えそうなブロックの見出しには”★”印が付いています。 メディア 画像 デフォルト 角丸 枠あ…