blog初心者
ブロックエディタGutenbergのボックス要素の使い方を初心者にもわかるよう簡単に教えて欲しい!?
よく使うブロックと使い方をまとめてみました!
(有料テーマ「JIN」オリジナルブロック含む)
WordPressエディタはクラシックエディタを使ってる方が多いと思いますが自分は初期設定のまま、ブロックエディタGutenbergを使ってます。
※最近ワードプレス導入した方はデフォルトが「Gutenberg」になっているはずです。
最初のうちは非常に使い難かったのですが最近やっと慣れてきましたのでブログ初心者で使い方がわからない方向けに主なブロックの使い方をまとめてみました。
またGutenbergにしてみたがまだ慣れていない方や
そろそろブロックエディタに変更してみようかな?!って方の参考になればうれしいです。
※「Classic Editor」プラグインは2021年12月31日までのサポートとなります。
よく使うGutenbergブロック要素
![よく使うGutenbergブロック要素](https://gyouza-sarada.com/wp-content/uploads/2020/07/4c2e9ef0534df498a9725832bbaf098e.jpg)
![Gutenberg管理画面](https://gyouza-sarada.com/wp-content/uploads/2020/08/d320d40a7603e925df488c273b6e3abb.png)
まずGutenbergで記事更新する際には
ダッシュボード→投稿→新規追加 で
上記のような画面から記事を書いて行きます!
「タイトル追加」の部分に記事タイトルを入力
(自動的にh1要素となります。)
![グーテンベルクボックス](https://gyouza-sarada.com/wp-content/uploads/2020/08/0d1543bcc8d883a2e75036a4963a375c.png)
上記画像のように各ブロックを「段落」「見出し付きボックス」「リスト」「リッチボタン」などブロック要素ごとに積み上げて行き記事を作成致します。
一般ブロック
一番ポピュラーで使用頻度の多いブロック要素が集まってます。
![一般ブロック](https://gyouza-sarada.com/wp-content/uploads/2020/08/7639cefbaf5406f46bf9421d6a4b68e2.png)
- 段落
- 見出し
- 画像
- リスト
- 引用
段落
![段落ブロック](https://gyouza-sarada.com/wp-content/uploads/2020/08/19d9d1b72b6d6d4eb7f064ecb9ff2a0b.png)
一番基本のブロックになり文章を書く際に使います。
(文章を入力、またはブロックを選択できる)
(1段落が1ブロック)
見出し
![見出しブロック](https://gyouza-sarada.com/wp-content/uploads/2020/08/c2ccac855b5d78199cb0dd25e155ba22.png)
大見出しh2、中見出しh3、小見出しh4選択可能です。
必ず使う要素になりますね。
![h2h3h4](https://gyouza-sarada.com/wp-content/uploads/2020/08/h2h3h4.png)
画像
![画像アップ](https://gyouza-sarada.com/wp-content/uploads/2020/08/93a2cdb141870937945c6cb909245a61.png)
直接アップロードするか既にアップロード済みの画像(メディアライブラリ)から選択して記事内に画像を表示させます!
![餃子画像](https://gyouza-sarada.com/wp-content/uploads/2020/08/f69c992651043623e65aad96e573ab4b.jpg)
リスト
![リスト001](https://gyouza-sarada.com/wp-content/uploads/2020/08/f291a1bae6b46fa47b02c336f80ba5ab.png)
![リスト002](https://gyouza-sarada.com/wp-content/uploads/2020/08/c6a11130a4e874d8cd5110419bdf9f9e.png)
箇条書きをリスト表示する際に使います。
通常のリストと番号付きリストは切り替え可能です。
引用
![引用ブロック](https://gyouza-sarada.com/wp-content/uploads/2020/08/72ad3aabd13493d3bda24e0dab283099.png)
引用文であることを明確にするため、「引用タグ」を使って表示してくれます。
コピーコンテンツと間違われないように正しく使いましょう。
フォーマット
カスタムHTMLや表の作成などタグを使うような要素が多いです。
![](https://gyouza-sarada.com/wp-content/uploads/2020/08/1ebd5667d59f1c85ab922af35f7329e8.jpg)
- カスタムHTML
- 表
カスタムHTML
![カスタムHTML001](https://gyouza-sarada.com/wp-content/uploads/2020/08/69f93d8840af03253fd0f61024573afd.png)
広告で使うHTMLタグを入力することが多いですね。
![カスタムHTML002](https://gyouza-sarada.com/wp-content/uploads/2020/08/89526ffdcfc2d8e2d968a0876d8388d1.jpg)
プレビューボタンでエディタ内でどのように表示されるか確認出来ます。
![カスタムHTML003](https://gyouza-sarada.com/wp-content/uploads/2020/08/022207d5798fe170db3bf706e75dc2be.jpg)
バナー画像含む広告タグを入力する際に必ず使用致します。
表
![表ブロック001](https://gyouza-sarada.com/wp-content/uploads/2020/08/03ed40862888c006a5184d57f67f7fd8.jpg)
列数、行数変更して「表を作成」をクリック
![表ブロック002](https://gyouza-sarada.com/wp-content/uploads/2020/08/82651272cbe6d2e0aa29ef8679237add.jpg)
枠内にテキストを入力
![表ブロック003](https://gyouza-sarada.com/wp-content/uploads/2020/08/0af661c11f90ec4c73613b7113584fed.jpg)
表の設定など変更可能
「表のセル幅固定」と「背景色選択」を変更してみる。
![表ブロック004](https://gyouza-sarada.com/wp-content/uploads/2020/08/149a6d16eb56b643fad5d68b02e46f25.jpg)
簡単な表ならすぐに作成可能です!
レイアウト要素・ウィジェット
レイアウトに関連したボックスとカレンダーなどの「ウィジェット」要素ですが現状ではあまり使用してません。
![レイアウト要素](https://gyouza-sarada.com/wp-content/uploads/2020/08/3c5b5011575a780531ee536c7766c569.jpg)
レイアウト要素では現状よく使うボックスはありません。
※「スペーサー」「ボタン」「区切り」はJINオリジナルブロックが使いやすいので使用してません。
![ウィジェット要素](https://gyouza-sarada.com/wp-content/uploads/2020/08/08ce9e754c32074491dfdc1e180dd747.jpg)
ウィジェットも現状ではよく使うボックスありません。
埋め込み
Twitterやyoutube、インスタなど外部コンテンツを簡単に埋め込めるボックスとなります。
![埋め込み要素](https://gyouza-sarada.com/wp-content/uploads/2020/08/e4afbe5a442cfff66f26b294dd36d4e8.jpg)
![Twitter埋め込み001](https://gyouza-sarada.com/wp-content/uploads/2020/08/af7a791fb35c2257df2f04a158ebf426.jpg)
埋め込みたいTwitterURLを入力します。
![Twitter埋め込み002](https://gyouza-sarada.com/wp-content/uploads/2020/08/4054e3d2c046d6ca034db8e50ad9fac5.jpg)
埋め込みをクリックでTwitterのページが簡単に表示されます。
実際の埋め込みはこちら↓
JINブロック
有料テーマJINオリジナルのボックス要素
記事を書く上で便利な物が多く、また見た目も整うので大変便利です!
![JINボックス要素](https://gyouza-sarada.com/wp-content/uploads/2020/08/e9327347561e9fd9165b68dd985559ee.jpg)
シンプルボックス
![シンプルボックス001](https://gyouza-sarada.com/wp-content/uploads/2020/08/1a1b4c9a79aee80d5a55b6f66c517778.jpg)
![シンプルボックス002](https://gyouza-sarada.com/wp-content/uploads/2020/08/97171f9bbae82804d4f89de45affc4f0.jpg)
15種類のシンプルなボックスです。
中に入れ子でリスト表示することも可能。
(色の変更、文言の変更も可能)
表示例はこちら↓
文章を書くことが出来ます!
ちょっとした、まとめなどで使用
- テスト1
- テスト2
- テスト3
リスト表示も可能
- サンプル1
- サンプル2
- サンプル3
見出し付きボックス
![見出し付きボックス001](https://gyouza-sarada.com/wp-content/uploads/2020/08/7e530fc4097fd201581222046519da8c.jpg)
![見出し付きボックス002](https://gyouza-sarada.com/wp-content/uploads/2020/08/59a6685756167dcb79caba3200f0e40b.jpg)
見出しが付いた6種類のボックスです。
こちらもポイントなどをまとめて見せる時によく使います!
![見出し付きボックス003](https://gyouza-sarada.com/wp-content/uploads/2020/08/ba11f214515f794b998df457eb5ab421.jpg)
入力してある文字を後からリストにすることも可能です。
![見出し付きボックス004](https://gyouza-sarada.com/wp-content/uploads/2020/08/d84b6db8d5c64c27021f57e1c36bafe8.jpg)
改行されたテキストを選択して
![見出し付きボックス005](https://gyouza-sarada.com/wp-content/uploads/2020/08/cc7a53edfafe3d8fd3af664066bd68f9.jpg)
左上の変換→リストをクリック
![見出し付きボックス006](https://gyouza-sarada.com/wp-content/uploads/2020/08/5a58c8b1251c6dc2ab701851d51e52a8.jpg)
このボックスはリストにすると区切り線が入るのでよく使います!
その他サンプルはこちら↓
- iOSアプリ
- Androidアプリ
- Windowsアプリ
- iOSアプリ
- Androidアプリ
- Windowsアプリ
吹き出し
![吹き出し要素001](https://gyouza-sarada.com/wp-content/uploads/2020/08/f2cb7b394ace8b40250c575c9ea9d1f8.jpg)
画像を選択→「アイコン名を入力」→忘れずに書き換え
吹き出しの中に文章を入力
![吹き出し要素002](https://gyouza-sarada.com/wp-content/uploads/2020/08/eca61c590fc9efdb5609892d28fcd2ad.jpg)
![吹き出し要素003](https://gyouza-sarada.com/wp-content/uploads/2020/08/2c6da68f6b1a665abd3270100f62ae0b.jpg)
吹き出しの枠色、背景色も変更可能!
![吹き出し要素004](https://gyouza-sarada.com/wp-content/uploads/2020/08/be70d74a6446db8534e81f59607faf40.jpg)
![吹き出し要素005](https://gyouza-sarada.com/wp-content/uploads/2020/08/d74c5bf294de38ee966c68b69418b483.jpg)
左右の配置も変更可能
![吹き出し要素006](https://gyouza-sarada.com/wp-content/uploads/2020/08/f56b4d5322501835734115465be9ad92.jpg)
上記のような吹き出しが簡単に作成可能です!
リッチボタン
![リッチボタン要素001](https://gyouza-sarada.com/wp-content/uploads/2020/08/eb8558e113a6b47eac55152fff07b0cc.jpg)
動きやアクションがついたボタンがカスタマイズ可能
![リッチボタン要素002](https://gyouza-sarada.com/wp-content/uploads/2020/08/7ec20e3c8aa7032a54536338e95a6996.jpg)
ボタンの種類、色の変更
![リッチボタン要素003](https://gyouza-sarada.com/wp-content/uploads/2020/08/3eee7806f26e040bb204c21b52069075.jpg)
光るボタンなど動きの選択
![リッチボタン要素004](https://gyouza-sarada.com/wp-content/uploads/2020/08/4392796a9012e84eaa7265fbeafc311c.jpg)
ボタンの丸み、数字大きくするほど丸くなります。
![リッチボタン要素005](https://gyouza-sarada.com/wp-content/uploads/2020/08/278b7912ce065f345961633bef682626.jpg)
押し込む、膨らむなどのアクション選択
サンプルボタンはこちら↓
余白
![余白要素001](https://gyouza-sarada.com/wp-content/uploads/2020/08/65352d2464fefe6af432627aa4ac1dd7.jpg)
スペーサーと機能は変わらないのですが枠線がある為、余白が入っていることがわかりやすいので「スペーサー」ではなく「余白」を使ってます。
![余白要素002](https://gyouza-sarada.com/wp-content/uploads/2020/08/7efda9b84a3ca47e346911a76c62457d.jpg)
サイズを数字で変更可能!
ランキング
![ランキング要素001](https://gyouza-sarada.com/wp-content/uploads/2020/08/5a93e272b6304cf666a4927913873e23.jpg)
ランキング表示などに便利なボックス
![ランキング要素002](https://gyouza-sarada.com/wp-content/uploads/2020/08/485cf4b32b1f797f3206a1b79f17958e.jpg)
ワンタッチでボタンを消せます。
![ランキング要素003](https://gyouza-sarada.com/wp-content/uploads/2020/08/b3b9bc4a5e9116de784a4f9ca0dd7e35.jpg)
![ランキング要素004](https://gyouza-sarada.com/wp-content/uploads/2020/08/0908f93cb4631825a30a471c95abd5eb.jpg)
王冠が1位は金、2位は銀、3位は銅と切り替え可能
![ランキング要素005](https://gyouza-sarada.com/wp-content/uploads/2020/08/601ec75bc19e6b6cbb12a4a67059205c.jpg)
比較やランキングに最適ですね!
ブログカード
![ブログカード要素001](https://gyouza-sarada.com/wp-content/uploads/2020/08/10bf08d6dc29d5885adb4fc0e25b7cb6.jpg)
自分のサイト内リンクを画像付きで簡単に表示
JINの機能で自サイトの記事URLを直接入力するとこのブログカードで表示されます↓
シンプルボタン・横並びボタン
![シンプルボタン要素001](https://gyouza-sarada.com/wp-content/uploads/2020/08/a37a456fdd36906c5af92c4f6b1f7916.jpg)
![横並びボタン001](https://gyouza-sarada.com/wp-content/uploads/2020/08/4f58208ae57bb9ba8f95cd2dc8df52c1.jpg)
![横並びボタン002](https://gyouza-sarada.com/wp-content/uploads/2020/08/b8f2f0e66119577bfec9c840f2880ee1.jpg)
リッチボタンに対してシンプルなタイプのボタン
テキストと2パターンの色、カスタム2つだけ選択可能です。
区切り線
![区切り線要素001](https://gyouza-sarada.com/wp-content/uploads/2020/08/8b99bb14827749f34f2a83e75bf49fbf.jpg)
カスタマイズ可能な区切り線
![区切り線要素002](https://gyouza-sarada.com/wp-content/uploads/2020/08/9d0da1dd211748b7021795bee5dc9ba4.jpg)
実際の表示はこちら↓
アイコンボックス
![アイコンボックス001](https://gyouza-sarada.com/wp-content/uploads/2020/08/e029bfb473e8896de5d69fd4087bf593.jpg)
![アイコンボックス002](https://gyouza-sarada.com/wp-content/uploads/2020/08/71f938254a7163a7395cfbd03af509fe.jpg)
16個のシンプルなアイコンボックス
サンプルはこちら↓
JINブロック要素カスタマイズ方法
![ブロック要素カスタマイズ001](https://gyouza-sarada.com/wp-content/uploads/2020/08/dbb341a9f11878fac377b14fed65e3f9.jpg)
![ブロック要素カスタマイズ002](https://gyouza-sarada.com/wp-content/uploads/2020/08/9a41faa84b29e6cda01c647f1a94a4b3.jpg)
ダッシュボード→外観→カスタマイズ→ボックスデザイン設定
![ブロック要素カスタマイズ003](https://gyouza-sarada.com/wp-content/uploads/2020/08/e4619d51041f0d4a97f604dcc78484d2.jpg)
良い例→メリット
悪い例→デメリット
参考→あわせて読みたい に自分は変更してます。
※このボックスタイトルは変更するとサイト内全部変更されてしまいますので気を付けて下さい。
![ブロック要素カスタマイズ004](https://gyouza-sarada.com/wp-content/uploads/2020/08/a30a20891b13abbdfef05024e9aafb5c.jpg)
ボックスの色はカラーコード直接入力することも出来ます。
Gutenbergパーマリンク変更方法
パーマリンクの設定が「投稿名 sample-post/」の場合
![パーマリンク変更001](https://gyouza-sarada.com/wp-content/uploads/2020/08/8b6059bbe14cbc775f0bda32557274ad.jpg)
Gutenbergの場合は一旦、下書き保存をしないと
パーマリンク→URLスラッグが表示されません
![パーマリンク変更002](https://gyouza-sarada.com/wp-content/uploads/2020/08/cb3f45944341a9d6c13308fbcbac39fb.jpg)
URLスラッグが日本語を含む「記事タイトル」になっているのでアルファベットのみに変更します。
![パーマリンク変更003](https://gyouza-sarada.com/wp-content/uploads/2020/08/b9bf2a6dc1d0e938e16ff84c7e22f2e6.jpg)
URLの変更とカテゴリの選択は忘れやすいので
公開する前に必ず確認した方がいいです!
Gutenbergのブロックまとめ
![Gutenbergのブロックまとめ](https://gyouza-sarada.com/wp-content/uploads/2020/08/5e4af67c2a51d3c4ee0980d816014c96.jpg)
よく使うブロック要素
- 段落
- 見出し
- 画像
- リスト
- 引用
- カスタムHTML
- 表
- JINブロック
自分もまだまだですがブロック要素を使いこなせるようになると作業効率に大きく影響するので一緒に頑張りましょう!
JINブロックは
・記事を書く上で大変便利なボックスが多く見た目も良くなるので積極的に使いたい!
・自分専用に使いやすくなるように色や文言変更も可能
Gutenberg使っている、もしくはこれから使ってみようと思っている方の参考になればうれしいです!