なぜわざわざブロック一覧の記事を書くか。
それは…
自分がSWELLのブロック機能を全部把握していないからです!!
なんでもノートに書いて覚える派なんです…
記事執筆中に「こういう装飾使いたい。あったっけ?」って一覧から探し出すのが面倒なので
これを機にビジュアルごと覚えたいと思います。押忍。
表示サンプルとして、結構な確率でSWELLの紹介をしているのですが、今のところ整備してあるのがSWELL関係のものしかないので必然的に出現率が高くなっております…ご了承ください。
SWELLブロック
リスト入りブロック
- 外枠部分と
- リスト部分は
- 変更可能
アコーディオン
デフォルト
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
シンプル
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
囲い枠
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
メインカラー
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
デフォルトで開いた状態にする設定可能、開閉時のアイコン
/バナーリンク★
ブラー効果、影をつける、角の丸み、テキストカラー、オーバーレイカラー(&不透明度)をカスタマイズ可能。
ボックスメニュー★
標準スタイル
テキストカラー、アイコンカラー、アイコンタイプ(SVG・画像)、列数の変更が可能。
塗りスタイル
テキストカラー、背景カラー、アイコンタイプ(SVG・画像)列数の変更が可能。
SWELLボタン★
ボタンサイズ(小・標準・大・カスタム)、カラー、ボタンの計測設定、アイコン設定、広告タグ設定が可能。
キャプションボックス
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.
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.
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.
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.
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.
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.
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.
カラー設定、アイコン設定が可能。
リッチカラム★
デフォルト
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?
ボーダー
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?
シャドウ
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?
横スクロール設定、列数、カラム間の余白、カラム横幅、余白設定(カスタムパディング)が可能。
説明リスト(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.
Q/Aアイコンの形(四角・角丸・丸)、Qアイコンの色&Aアイコンの色(各6通り)の変更が可能。
フルワイド★
フルワイド(記事・サイト幅・フルワイド)でコンテンツの設置が可能。(これは記事幅)
横幅、見出し(デフォルト・セクション用)、上下のPADDING量、テキストカラー、背景色、背景画像、上下の境界線の形状(斜線・円・波・ジグザグ)の変更が可能。
ステップ
デフォルト
デフォルトのステップ
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
ビッグ
ビッグのステップ
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
スモール
スモールのステップ
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
「STEP」の文字、始まりの番号、STEP番号の形(円形・四角形)、ビッグの場合はSTEP番号の並び(縦並び・横並び)の変更が可能。
各ステップ項目の上書き設定(番号や文字の表示/非表示・カラーなど)も可能。
タブ★
ノーマル
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.
ふきだし
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.
下線
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.
タブサイズ設定、背景色、スクロール設定、ボーダー設定が可能。
ABテスト
AブロックとBブロックの内容が、それぞれ設定した比率で表示されます。
こちらはAブロックです。Aには広告ブロックを挿入してあります。
広告タグ★
あらかじめ登録しておいた広告タグを呼び出すことができます。これは「バナー型」の広告です。
編集画面はこんな感じ
ふきだし
あらかじめ登録してあるふきだしを
呼び出すことができます
ふきだしの向きは左右変更可能
ふきだしの形も変更可能(発言・心の声)
ふきだしの線の有無も変えられます
アイコンの丸枠有無もワンクリックで変更♪
他に、ふきだしのカラー設定も可能です
ブログパーツ★
当ブログはSWELLを利用しています
あらかじめ登録しておいたブログパーツを簡単に挿入することができます。
編集画面はこんな感じ
リンクリスト★
デフォルト
フォントサイズ、アイコン設定、アイコン位置、カラー設定が変更可能。
ボタン
角丸率、フォントサイズ、アイコン設定、アイコン位置、カラー設定が変更可能。
投稿リスト★
カード型
リスト型
リスト型(左右交互)
サムネイル型
テキスト型
記事の表示設定
関連記事
デフォルト
画像&抜粋文の表示・非表示、キャプション&ページタイトルの上書きが可能。
スリム
テキスト
スリム、テキストスタイルともにページタイトルの上書き、アイコン設定(全2種類)が可能。
制限エリア
ここに書いてある文章は実は制限エリアの文字です。ログイン状態、表示期間、ページで制限が可能です。
制限していないのであんまり意味がありません。
編集画面ではこのように見えています
制限エリアの設定
商品レビュー
- ブロックエディタに完全対応
- 直感で操作でき、おしゃれなデザインのブログがサクッと作成できる
- シェア率が高いので、解説サイトが多い
- お値段がちょいとお高めかも
- クラシックエディタ(旧エディタ)を使用していた人はブロックエディタへの慣れが必要
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>
テキストと背景の色変更が可能。
詳細
lorem ipsum(ロレム・イプサム、略してリプサム lipsum ともいう)とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
デフォルトで詳細説明を開いておくか設定可能、テキストと背景の色変更が可能。
整形済みテキスト
スペースや 改行を
そのまま表示してくれるブロックです
これは後ろに半角スペース2個 あり
これは後ろに全角スペース2個 あり
分かりにくいですが、整形済みテキストの方は改行と半角スペース2個がそのまま反映されています。通常のテキストの方は半角スペース2個が1個の表示になっています。
テキストと背景の色変更が可能。
プルクオート
テキストと背景の色変更、枠線、角丸の変更が可能。
テーブル
デフォルト
サンプル | これはサンプルの文章です |
サンプル | これはサンプルの文章です |
ストライプ
サンプル | これはサンプルの文章です |
サンプル | これはサンプルの文章です |
シンプル
サンプル | これはサンプルの文章です |
サンプル | これはサンプルの文章です |
二重線
サンプル | これはサンプルの文章です |
サンプル | これはサンプルの文章です |
表の横幅固定、ヘッダー・フッターセクション、横スクロール設定、テキストと背景の色変更などが可能。
もうちょっと細かい設定もできるようになっていますが
ここでは割愛します
詩
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
驕れる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひにはほろびぬ、ひとへに風の前の塵に同じ。
いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせす
整形済みテキストと似てる!
テキストと背景の色変更が可能。
クラシック
クラシックエディター機能が使えるようになっています。
編集画面はこんな感じ
今回はここまでです!
機能が思ったよりいっぱいありました…
使いこなせていないことがわかったわね
その2へつづく!
コメント