【SWELL操作】固有機能の使い方(バージョン: 2.6.4.2対応)

Cocoonのテーマでブログを開設して、しばらくしてからSWELLのテーマに変更しました。

テーマ変更をすると、記事の装飾関係などいくつか修正が必要になるので決断は早ければ早いほうがいいです。

ブロック編集

右サイドメニューにある「投稿」「ブロック」の切替ボタンの内、「ブロック」で編集できる機能の使い方。

共通

タイポグラフ

色

テイスト色と背景色の編集可能。

ブロック下の余白量

0em～6emまで設定可能。

高度な設定

HTMLアンカーと追加CSSクラスの設定可能。

見出しブロック

スタイル 「デフォルト」を選択した場合

デフォルトではこのように表示される。

「セクション用」を選択した場合

セクション用ではこのように表示される。

なお、 デフォルトとセクション用のどちらのデザインも、「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」から編集可能である。

段落ブロック

ボーダー設定

01

02

03

04

「SWELL設定」→「ボーダーセット」からカスタマイズ可能。

スタイル

ストライプ

方眼

角に折り目

スティッチ

かぎ括弧

かぎ括弧（大）

窪み

浮き出し

左に縦線

付箋

吹き出し

吹き出し２

グッド

バッド

インフォ

アナウンス

ペン

本

ポイント

チェック

バツ印

はてな

アラート

メモ

デバイス制限

選択中のデバイスのみで表示されるようになります。

「SPサイズ」、「PCサイズ」のOFF/ONが可能。

※SP＝スマートフォン、PC=パソコン

固有ブロックエディター

左サイドバーのブロック挿入ツールのブロックにあるSWELL固有のコマンドの使い方。

リスト入りグループ

標準設定ではこの形式が挿入されっる。

アコーディオン

ABテスト

50%の確率でAのテキストが表示されます。

バナーリンク

バナー設定

• バナーの高さ(Tab/PC) ※デバイス幅600px以上
• バナーの高さ(Mobile)　※デバイス幅600px未満
• 画像URL　　　　　　　※メディアから選択
• Altテキスト　　　　　 ※記入欄へ記入
• プラ―効果を付ける　　※OFF/ON
• 影を付ける　　　　　　※OFF/ON
• 画像の丸み　　　　　　※0～100

ボックスメニュー

SWELLボタン

スタイル［ノーマル/立体/キラッと/アウトライン/MOREボタン］。
ボタンカラー［赤/青/緑］。
ボタンサイズ［小/標準/大］
クリック率を計測する［OFF/ON］。
アイコンの位置［左/右］。
アイコンの種類［約500種類の中から選択可］。
広告タグの設定［計測用imgタグの画像URL/広告タグを直接入力］

キャプションボックス

リッチカラム

説明リスト

デフォルト

本文１

---

左に線

本文２

---

横並び

DTの横幅が1～12emで設定可能。（参考：12em）

---

縦並び表

FAQ

シンプル

FAQ設定でアイコンの形を３種類から選択できる。

線あり

FAQ設定でQとAアイコンの色を各７種 から選択できる。

ボックス

「構造化データを出力する」OFF/ONが設定可能。

検索結果にリッチリザルトを表示したい時にオンにしてください。

ストライプ

デバイス制限も設定可能。

フルワイド

コンテンツ設定

コンテンツの横幅をどこでそろえるか「記事、サイト幅、フルワイド」から選択

上下のpadding量（SP）「0,20,40,60,80」から選択

上下のpadding量（PC）「0,20,40,60,80」から選択

カラー設定

テキストカラーの選択

背景色の選択

背景画像の設定

背景画像を任意に選択可能。

背景色の不透明度の選択。（0～100）

上下の境界線の形状

上下の境界線の形状「斜線、円、波、ジグザグ」から選択可能。

「斜線」のみ、逆向きも設定あり。

上下の境界線の高さを選択。（0.0～5.0）

---

---

ステップ

デフォルト

ビッグ

スモール

タブ

広告タグ

「バナー型」「アフィリエイト型」「Amazon型」「ランキング型」の４種。

広告タグの選択欄あり。

詳細不明。

※ IDを指定してください。

ふきだし

ブログパーツ

ブログパーツを事前に作成しておく必要がある。

「通常のブログパーツ」「カテゴリー用」「タグ用」「CTA」「ブログパターン」が選択可能。

投稿リスト

表示設定

①Settingブロック

表示する投稿数を選択（1～24）

先頭固定記事を追加するのOFF/ON。

レイアウトを選択「カード型、リスト型、リスト型（左右交互）、サムネイル型、テキスト型」

投稿の表示順序「新着順、更新日時、人気順、ランダム」と「降順、昇順」の選択。

各種表示設定

• 公開日を表示する。（ON/OFF）
• 更新日を表示する。（OFF/ON)
• 著者を表示する。（OFF/ON)
• PV数を表示する。（OFF/ON)
• タイトルを表示する。※サムネイル型でのみ有効です。（OFF/ON)

カゴテリー表示位置「表示しない、サムネイル画像の上、日付の横」を選択。

タイトルのHTMLタグ「h2、h3、div」を選択。

最大カラム数（PC）※カード型またはサムネイル型のみで有効「1列、2列、3列」を選択。

最大カラム数（SP）※カード型またはサムネイル型のみで有効「1列、2列」を選択。

抜粋分の文字数（PC・SP）「各0,40,80,120,160」から選択。

MOREリンクの表示テキストを記入可能。

MOREリンクのURLを記入可能。

　※カテゴリーを指定した場合などは自動でURLを取得しますので、入力する必要はありません。

最後の投稿を非表示にするかどうか。

　PC表示で非表示にする。　OFF/ONを選択。

　SC表示で非表示にする。　OFF/ONを選択。

②Pickupブロック

投稿IDで絞り込む

投稿IDを直接記入する

除外する投稿IDを直接記入する

投稿タイプで絞り込む

「すべて、投稿、固定ページ」から選択

タクソノミー条件設定

以下の各タクソノミー条件に「１つでも、全てに」該当する投稿を表示する。を選択

カゴテリーから選択。

タグから選択。

任意のタクソノミーを直接入力する。

著者で絞り込む

著者を選択する。

関連記事

設定

テキストリンク表示する。「OFF/ON」

画像を非表示にする。「OFF/ON」

抜粋文を非表示する。「OFF/ON」

キャプションを記入。

リンク設定

新しいタブで開く。「OFF/ON]

リンクrel属性を記入。

制限エリア

ログイン状態で制限する。「OFF/ON]

ONにするとできること。

コンテンツを閲覧できるユーザー「非ログインユーザー、ログインユーザー」を選択。

非ログインユーザーを選択すると、「表示期間を制限する」のOFF/ON。

ログインユーザーを選択すると、

「管理者」のON/OFFを選択。

「編集者」のON/OFFを選択。

「投稿者」のON/OFFを選択。

「寄稿者」のON/OFFを選択。

「購読者」のON/OFFを選択。

表示期間を制限する。「OFF/ON」

開始：YYYY/MM/DDを選択。

終了：YYYY/MM/DDを選択。

RSS

　関連記事の外部サイトVer.とでもいいますか。

固有パターンエディター

左サイドバーのブロック挿入ツールのパターンにあるSWELL固有のコマンドの使い方。

［SWELL］汎用パターン

マイクロコピーとアイコン付きのボタン

＼ ぼたんだよ ／

枠線付きのリスト

薄い枠線と背景付きのリスト

ポイントグループ

［SWELL］テーブル

メリット・デメリット

メリット	デメリット
メリット メリット メリット メリット	デメリット デメリット デメリット デメリット

料金プラン比較表

	フリープラン 0円	プレミアムプラン 1000円/月
機能A
機能B
機能C	制限あり
機能D
機能E
機能F
	無料ではじめる	購入はこちら

商品比較表

	商品A	商品B	商品C
機能A	少し古い	普通	最新機能
機能B	非対応	制限付き	使用可
性能A	200[単位]	500[単位]	1000[単位]
性能B	500[単位]	1000[単位]	800[単位]
デザイン	普通	良い	微妙
価格	5,000円	10,000円	15,000円
	購入する	購入する	購入する

商品比較表2

	商品A	商品B	商品C
機能A	少し古い	普通	最新版
機能B	非対応	制限付き	使用可
性能A	200[単位]	500[単位]	1000[単位]
性能B	500[単位]	1000[単位]	800[単位]
デザイン	普通	良い	微妙
価格	5,000円	10,000円	15,000円
	購入する	購入する	購入する

商品比較表3

商品	特徴	価格	評価
商品A	xxxが便利 xxxもできる xxxはできない	1000円
商品B	xxxが便利 xxxもできる xxxはできない	1000円
商品C	xxxが便利 xxxもできる xxxはできない	1000円

［SWELL］ページ用

カード型のメディアと文章

ブロークン型のメディアと文章

フルワイドセクション

SWELL装飾

ブロックメニューバーに表示されるSWELL装飾の使い方。

書式をクリア

テキスト色、太字、マーカーなどの書式をすべてリセットできます。

ソースコード（DIR）

DIR

ソースコード（FILE）

FILE

背景色

背景色を設定できます。

注釈

文字を小さく表示できます。

カスタム１

CSSを使用して、波線や傍点など様々なカスタマイズが可能です。

「SWELL設定」→「エディター設定」→「カスタム書式」から設定可能です。

表示文字も「カスタム１」から変更可能です。

最大２つまで登録できます。

書式セット１

例

太字+マーカーなどの個別に設定した書式をワンクリックで装飾可能です。

「SWELL設定」→「エディター設定」→「カスタム書式」から設定可能です。

最大２つまで登録できます。

その他ダッシュボードでの編集

ふきだし

キャラクターを複数作成すれば、キャラクター同士がおしゃべりしているようなブログ記事が作れます。

「ふきだしセットを編集」機能により、事前に複数登録しておくことができるので、記事内容がバラエティ豊かになります。

キャラクターの作成は、似顔絵メーカーCHARAT（キャラット）で行っています。

キャラクター作成、アイコン作成、アバター作成など様々なビジュアルのキャラクターが作成できます。

その中から、「CHART MAE2」を使用しキャラクターを作成しました。

もちろん、商用利用可能です。

ただし、SNSやYouTube、ブログ等のアイコンなどには使用できますが、作成したデジタルデータの販売やNFT発行はできません。