- グーテンベルクってどんなもの?
- グーテンベルクでの記事の書き方を教えて!
- グーテンベルクではブロックを使って記事を書くって聞いたけど、ブロックってどう使うの?
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
こんな悩みを解決できる記事を用意しました!
私はブログを始めて1年半になります。
これまで渾身の記事を70記事以上書いてきました。
その結果、累計で5桁を達成することができました。
WordPressで記事を書く場合「グーテンベルク」という投稿画面でブログ記事を書いていきます。
「グーテンベルク」というと難しそうですが、基本的な使い方をマスターすればブログ初心者の方でも簡単にブログ記事を書くことができます。
- 初めて「グーテンベルク」でブログ記事を書く人に向けて
- わかりやすく丁寧に
- 画像をふんだんに使って
- 記事を作成~公開するまでの手順を説明します。
この記事を読んで、グーテンベルクの使い方をマスターしましょう!
なお、当ブログはSWELL
導入したテーマによってデザインが違う部分もあると思いますが、概ね手順は同じなのでぜひ参考にしてみて下さい。
WordPressテーマについては、【2023年】WordPressおすすめテーマ8選【有料・無料】メリットやデメリット、選び方を解説にて詳しく解説しているのでご興味のある方はご覧ください。
操作方法ではなくブログを書く手順を知りたい方はこちらの記事をご覧ください。
![](https://affi-weblog.com/wp-content/uploads/2023/05/b9031e4dd8604f41114b930fe7917b9d.png)
![](https://affi-weblog.com/wp-content/uploads/2023/05/b9031e4dd8604f41114b930fe7917b9d.png)
WordPressでのブログ記事作成⇒投稿までの流れ
![](https://affi-weblog.com/wp-content/uploads/2023/06/d636d5f87384b035f628246a707f0815.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/06/d636d5f87384b035f628246a707f0815.jpg)
最初にWordPressでの記事作成から記事投稿までの流れを確認しておきましょう。
✅記事作成⇒投稿までの流れ
- ブログ記事作成(タイトル、本文作成、画像挿入など)
- ブログ記事装飾
- ブログ記事投稿
本記事では上記の流れに沿って説明を進めてまいります。
また、記事投稿後の記事の編集方法や、記事の削除の方法なども併せてご紹介します。
説明に入る前に、基礎知識として以下の項目を説明します。
✅基礎知識
- WordPressの「固定ページ」と「投稿ページ」の違いについて
- グーテンベルクとはどのようなものか
- グーテンベルクの基本操作方法
それでは始めましょう!
投稿ページと固定ページとは?
WordPressには投稿ページと固定ページがあります。
投稿ページと固定ページの違いは一言でいうと下記のとおりです。
- 投稿ページ:
-
ブログ記事を書くページ
- 固定ページ:
-
ブログ記事以外の情報を書くページ
- お問い合わせ
- サイトマップ
- プライバシーポリシー
- 免責事項
- 特定電子メール法に基づく表記
- など
【投稿ページ】
![投稿ページ](https://affi-weblog.com/wp-content/uploads/2023/06/6b0009e768ae60bd5b54b8605d112580-2.png)
![投稿ページ](https://affi-weblog.com/wp-content/uploads/2023/06/6b0009e768ae60bd5b54b8605d112580-2.png)
【固定ページ】
![固定ページ](https://affi-weblog.com/wp-content/uploads/2023/06/9a6f8bf8fd351a0fc218918ff00fbb4a-2.png)
![固定ページ](https://affi-weblog.com/wp-content/uploads/2023/06/9a6f8bf8fd351a0fc218918ff00fbb4a-2.png)
私たちブロガーが書くブログ記事は投稿ページを使っています。
ブログ運営でブログ記事を更新する場合は「投稿ページ」を作成していくということを覚えておきましょう。
グーテンベルクってどんなもの?
グーテンベルクと聞いてもイメージしにくいと思います。
グーテンベルクというのは
ブロックを使って記事を書くエディタ
です。
なので、グーテンベルクはブロックエディタとも呼ばれています。
WordPressのダッシュボードで「投稿」⇒「新規追加」をクリックすると
![WordPressのダッシュボードで「投稿」⇒「新規追加」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/88440da95e1859b6936b685772c00c3e.png)
![WordPressのダッシュボードで「投稿」⇒「新規追加」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/88440da95e1859b6936b685772c00c3e.png)
グーテンベルクの画面が開きます。
![グーテンベルクの投稿画面](https://affi-weblog.com/wp-content/uploads/2023/06/951c8999c2f7d973f26681568527a2eb.png)
![グーテンベルクの投稿画面](https://affi-weblog.com/wp-content/uploads/2023/06/951c8999c2f7d973f26681568527a2eb.png)
ここに「ブロック」を追加して記事を書いていきます。
グーテンベルク(ブロックエディタ)の仕様
グーテンベルクで記事のサンプルを作成しました。
![グーテンベルクで記事のサンプルを作成](https://affi-weblog.com/wp-content/uploads/2023/06/2e65821c44b02c72b7fe8148f4d5c3ac.png)
![グーテンベルクで記事のサンプルを作成](https://affi-weblog.com/wp-content/uploads/2023/06/2e65821c44b02c72b7fe8148f4d5c3ac.png)
これをブロック毎に色分けしてみます。
![ブロック毎に色分け](https://affi-weblog.com/wp-content/uploads/2023/06/ccbec024edddd859f1349586e6c7b5ef.png)
![ブロック毎に色分け](https://affi-weblog.com/wp-content/uploads/2023/06/ccbec024edddd859f1349586e6c7b5ef.png)
上記の通り、グーテンベルクで書いた記事はタイトルブロック、見出しブロック、段落ブロック、箇条書きブロック、画像ブロックで構成されています。
このようにグーテンベルクでは色々なブロックを積み木のように組み合わせて記事を書くような仕様になっています。
この「ブロック」に慣れてくると記事が書きやすくなってきます。
ブロックは30種類以上
ブロックを呼び出すためには左上にある「+」またはブロックの右側にある「+」をクリックします。
![左上にある「+」またはブロックの右側にある「+」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/3d92f62cd32e7186ef0f7d5c82e6d6d7.png)
![左上にある「+」またはブロックの右側にある「+」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/3d92f62cd32e7186ef0f7d5c82e6d6d7.png)
使えるブロックは30種類以上あります。
![30種類以上のブロック](https://affi-weblog.com/wp-content/uploads/2023/06/e2797c78704034a6d2b762b39ef0c45e.png)
![30種類以上のブロック](https://affi-weblog.com/wp-content/uploads/2023/06/e2797c78704034a6d2b762b39ef0c45e.png)
この中でよく使うブロックは以下の4つです。
- 段落ブロック
- 見出しブロック
- 箇条書きブロック
- 画像ブロック
![よく使う4つのブロック](https://affi-weblog.com/wp-content/uploads/2023/06/73cc3bd6b4795be98d07d26fc40dbe7b.png)
![よく使う4つのブロック](https://affi-weblog.com/wp-content/uploads/2023/06/73cc3bd6b4795be98d07d26fc40dbe7b.png)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
記事を書く場合には、まずこの4つを覚えておきましょう
ツールバーとサイドバー
この記事ではサイドバーとツールバーという言葉が何度も出てきます。
どのようなものかを説明します。
サイドバー(ブロックを選択していないとき)
![サイドバー(ブロックを選択していないとき)](https://affi-weblog.com/wp-content/uploads/2023/06/06d190f5cfbc329a9d5f943564bbee12-1.png)
![サイドバー(ブロックを選択していないとき)](https://affi-weblog.com/wp-content/uploads/2023/06/06d190f5cfbc329a9d5f943564bbee12-1.png)
サイドバー(ブロックを選択しているとき)
![サイドバー(ブロックを選択しているとき)](https://affi-weblog.com/wp-content/uploads/2023/06/c6d99c67c44be262bcfb27d7b400956f.png)
![サイドバー(ブロックを選択しているとき)](https://affi-weblog.com/wp-content/uploads/2023/06/c6d99c67c44be262bcfb27d7b400956f.png)
サイドバーは、「ブロックを選択しているとき」と「ブロックを選択していないとき」では表示される項目が変わります。
![ブロックを選択すると、ブロックの上にツールバーが表示される](https://affi-weblog.com/wp-content/uploads/2023/06/d919cf064598429e60782239dcd6d271.png)
![ブロックを選択すると、ブロックの上にツールバーが表示される](https://affi-weblog.com/wp-content/uploads/2023/06/d919cf064598429e60782239dcd6d271.png)
ブロックを選択すると、ブロックの上にツールバーが表示されます。
ツールバーとサードバーは以下の説明でよく出てくるので覚えておいてください。
グーテンベルクの基本操作
![](https://affi-weblog.com/wp-content/uploads/2023/06/928397513e3d31cf6b68a9ea7932a205.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/06/928397513e3d31cf6b68a9ea7932a205.jpg)
ここでは、基礎知識としてグーテンベルクの基本操作をご紹介します。基本操作は次の6つです。
- ブロックを追加する
- ブロックを変換する
- ブロックを移動する
- ブロックを複製する
- ブロックを再利用する
- ブロックを削除する
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
これら6つの機能を知っていると、グーテンベルクでのブログ記事作成~投稿までの流れが理解しやすくなりますよ
基本操作について順に説明していきます。
❶ブロックを追加する
最初にブロックを追加する方法です。
![左上の「+」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/0fbd475da23637bc63a3492421643eb3.png)
![左上の「+」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/0fbd475da23637bc63a3492421643eb3.png)
左上の「+」をクリックしてブロック一覧を表示します。
![利用したいブロックをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/2b0d25ca2efa1d1d72a82080b12a6e27.png)
![利用したいブロックをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/2b0d25ca2efa1d1d72a82080b12a6e27.png)
左側にブロックが表示されますので、スクロールして利用したいブロックを探します。
利用したいブロックをクリックすると投稿画面(エディッタ)にブロックが追加されます。
❷ブロックを変換する
次にブロックの変換についてご紹介します。
今回は、段落ブロックから見出しブロックへの変換手順をご紹介します。
段落ブロックでツールバーの一番左をクリックします。
![段落ブロックでツールバーの一番左をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/74b08a937287e69e5ca79bf0274a1aa1.png)
![段落ブロックでツールバーの一番左をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/74b08a937287e69e5ca79bf0274a1aa1.png)
「見出し」をクリックします
![「見出し」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/95b7ec8092c5a40bbf3e13c40b5de00c.png)
![「見出し」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/95b7ec8092c5a40bbf3e13c40b5de00c.png)
すると、段落ブロックが見出しブロックに変更されます。
![段落ブロックが見出しブロックに変更される](https://affi-weblog.com/wp-content/uploads/2023/06/e3f3ea085bca47cdb73c95d49468f44d.png)
![段落ブロックが見出しブロックに変更される](https://affi-weblog.com/wp-content/uploads/2023/06/e3f3ea085bca47cdb73c95d49468f44d.png)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
この「変換」は非常によく使われます。覚えておきましょう
❸ブロックを移動する
ブロックの移動を見ていきましょう。
![ツールバーの中の移動カーソルを操作することで位置を変更する](https://affi-weblog.com/wp-content/uploads/2023/06/ca0885c0182bc3be63cfea02185bf481.png)
![ツールバーの中の移動カーソルを操作することで位置を変更する](https://affi-weblog.com/wp-content/uploads/2023/06/ca0885c0182bc3be63cfea02185bf481.png)
ブロックを選択し、上に表示されたツールバーの中の移動カーソルを操作することで位置を変更することができます。
コピー&ペーストをしなくても、簡単にブロックの移動ができます。
❹ブロックを複製する
次はブロックの複製です。
![ツールバーの一番右をクリックして表示されるメニューから「複製」をクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/a0749696b2d14e573d39a2cc237b0170.png)
![ツールバーの一番右をクリックして表示されるメニューから「複製」をクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/a0749696b2d14e573d39a2cc237b0170.png)
ツールバーの一番右の「
をクリックして表示されるメニューから「複製」をクリックすると、すぐ下にブロックが複製されます。文字や装飾をそのままに複製ができるので、装飾を再利用する場合に便利です。
❺ブロックを再利用する
次にブロックの再利用です。
![「再利用ブロックを作成」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/d0d74a97c64977872470f78506d37047.png)
![「再利用ブロックを作成」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/d0d74a97c64977872470f78506d37047.png)
ツールバーの一番右をクリックして表示されるメニューの中から「再利用ブロックを作成」をクリックします。
![再利用ブロックに名前を付ける](https://affi-weblog.com/wp-content/uploads/2023/06/af404dfa9064b83e48e0f68404b50555.png)
![再利用ブロックに名前を付ける](https://affi-weblog.com/wp-content/uploads/2023/06/af404dfa9064b83e48e0f68404b50555.png)
再利用ブロックに名前を付けて「保存」をクリックします。
これにより、ほかの記事でも保存したブロックが使えます。
![登録したブロックをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/e74fe80ddf985f0c2b9ed0d881cbfb25.png)
![登録したブロックをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/e74fe80ddf985f0c2b9ed0d881cbfb25.png)
登録したブロックを利用する場合は、ブロック一覧画面の「再利用可能」から、登録したブロックをクリックします。
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
いつも使う定型文を登録しておくと、スピーディに記事が書けますね
❻ブロックを削除する
基本操作の最後にブロックの削除についてみていきましょう。
![ブロックを削除する](https://affi-weblog.com/wp-content/uploads/2023/06/47258e7fdde8af2b087b7cd05f17f421.png)
![ブロックを削除する](https://affi-weblog.com/wp-content/uploads/2023/06/47258e7fdde8af2b087b7cd05f17f421.png)
ブロックを削除するには、削除するブロックをクリックして、表示されたツールバーの一番右をクリック、表示されたメニューの中の「段落を削除」をクリックします。
ブロックは簡単な操作で削除可能なので、不要なブロックは削除しましょう。
WordPressブログの記事の書き方【グーテンベルク】
![](https://affi-weblog.com/wp-content/uploads/2023/06/96bb2e216b045946de4acd8f696c8290.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/06/96bb2e216b045946de4acd8f696c8290.jpg)
グーテンベルクでの記事の新規追加から記事の公開の手前までの流れを、初心者の方でも理解できるようにわかりやすく説明します。
【グーテンベルクで記事を書く流れ】
- 記事の新規作成
- タイトルを入力する
- 本文を入力する
- 見出しを作る
- 箇条書きを使う
- 画像を追加する
- カテゴリーを設定する
- アイキャッチ画像を設定する
- パーマリンクを設定する
これらを深掘りしていきます。
1.記事の新規作成
![記事の新規追加](https://affi-weblog.com/wp-content/uploads/2023/06/99f7e9961c01a8fcdb54f2f4483040b6.png)
![記事の新規追加](https://affi-weblog.com/wp-content/uploads/2023/06/99f7e9961c01a8fcdb54f2f4483040b6.png)
記事を新規作成するためにWordPressダッシュボードの「投稿」⇒「新規追加」を順番にクリックします。
または、ヘッダ―部分にある「+新規」⇒「投稿」でも新規作成できます。
2.タイトルを入力する
記事を新規作成すると以下のようにグーテンベルクの画面が開きます。
タイトルは下図の場所に入力します。
![ここにタイトルを入力](https://affi-weblog.com/wp-content/uploads/2023/06/7916c04876258a257dff552200927d7f.png)
![ここにタイトルを入力](https://affi-weblog.com/wp-content/uploads/2023/06/7916c04876258a257dff552200927d7f.png)
タイトルを入力したら「Enterキー」を押下します。するとその下に「段落ブロック」が追加されます。
![タイトルを入力した後Enterを押すと段落ブロックに移動](https://affi-weblog.com/wp-content/uploads/2023/06/25f2677e0514ce63cbd1657adf0242fb.png)
![タイトルを入力した後Enterを押すと段落ブロックに移動](https://affi-weblog.com/wp-content/uploads/2023/06/25f2677e0514ce63cbd1657adf0242fb.png)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
段落ブロックというのは「文章を書くブロック」のことをいいます
3.本文を入力する
つづいて、本文を書いていきます。
本文ではEnterを押すたびに改行されて段落ブロックが追加されていきます。
![文章を書いた後Enterを押すと下の段落に移動](https://affi-weblog.com/wp-content/uploads/2023/06/4195a1f88b71a07b0ade25e22588c842.png)
![文章を書いた後Enterを押すと下の段落に移動](https://affi-weblog.com/wp-content/uploads/2023/06/4195a1f88b71a07b0ade25e22588c842.png)
改行するたびに下に段落ブロックが追加されます
ブロックの種類はサイドバーで確認することができます。
![本文のサイドバー、ツールバー](https://affi-weblog.com/wp-content/uploads/2023/06/46efcbaad0e5c9fe1eff0895b9ec6bf1.png)
![本文のサイドバー、ツールバー](https://affi-weblog.com/wp-content/uploads/2023/06/46efcbaad0e5c9fe1eff0895b9ec6bf1.png)
ブロックを選択すると、サードバーの最上部にブロックの種類が表示されます。
4.見出しを作る
記事を見やすくするため見出しは「見出しブロック」を使って見出しを作っていきます。
今回は、ブロックの基本操作である「変換」を使って見出しブロックを使います。
段落ブロックから見出しブロックに変換する手順は以下の通りです。
この段落ブロックを見出しブロックに変換していきます。
![この段落ブロックを見出しブロックに変更](https://affi-weblog.com/wp-content/uploads/2023/06/bd7a5bfa82a9b869391c99e635f8488a.png)
![この段落ブロックを見出しブロックに変更](https://affi-weblog.com/wp-content/uploads/2023/06/bd7a5bfa82a9b869391c99e635f8488a.png)
ツールバーの一番左の段落アイコンをクリックします。
![ツールバーの一番左の段落アイコンをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/154a4d394de8d5438380e8e71691b296.png)
![ツールバーの一番左の段落アイコンをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/154a4d394de8d5438380e8e71691b296.png)
段落アイコンをクリックして表示される「見出し」をクリックします。
![段落アイコンをクリックして表示される「見出し」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/52ffb65ae7a2d0536655650dc41ed0bc.png)
![段落アイコンをクリックして表示される「見出し」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/52ffb65ae7a2d0536655650dc41ed0bc.png)
以下の通り段落ブロックが見出しブロックに変換されます。
![段落ブロックが見出しブロックに変更された](https://affi-weblog.com/wp-content/uploads/2023/06/1b5f673affe8415df56d1146daf5e064.png)
![段落ブロックが見出しブロックに変更された](https://affi-weblog.com/wp-content/uploads/2023/06/1b5f673affe8415df56d1146daf5e064.png)
見出しの階層は、H2⇒H3⇒H4のように順番に使いましょう。
![見出しの階層を選ぶ](https://affi-weblog.com/wp-content/uploads/2023/06/69931c2e47fb2de6b2f697caa4def676.png)
![見出しの階層を選ぶ](https://affi-weblog.com/wp-content/uploads/2023/06/69931c2e47fb2de6b2f697caa4def676.png)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
見出しを使うときは、階層を飛ばさずH2⇒H3⇒H4と順番に使ってくださいね
5.箇条書きを使う
当ブログ記事でもよく使用する「箇条書ブロック」も段落ブロックから「変換」することができます。
段落ブロックから箇条書きブロックに変換する手順は以下の通りです。
これらの段落ブロックを箇条書きブロックへ変換します。
![これらの段落ブロックを箇条書きブロックに変更](https://affi-weblog.com/wp-content/uploads/2023/06/b435c25e7669d94135ee0a90f1635f3d.png)
![これらの段落ブロックを箇条書きブロックに変更](https://affi-weblog.com/wp-content/uploads/2023/06/b435c25e7669d94135ee0a90f1635f3d.png)
箇条書きブロックに変換したいブロックを選択し、ツールバーの一番左にある段落アイコンをクリックします。
![ツールバーの一番左の段落アイコンをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/10a9f0c0e75f27f755bbdd022b646f39.png)
![ツールバーの一番左の段落アイコンをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/10a9f0c0e75f27f755bbdd022b646f39.png)
段落アイコンをクリックして表示された中から「リスト」をクリックします。
![ポップアップで出てきた「リスト」をクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/aa9373c4f0428f10ad005a7e0c117d15.png)
![ポップアップで出てきた「リスト」をクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/aa9373c4f0428f10ad005a7e0c117d15.png)
段落ブロックから箇条書きブロックへの変換が完了しました。
![段落ブロックから箇条書きブロックに変更完了](https://affi-weblog.com/wp-content/uploads/2023/06/05a5bde961999a3ace89557eacc2000a.png)
![段落ブロックから箇条書きブロックに変更完了](https://affi-weblog.com/wp-content/uploads/2023/06/05a5bde961999a3ace89557eacc2000a.png)
ツールバーの「順序付きリスト」をクリックすれば数字付き箇条書きにも変更できます。
![数字付き箇条書き](https://affi-weblog.com/wp-content/uploads/2023/06/a51c6b4f692e4c8bebaddf5d8f47a937.png)
![数字付き箇条書き](https://affi-weblog.com/wp-content/uploads/2023/06/a51c6b4f692e4c8bebaddf5d8f47a937.png)
以上が、段落ブロックで記事を書いて、後からツールバーから箇条書きブロックに変換するという手順です。
6.画像を追加する
次に記事に画像を追加する方法を見ていきましょう。
画像を追加するときに使うのは「画像ブロック」です。
画像ブロックを表示するため、段落ブロックの下の「+」をクリックし、表示されるメニューの中の「画像」をクリックしましょう。
![画像ブロックを使う](https://affi-weblog.com/wp-content/uploads/2023/06/63d7ce0a9e751a7e460653ef33378907.png)
![画像ブロックを使う](https://affi-weblog.com/wp-content/uploads/2023/06/63d7ce0a9e751a7e460653ef33378907.png)
画像ブロックで画像を追加する方法は3つあります。
- アップロード
- メディアライブラリ
- URLから挿入
![画像を追加する方法は3種類](https://affi-weblog.com/wp-content/uploads/2023/06/a89c7c485474c24910d8fe29922249fa.png)
![画像を追加する方法は3種類](https://affi-weblog.com/wp-content/uploads/2023/06/a89c7c485474c24910d8fe29922249fa.png)
私はいつも「アップロード」を使って追加しています。
アップロードを使って追加すると「メディアライブラリ」に画像が追加されます。
![画像ブロックでアップロードをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/8e1454cb35a060f9947750b792a41b45.png)
![画像ブロックでアップロードをクリック](https://affi-weblog.com/wp-content/uploads/2023/06/8e1454cb35a060f9947750b792a41b45.png)
「アップロード」をクリックし、フォルダから追加する画像を選択し「開く」をクリックすると画像が追加されます。
![画像を選択し「開く」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/47959c3d88172cdc8636c4a06e2b4e38.png)
![画像を選択し「開く」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/47959c3d88172cdc8636c4a06e2b4e38.png)
すると画像が追加されます。
7.カテゴリーを設定する
記事を整理するためカテゴリーは設定しておきましょう。
カテゴリーはサイドバーの「カテゴリ」から設定できます。
![カテゴリー](https://affi-weblog.com/wp-content/uploads/2023/06/f623e7a5412b7ea28cd16539939bee6e.png)
![カテゴリー](https://affi-weblog.com/wp-content/uploads/2023/06/f623e7a5412b7ea28cd16539939bee6e.png)
カテゴリー設定については、バズ部さんのWordPressのカテゴリーの設定方法から編集まで徹底解説で詳しく説明されていますので参考にしてください。
8.アイキャッチ画像を設定する
アイキャッチ画像は必須ではありませんが、設定するのがおすすめです。
記事の内容にマッチした画像を選択することで、読者の目を引きつけるだけでなく、読者に対して記事の内容を理解してもらえる効果もあるからです。
![「アイキャッチ画像」⇒「アイキャッチ画像を設定」](https://affi-weblog.com/wp-content/uploads/2023/06/91841bcdd06d8ea1c2e6f574fa234230.png)
![「アイキャッチ画像」⇒「アイキャッチ画像を設定」](https://affi-weblog.com/wp-content/uploads/2023/06/91841bcdd06d8ea1c2e6f574fa234230.png)
サイドバーの「アイキャッチ画像」⇒「アイキャッチ画像を設定」をクリックします。
![メディアライブラリでアイキャッチ画像を選択する](https://affi-weblog.com/wp-content/uploads/2023/06/2ba3093a4213fe85fb2d6ad71b6f950e.png)
![メディアライブラリでアイキャッチ画像を選択する](https://affi-weblog.com/wp-content/uploads/2023/06/2ba3093a4213fe85fb2d6ad71b6f950e.png)
アイキャッチ画像をメディアライブラリから選択し、「アイキャッチ画像を設定」をクリックします。
新規画像を使用したい場合は、メディアライブラリに新規画像をアップロードしたのちに選択します。
9.パーマリンクを設定する
最後にパーマリンクを設定します。
パーマリンクとは記事のURLのことをいい、この記事でいえば「https://affi-weblog.com/wordpress-how-to-write」の「wordpress-how-to-write」の部分を指します。
サイドバーの「概要」をクリックします。
![概要をクリック、パーマリンクが日本語](https://affi-weblog.com/wp-content/uploads/2023/06/9d07bc3246b6fb15f307bdb7d539cd4a.png)
![概要をクリック、パーマリンクが日本語](https://affi-weblog.com/wp-content/uploads/2023/06/9d07bc3246b6fb15f307bdb7d539cd4a.png)
すると、上記のようにパーマリンクが日本語になっています。
![パーマリンクを変更する](https://affi-weblog.com/wp-content/uploads/2023/06/3540990a3f9742fa13bfc8ca434ad5cb.png)
![パーマリンクを変更する](https://affi-weblog.com/wp-content/uploads/2023/06/3540990a3f9742fa13bfc8ca434ad5cb.png)
URLをクリックするとパーマリンクが修正できるので、記事で狙っているキーワードを英訳した単語に置き換えましょう。
例えば以下が具体例です。
キーワード | パーマリンク |
---|---|
ブログ 書き方 | blog-how-to-write |
ブログ WordPress 始め方 | blog-wordpress-begin |
ブログ 継続 できない | blog-not-continue |
英語として意味のある単語を使ってパーマリンクを設定しましょう。
WordPressブログの修飾の仕方【グーテンベルク】
![](https://affi-weblog.com/wp-content/uploads/2023/06/43b44b7a6c2e7741650735c3ed4b3174.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/06/43b44b7a6c2e7741650735c3ed4b3174.jpg)
続いて、ブログ記事を見やすくする記事の修飾の仕方をご紹介していきます。
今回は当ブログでよく使う4つの装飾についてみていきましょう。
【よく使う装飾】
- 太字、斜字、リンク、マーカー
- 文字色、背景色
- 文字の大きさ
- 行間の変更
装飾するときに使用するツールバーは下図の通りです。
![ツールバーの説明](https://affi-weblog.com/wp-content/uploads/2023/06/2066c961c6221fb94d10fd2b49f1a833.png)
![ツールバーの説明](https://affi-weblog.com/wp-content/uploads/2023/06/2066c961c6221fb94d10fd2b49f1a833.png)
以下に一つづつ解説していきます。
1.太字、斜字、リンク、マーカー
まずは太字、斜字、リンク、マーカーですね。
![装飾する文字を選択してツールバーで変更](https://affi-weblog.com/wp-content/uploads/2023/06/1631bec4d248bc91e641e818cb16917a.png)
![装飾する文字を選択してツールバーで変更](https://affi-weblog.com/wp-content/uploads/2023/06/1631bec4d248bc91e641e818cb16917a.png)
変更したい文字を選択して、ツールバーの該当するマークをクリックすると装飾できます。
装飾すると以下のようになります
装飾としては簡単ですが、文章にアクセントをつけてくれます。
2.文字色、背景色
文字色、背景色を設定しましょう。
![文字色、背景色を設定](https://affi-weblog.com/wp-content/uploads/2023/06/b50d379494c4be7c54bd7044bd6324e3.png)
![文字色、背景色を設定](https://affi-weblog.com/wp-content/uploads/2023/06/b50d379494c4be7c54bd7044bd6324e3.png)
文字色、背景色についても変更する文字を選択してツールバーの該当するマークをクリックします。
装飾すると以下のようになります。
・ここに文章を書いていきます(文字色)
・ここに文章を書いていきます(背景色)
文字色や背景色を使うとブログ記事に強弱をあたえてくれます。
3.文字の大きさ
次に文字の大きさを変更しましょう。
![文字の大きさを変更](https://affi-weblog.com/wp-content/uploads/2023/06/e7f144e8657c972d0bb239ee5808f1fc.png)
![文字の大きさを変更](https://affi-weblog.com/wp-content/uploads/2023/06/e7f144e8657c972d0bb239ee5808f1fc.png)
文字の大きさを変えるには以下の手順を踏みます。
- 装飾したい文字を選択
- ツールバーをクリック
- 文字サイズを「XS~XL]から選択
目立たせたい部分を「L」、注意書きなどは「XS」で書くとみなすくなります。
4.行間の変更
適度に行間を開けることで、ブログ記事はとても読みやすくなります。
SWELLでは行間を開ける方法が2つあります。
ツールバーで行間を変更する
1つの方法はツールバーを利用する方法です。
![ツールバーで行間を変更](https://affi-weblog.com/wp-content/uploads/2023/06/614ee9e35ac90d833a6200756aa910da-1.png)
![ツールバーで行間を変更](https://affi-weblog.com/wp-content/uploads/2023/06/614ee9e35ac90d833a6200756aa910da-1.png)
ツールバーで変更する場合は、ツールバーをクリックして表示される数字をクリックするだけです。
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
この方法は簡単で当ブログでもよく利用しています
スペーサーブロックで行間を変更する
2つ目の方法はスペーサーブロックを利用する方法です。
![「+」をクリックし、「スペーサー」を選択](https://affi-weblog.com/wp-content/uploads/2023/06/f07034b1c593224bb778ffccd1ba1f03.png)
![「+」をクリックし、「スペーサー」を選択](https://affi-weblog.com/wp-content/uploads/2023/06/f07034b1c593224bb778ffccd1ba1f03.png)
スペーサーブロックを使う場合はスペースを追加したい段落ブロック間の「+」をクリックし「スペーサー」を選択します。
![スペーサーブロックで行間を調整](https://affi-weblog.com/wp-content/uploads/2023/06/f6dae5f55e0d28269ffd4b573dc7431a.png)
![スペーサーブロックで行間を調整](https://affi-weblog.com/wp-content/uploads/2023/06/f6dae5f55e0d28269ffd4b573dc7431a.png)
スペーサーブロックが表示されるので青い〇を上下にドラッグして行間を調整します。
WordPressブログで記事を投稿する方法
![](https://affi-weblog.com/wp-content/uploads/2023/06/479bfb8124c7bc1af39f2143b43609a2.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/06/479bfb8124c7bc1af39f2143b43609a2.jpg)
上記までの作業で記事が出来上がるので、次に記事の投稿方法についてご紹介いたします。
とっても簡単ですよ。
上記に加えて記事を予約投稿する方法、記事を編集する方法、記事を削除する方法も合わせてご紹介しますね。
さっそく見ていきましょう。
記事を投稿する方法
![プレビュー画面の表示](https://affi-weblog.com/wp-content/uploads/2023/06/b457175d33b8e81a29630081bf4a3596.png)
![プレビュー画面の表示](https://affi-weblog.com/wp-content/uploads/2023/06/b457175d33b8e81a29630081bf4a3596.png)
記事をチェックし投稿できるようになったら右上の「プレビュー」をクリックして、見た目と内容を確認します。
![プレビュー画面](https://affi-weblog.com/wp-content/uploads/2023/06/0fde86f01c61648b6f21435398b7c63f.png)
![プレビュー画面](https://affi-weblog.com/wp-content/uploads/2023/06/0fde86f01c61648b6f21435398b7c63f.png)
見栄えと内容が確認出来たら右上のプレビューの隣の「公開」をクリックします。
![公開する手順](https://affi-weblog.com/wp-content/uploads/2023/06/5562246dadc5a75ed51eb3c56b90ff08.png)
![公開する手順](https://affi-weblog.com/wp-content/uploads/2023/06/5562246dadc5a75ed51eb3c56b90ff08.png)
「公開しても良いですか?」と確認されるので、「公開」をクリックすると投稿が完了します。
記事を予約投稿する方法
一般的に20時以降がアクセスが一番多いと言われており、20時以降に投稿することで読者が多く訪問してくれます。
そこで、ここでは予約投稿する方法を見ていきたいと思います。
![予約投稿の方法](https://affi-weblog.com/wp-content/uploads/2023/06/56cdf02849312d6153090e11e514d5c3.png)
![予約投稿の方法](https://affi-weblog.com/wp-content/uploads/2023/06/56cdf02849312d6153090e11e514d5c3.png)
「公開しても良いですか?」と確認された際に、「公開:今すぐ」をクリックして、公開したい日付・時間を入力します。
日時を入力すると、右上の「公開」が「予約投稿」に切り替わるので、予約する時間に変更して「予約投稿」をクリックすると予約投稿の設定が完了します。
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
20時以降が一番見てもらえるので、20時以降で予約投稿するとアクセスが増えますよ
記事を編集する方法
記事の編集方法をご紹介します。
![ダッシュボードで「投稿」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/31812ff98943b12947a7068565336d38.png)
![ダッシュボードで「投稿」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/31812ff98943b12947a7068565336d38.png)
WordPressの管理画面で「投稿」をクリックすると、作成された記事が一覧で表示されます。
![記事のタイトルをクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/1dcaa90e9bcf80619c88e20369c0821b.png)
![記事のタイトルをクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/1dcaa90e9bcf80619c88e20369c0821b.png)
編集したい記事のタイトルをクリックすると編集画面になります。
![編集する記事。編集が終わったら「更新」をクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/694c3cabedafc1fe18fbfaea5cf7dc94.png)
![編集する記事。編集が終わったら「更新」をクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/694c3cabedafc1fe18fbfaea5cf7dc94.png)
編集が完了したら、右上の「更新」をクリックして編集内容を保存します。
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/05/5fe0981e4b50a55844803fbc0a9ab2e0.jpg)
リライトも記事の編集なので同じ手順になります
記事を削除する方法
最後に記事の削除方法についてご説明します。
![ダッシュボードで「投稿」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/31812ff98943b12947a7068565336d38-1.png)
![ダッシュボードで「投稿」をクリック](https://affi-weblog.com/wp-content/uploads/2023/06/31812ff98943b12947a7068565336d38-1.png)
WordPressの管理画面で「投稿」をクリックすると、作成された記事が一覧で表示されます。
さらに、タイトル名にカーソルを合わせると下記のように「ゴミ箱に移動」と表示されるのでクリックします。
![「ゴミ箱へ移動」をクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/e6c40ccb0f8eda77d778567d500bf447.png)
![「ゴミ箱へ移動」をクリックする](https://affi-weblog.com/wp-content/uploads/2023/06/e6c40ccb0f8eda77d778567d500bf447.png)
下記のように「1件の投稿をゴミ箱へ移動しました」と表示されたら記事の削除は完了です。
![「一件の投稿をゴミ箱へ移動しました」の表示](https://affi-weblog.com/wp-content/uploads/2023/06/448c971b119fc28fa8669e356f4a89c1.png)
![「一件の投稿をゴミ箱へ移動しました」の表示](https://affi-weblog.com/wp-content/uploads/2023/06/448c971b119fc28fa8669e356f4a89c1.png)
※ゴミ箱に移動した記事は30日間保存されるので、30日経過するまでは元に戻すことが可能です。
まとめ:記事をたくさん書いて使い方に慣れよう!
![](https://affi-weblog.com/wp-content/uploads/2023/06/e6fd95eb902230d89cb64b700bfa28a3.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/06/e6fd95eb902230d89cb64b700bfa28a3.jpg)
今回はグーテンベルク(ブロックエディタ)の使い方を詳しく説明しました。
ポイントをおさらいすると、今回ご紹介したのは以下の4点です。
- グーテンベルクの基本操作
- グーテンベルクでの記事の書き方
- グーテンベルクでの修飾の仕方
- WordPressでの投稿の仕方
グーテンベルクを使いこなすためには「とにかく触ってブロックの使い方に慣れる」ことです。
この記事を参考にして、たくさんブログ記事を書いてみましょう!!
今回はここまでです。
最後まで読んでいただきありがとうございました。
>>実際にブログを始めたい方へ
![](https://affi-weblog.com/wp-content/uploads/2023/01/52ca555fbced519f0a834cd7f1327f31.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/01/52ca555fbced519f0a834cd7f1327f31.jpg)
実際にブログを始めたい方向けに、WordPressブログの立ち上げがたった10分できる方法をご紹介しています!
ぜひ参考にご覧ください。
![](https://affi-weblog.com/wp-content/uploads/2023/01/52ca555fbced519f0a834cd7f1327f31-3.jpg)
![](https://affi-weblog.com/wp-content/uploads/2023/01/52ca555fbced519f0a834cd7f1327f31-3.jpg)