Menu
カテゴリー

【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ

悩む人

ブロックエディタでSWELL専用機能の使い方について詳しく教えてほしいです。

こういった悩みにお答えします。

本記事で解決できること

  • ブロックツールバーで使えるSWELL専用機能の使い方
  • WordPress標準搭載のブロックをカスタマイズしたブロックの使い方
  • SWELL専用のカスタムブロックの使い方

是非、最後までご覧ください。

はじめに

(アイコン)にカーソルを乗せてみて下さい。記事へのリンクが貼っている場合は画像が浮き上がります。

なし
アイコン
本記事の内容

SWELLのブロックエディタの使い方【ブロックツールバー】

ブロックツールバーとは

ブロックエディタでブロック編集時に表示されるのがブロックツールバーです。

ブロックツールバーを拡張する

(SWELL設定)を選択すると、「ブロックツールバーの表示設定」が開きます。

既に拡張はされていますが、以下が非表示になっています。

  • テキスト色
  • 背景色

チェックを付けると追加されます。

ブロックツールバーの機能を解説【SWELL専用機能に絞って紹介】

WordPressの標準機能

SWELL専用機能

変換
テキストの配置
なし
デバイスコントロール

ブロックツールバーから、「デバイスコントロール」を設定できます。

スマホサイズでのみ表示する

PCサイズでのみ表示する

サイドバーの「デバイス制限」から、デバイスコントロールを設定することもできます。

表示例

なし
ブロック下の余白量

ブロックツールバーから、「ブロック下の余白量」を設定できます。

ブロック下の余白量:3em

ブロック下の余白量:6em

サイドバーの「ブロック下の余白量」から、ブロック下の余白量を設定することもできます。

太字
イタリック
リンク
さらに表示
「さらに表示」の中身を見る

インラインコード
インライン画像
キーボード入力
ハイライト
上付き
下付き
打ち消し線
脚注
言語

なし
SWELL装飾
「SWELL装飾」の中身を見る

書式クリア

コード(DIR)

コード(FILE)

釈注

インラインボタン

カスタム1

書式セット1

なし
アイコン
なし
ショートコード
「ショートコード」の中身を見る

記事内広告

スマホだけ改行

PCだけ改行

アイコン

評価用スター

HTML挿入

フォントサイズ

サイドバーから設定できます。

サイズ:「S M L XL XXL」から選択できます。

単位:「px em rem」から選択できます。

ブロックツールバーから設定できます。

サイズ:「XS S L XL」から選択できます。

単位:「px rem em % vw vh」から選択できます。

サイドバーから設定できます。

ブロックツールバーから設定できます。

テキスト色

サイドバーから設定できます。

ブロックツールバーから設定できます。

背景色
なし
マーカー
オプション
「オプション」の中身を見る

コピー
複製
前に追加
後に追加
スタイルをコピー
スタイルを貼り付け
グループ化
ロック
名前を変更
パターンを作成
移動
HTMLを編集
削除

この先で登場するアイコンの意味

※ 画像にカーソルを乗せると説明文が表示されます(PCのみ)。今、試しに下記のにカーソルを乗せてみて下さい。説明文が表示されます。

  • :記事なし
  • :関連記事
  • :記事公開予定
  • :SWELL専用機能「デバイスコントロール」のみ使える
  • :SWELL専用機能「ブロック下の余白量」のみ使える
  • :SWELL専用機能「ボーダー設定」が使える ※ 以下、参照
  • :SWELL専用機能「スタイル」が使える ※ 以下、参照
  • :SWELL専用機能なし

ボーダー設定

スタイル

SWELLのブロックエディタの使い方【WordPressに標準搭載されているブロックをカスタマイズした代表的なブロック】

段落
見出し
リスト
画像
カラム

SWELLのブロックエディタの使い方【SWELL専用のカスタムブロック】

リスト入りグループ
アコーディオン
バナーリンク
ボックスメニュー
SWELLボタン
キャプションボックス
リッチカラム
説明リスト
Q & A
フルワイド
ステップ
タブ
ABテスト
広告タグ
ふきだし
ブログパーツ
リンクリスト
投稿リスト
関連記事
制限エリア
商品レビュー
RSS

SWELLのブロックエディタの使い方【WordPressに標準搭載されているブロック】

テキスト

段落
見出し
リスト
引用
コード
詳細
整形済みテキスト
プルクコート
テーブル
クラシック

メディア

画像
ギャラリー
音声
カバー
ファイル
メディアとテキスト
動画

デザイン

ボタン
カラム
グループ
横並び
縦積み
続き
ページ区切り
区切り
スペーサー

ウィジェット

※ 画像にカーソルを乗せても説明文は表示されません。

  • :記事なし
  • :SWELL専用機能「ブロック下の余白量」のみ使える
  • :SWELL専用機能なし
アーカイブ
カレンダー
カテゴリー一覧
カスタムHTML
最新のコメント
最新の投稿
固定ページリスト
RSS
検索
ショートコード
ソーシャルアイコン
タグクラウド

埋め込み

※ 画像にカーソルを乗せても説明文は表示されません。

  • :記事なし
  • :SWELL専用機能「ブロック下の余白量」のみ使える
埋め込み
Twitter
YouTube
WordPress
SoundCloud
Spotify
Flickr
Vimeo
Animoto
Cloudup
Clowdsignal
Dailymotion
Imgur
Issuu
Kickstarter
Mixcloud
Pocket Casts
Reddit
ReverbNation
Screencast
Scribd
Slideshare
SmugMug
Speaker Deck
TikTok
TED
Tumblr
Video Press
WordPress.tv
Amazon Kindle
Pinterest
Wolfram

今回は以上です。

※ 本記事を読んで「悩みが解決した」「参考になった」という方は、 (旧Twitter)でシェアして頂けると嬉しいです ^_^

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
本記事の内容