ブログ記事作成スピードが上がる！ブロックパーツ（デザイン、装飾）まとめ【WordPress有料テーマ SWELL編】

「ブログパーツのデザイン、種類」を視覚的に分かりやすく紹介します。
知らなかった便利な機能が見つかります。記事を書くのが早くなりますよ！

SWELL編とは言いつつも、同じように使えるブロック（パーツ）も多いですので見てください。
※できればパソコンで見るのがおすすめです。

SWELLとは

WordPressのブロックエディター「Gutenberg（グーテンベルク）」に完全対応した有料テーマのことです。
2018年12月以降にブログを無料の人気テーマ「Cocoon」などで記事を書き始めた人の大半は、ブロックエディターでしか記事を書いたことがないのではないでしょうか。

SWELLオリジナルのブロックは 2ページ目から！

テキストブロック

段落

早速どんなパーツがあるか紹介していきます！
この本文も「段落」という一般的なテキストブロックの一つです。
↓こんな感じの装飾などができるよ！（視覚的に理解して下され）

段落＿太字＿イタリック＿←インライン画像＿テキスト色（13色+カスタム）
^上付き_下付き取り消し線＿マーカー線（4色）＿背景色（13色+カスタム）＿最小＿最大
注釈（文字色薄い…？）
「下線」は文字を選択して、Windowsなら「Ctrl + U」、Macなら「cmd + U」です。

★マーカー線は初期設定ではストライプじゃないものになってます。
WordPressの「SWELL設定」→「エディター設定」→「マーカー」で4種類から選択できます。

★「エディター編集」で色や形、デザインなど様々な設定を変えることができます。

▲ルビ（文字の上の小さい文字でのフリガナ）設定が見つかりませんでした。

ボーダー設定

段落（普通の文字）などには枠を囲って装飾することができます。
WordPressの「エディター設定」で色や枠の太さなどを変えられます。

スタイル

上の「ボーダー設定」同様、段落などを装飾することができます。

（スタイル）＿アイコンボックス

色とボックスのデザインはWordPressの「エディター設定」で変えられます。

見出し

タイトルをH1とします。
H2～H6までありますが、H5、6は使うことはほぼないです。

★見出し（H2～H4）のデザインは
WordPressの「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」から変更できます。

「見出し」デザインをまとめました！

★「目次」のデザイン、設定変更もこの「投稿・固定ページ」→「目次」から。デザインは4種類。
表示させる項目を見出し「H2まで」か、「H3まで」かを選べます。

リスト

リストの左にあるアイコンの色もWordPressの「エディター設定」で変えられます。

その他

引用

デザインは2種類。WordPressの「エディター設定」で変更できます。

引用

引用元

整形済みテキスト

プルクオート

いつ使うんだろこれ

（引用元） ※目立たせたい引用に使うようです。

テーブル

ヘッダーセクション	消すこともできます
テーブル＿デフォルト	テーブル	テーブル
3×3で作りました

ヘッダーセクション	消すこともできます
テーブル＿ストライプ	テーブル	テーブル
3×3で作りました

ヘッダーセクション	消すこともできます
テーブル＿シンプル	テーブル	テーブル
3×3で作りました

ヘッダーセクション	消すこともできます
テーブル＿二重線	テーブル	テーブル
3×3で作りました

★他にも
「コード」…余白やタグを考慮したコードスニペットを表示できる。
「クラシック」…従来のWordPressエディターを使用できる。
「詩」…詩を挿入。特別な余白形式を使ったり、歌詞を引用できる。

メディア

画像

ギャラリー

クリック（ or タップ）してみて下さい。

• 

• 

• 

• 

• 

カバー

ファイル

このドキのアイコンがダウンロードできます！

メディアとテキスト

★他に「音声」や「動画」を貼れるブロックもあります。

デザイン

ボタン

色も角丸の半径も変えることができます。

カラム

横に列を増やして見やすくできます。※パソコンのブラウザで見る場合

グループ

区切り

デフォルト

---

幅広線＿「区切り」は色を変えられます。

---

ドット

---

★他にも
「続き」…このブロックより前のコンテンツをアーカイブページの抜粋に表示できる。
「ページ区切り」…コンテンツを複数のページに分けて表示できる。
「スペーサー」…ブロックの間に、高さを変更可能な余白を追加できる。