MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

SWELLでできること!高度な独自ブロック エディタ活用サンプル集!

今回は、SWELLのエディタがどれくらい自由で、いろいろなことができるのかをお分かりいただくために、SWELLの高度な「独自ブロック」をフル活用して、サンプルを作成してみました。

こんな面白い波型の背景も、CSSや画像を一切使わずに、独自ブロック機能のみで作成しています!

SWELLの自由奔放さを満喫いただくために、このページではサイドバーを外しました!できればPCでご覧ください。

SWELLの世界を
見てみよう!

目次

画像付きH2見出し

こんな面白いH2見出しも作れるよ!

こちらは「フルワイド」というSWELLの独自ブロックを使って作ったH2見出しです。背景画像がロールします(残念ながらスマホでは動きません!)。

見出しだけでなく、普通の段落ブロックなど、なんでも入れることができます。

もちろんすべて、CSSなんて使っていません。SWELLならクリック1つでできます!

⇩下のブロックには、画像に「パララック効果」を付けてみました。背景がゆっくり動いて奥行きが感じられるようになります。

普通の「段落」ブロックを入れて使うこともできるよ

SWELLなら自由自在

SWELLフルワイドブロック解説記事(動画あり)

画像装飾

「画像ブロック」は一般ブロックですが、SWELL独自のカスタマイズが加わって、さらに機能が強化されました。

サンプルを見てみましょう!

画像見本、装飾なし

これは装飾なしの基本画像。

画像見本、枠付き

普通の枠あり画像だよ

画像見本、影付き

影付きや、

画像見本、フォトフレーム

フォトフレーム風はもちろんのこと、

画像見本、ブラウザ風

ブラウザ風や

画像見本、デスクトップ風

デスクトップ風もできるよ。

ここまでユニークな装飾が、ボタン一つでできるのはSWELLだけ!

A/Bテスト ブロック

下のブロックは、「ABテスト」というSWELL独自のブロックです。

キャッチ広告や、ボタンの色の違いによる、クリック率の違いを計測するツールで、AブロックとBブロックがランダムに表示されます。プロが使うツールも、SWELLなら標準で付属!

A/Bテストはこちら⇩

自由を手に入れよう!

↑何度か再読み込みしてみてください。異なるブロックが表示されます。

SWELL A/Bテスト ブロック解説記事(動画あり)

PCとスマホの表示分け

SWELLには「PC/スマホ表示分け」機能があります。SWELLでは、この表示分け機能を「独自」ブロックだけでなく、「一般」ブロックにもすべて搭載しています。

段落、画像、ふきだし、表など、すべてのブロックで、ボタンを押すだけで「PCのみ表示」「スマホのみ表示」を簡単に切り替えられます(無選択の場合はPC/スマホ両方で表示)。

PCとスマホの表示を変えたいときに大変便利!

ブロックエディタ内で、ボタン一つで切り替えできるのはSWELLだけ

このふきだしはPCでだけ表示されるように設定したよ!
スマホでは別のふきだしが表示されているんだ。

このふきだしはスマホでだけ表示されるように設定したよ!
PCでは別のふきだしが表示されているんだ。

SWELL「デバイスコントロール」の解説記事

アコーディオン

これは「アコーディオン」というSWELLの独自ブロックです。

一部の読者にのみ必要で、他の読者には必要のない情報を隠すことができます。右側のボタンを押して展開することで、必要な時だけ情報を開けます。

SWELLアコーディオンブロック解説記事(動画あり)

バナーリンク

こちらは「バナーリンク」ブロックです。迫力のある、記事幅いっぱいのリンクを作成できます。上にマウスを乗せると画像が動きます(PCのみ)。

タブ ブロック

ここでは、「タブ」ブロックというSWELLの独自ブロックを使ってみたよ!

「カテゴリー」や「トピック」ごとに必要な項目を表示できるよ。大量の情報をすごくすっきり表示できてユーザーエクスペリエンスも上がりますね!

もちろんSWELLなら編集中も実際の表示と同じようにビジュアル表示で書けるんです。

タブ1の中身だよ

タブ1には、SWELLの「投稿リスト」ブロックを使って、記事を「カード型」に並べてみたよ。

PCでは3列並べてるよ。スマホでは2列にするか、1列にするかを選べるんだ。

SWELL投稿リストブロック解説記事(動画あり)

フルワイド見本集

フルワイド」というSWELL独自の機能をご覧ください。

大胆な配置が自由自在にできますよ!

こんなふうに!(残念ながらスマホでは背景が動きませんが)

SWELLフルワイドブロック解説記事(動画多数)

SWELLを手にした人だけが

本当の自由を

手に入れられる

本当の自由って

見本画像

こういうことなんだ

何でもできるって

見本画像

こういうことなんだ

もう不自由さに

縛られない

この躍動感

見本画像
見本画像

大胆に表現しよう!

できないことなんて

何もない

広がる

無限に

新しい未来へ

今すぐ

SWELLの

自由な世界を

手に入れよう

  • 完全ブロックエディタ対応で自由自在!
  • 直感的に操作できて簡単!
よかったらシェアしてね!
目次
閉じる