SWELLでできること！高度な独自ブロック エディタ活用サンプル集！
今回は、SWELLのエディタがどれくらい自由で、いろいろなことができるのかをお分かりいただくために、SWELLの高度な「独自ブロック」をフル活用して、サンプルを作成してみました。
こんな面白い波型の背景も、CSSや画像を一切使わずに、独自ブロック機能のみで作成しています！
SWELLの自由奔放さを満喫いただくために、このページではサイドバーを外しました！できればPCでご覧ください。
SWELLの世界を
見てみよう！
＼ 詳しく見てみる ／
SWELLホームページ：swell-theme.com
画像付きH2見出し
こんな面白いH2見出しも作れるよ！
こちらは「フルワイド」というSWELLの独自ブロックを使って作ったH2見出しです。背景画像がロールします（残念ながらスマホでは動きません！）。
見出しだけでなく、普通の段落ブロックなど、なんでも入れることができます。
もちろんすべて、CSSなんて使っていません。SWELLならクリック１つでできます！
⇩下のブロックには、画像に「パララック効果」を付けてみました。背景がゆっくり動いて奥行きが感じられるようになります。
普通の「段落」ブロックを入れて使うこともできるよ
SWELLなら自由自在
＼参考リンク／
SWELL記事：SWELLフルワイドブロック解説記事（動画あり）
＼ 詳しく見てみる ／
SWELLホームページ：swell-theme.com
画像装飾
「画像ブロック」は一般ブロックですが、SWELL独自のカスタマイズが加わって、さらに機能が強化されました。
サンプルを見てみましょう！
これは装飾なしの基本画像。
普通の枠あり画像だよ
影付きや、
フォトフレーム風はもちろんのこと、
ブラウザ風や
デスクトップ風もできるよ。
ここまでユニークな装飾が、ボタン一つでできるのはSWELLだけ！
＼ 詳しく見てみる ／
SWELLホームページ：swell-theme.com
A/Bテスト ブロック
下のブロックは、「ABテスト」というSWELL独自のブロックです。
キャッチ広告や、ボタンの色の違いによる、クリック率の違いを計測するツールで、AブロックとBブロックがランダムに表示されます。プロが使うツールも、SWELLなら標準で付属！
A/Bテストはこちら⇩
自由を手に入れよう！
↑何度か再読み込みしてみてください。異なるブロックが表示されます。
＼ 詳しく見てみる ／
SWELLホームページ：swell-theme.com
PCとスマホの表示分け
SWELLには「PC/スマホ表示分け」機能があります。SWELLでは、この表示分け機能を「独自」ブロックだけでなく、「一般」ブロックにもすべて搭載しています。
段落、画像、ふきだし、表など、すべてのブロックで、ボタンを押すだけで「PCのみ表示」「スマホのみ表示」を簡単に切り替えられます（無選択の場合はPC/スマホ両方で表示）。
PCとスマホの表示を変えたいときに大変便利！
ブロックエディタ内で、ボタン一つで切り替えできるのはSWELLだけ！
このふきだしはPCでだけ表示されるように設定したよ！
スマホでは別のふきだしが表示されているんだ。
このふきだしはスマホでだけ表示されるように設定したよ！
PCでは別のふきだしが表示されているんだ。
＼ 詳しく見てみる ／
SWELLホームページ：swell-theme.com
アコーディオン
これは「アコーディオン」というSWELLの独自ブロックです。
一部の読者にのみ必要で、他の読者には必要のない情報を隠すことができます。右側のボタンを押して展開することで、必要な時だけ情報を開けます。
＼ 詳しく見てみる ／
SWELLホームページ：swell-theme.com
バナーリンク
こちらは「バナーリンク」ブロックです。迫力のある、記事幅いっぱいのリンクを作成できます。上にマウスを乗せると画像が動きます（PCのみ）。
＼ 参考リンク／
SWELL記事：画像編集の必要なし！便利なカスタムバナー機能の使い方
＼ 詳しく見てみる ／
SWELLホームページ：swell-theme.com
タブ ブロック
ここでは、「タブ」ブロックというSWELLの独自ブロックを使ってみたよ！
「カテゴリー」や「トピック」ごとに必要な項目を表示できるよ。大量の情報をすごくすっきり表示できてユーザーエクスペリエンスも上がりますね！
もちろんSWELLなら編集中も実際の表示と同じようにビジュアル表示で書けるんです。
タブ１の中身だよ
タブ１には、SWELLの「投稿リスト」ブロックを使って、記事を「カード型」に並べてみたよ。
PCでは３列並べてるよ。スマホでは2列にするか、１列にするかを選べるんだ。
＼ 参考リンク ／
＼ 詳しく見てみる ／
SWELLホームページ：swell-theme.com
フルワイド見本集
「フルワイド」というSWELL独自の機能をご覧ください。
大胆な配置が自由自在にできますよ！
こんなふうに！（残念ながらスマホでは背景が動きませんが）
＼ 参考リンク ／
＼ 詳しく見てみる ／
SWELLホームページ：swell-theme.com
SWELLを手にした人だけが
本当の自由を
手に入れられる
本当の自由って
こういうことなんだ
何でもできるって
こういうことなんだ
もう不自由さに
縛られない
この躍動感
大胆に表現しよう！
できないことなんて
何もない
広がる
無限に
新しい未来へ
今すぐ
SWELLの
自由な世界を
手に入れよう
＼ ブロックエディタが大評判！ ／
SWELLホームページ：swell-theme.com