はじめてのブログ投稿【WordPress】ブロックエディタ(Gutenberg)の使い方をわかりやすく解説
![](https://omochi-style.com/wp-content/uploads/2023/09/dcea14835c8a9fbed6e54bfd4f259e24.jpg)
こんにちは。おもち(@omochibigaku)です。
こちらのページでは、WordPressのブロックエディタ(Gutenberg)をつかってブログ記事を書く方法についてわかりやすく解説していきます。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
初心者でも大丈夫!一緒にやってみよう!
はじめに:投稿と固定ページの使いわけ
![](https://omochi-style.com/wp-content/uploads/2023/09/f219dd310e4f96050a4125d73136ae30.jpg)
WordPressでは『投稿』と『固定ページ』をつかって記事を書いていきます。
『投稿』は
- 通常の記事
を書くときにつかいます。
『固定ページ』は
- プロフィール
- お問い合わせ
- 利用規約/プライバシーポリシー
などを書くときにつかいます。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
記事の書き方はどちらも同じだよ!
今回は『投稿』をつかって、ブログ記事を書く方法について解説していきます。
STEP1.投稿ページをひらこう
![](https://omochi-style.com/wp-content/uploads/2023/09/6f07994ba1b3ed67ab8d2af21e576eb8.jpg)
画面左にあるメニューの『投稿』にカーソルをもっていき、表示された『新規追加』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/152ae931b19b42772476b81acc0ad223.jpg)
投稿ページがひらきました。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
こちらに記事を書いていくよ!
STEP2.記事の書き方を覚えよう
タイトルの書き方
![](https://omochi-style.com/wp-content/uploads/2023/09/287229f43de2ea695d1010bbaf657e27.jpg)
『タイトルを追加』をクリックすると、ブログ記事のタイトルが入力できます。
本文の書き方
![](https://omochi-style.com/wp-content/uploads/2023/09/832e7abe7c90375d370c07f77bc5cd63.jpg)
『ブロックを選択するには~』をクリックすると、本文が入力できます。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
enterキーを押すと、改行できるよ!
テキストリンクを入れる方法
![](https://omochi-style.com/wp-content/uploads/2023/09/7c6ed0758b6b3eff4819aa3ae17eec24.jpg)
テキストリンクを入れたい文章を書きます。
![](https://omochi-style.com/wp-content/uploads/2023/09/926db6b4cafb1e7e908f018a8b67e0f4.jpg)
テキストリンクにしたいワードをドラッグして範囲指定します。
![](https://omochi-style.com/wp-content/uploads/2023/09/b21ce81168661a4a74eacab928d469f1.jpg)
リンクマークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/4e75ab4b3599e4e2d176af613dc9b098.jpg)
リンク先URLを入力。
![](https://omochi-style.com/wp-content/uploads/2023/09/052391aaf12b45b9a0887cef5f68b270.jpg)
入力できたらEnterキーを押します。
![](https://omochi-style.com/wp-content/uploads/2023/09/cbfe9d07b38b4b814b0d594f4fc0c4d2.jpg)
これでテキストリンクを入れることができました。
![](https://omochi-style.com/wp-content/uploads/2023/09/ab5e2eadf013f6a6dd6181378bab6cf4.jpg)
リンクを修正したいときは、テキストリンクをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/b1cb91c4302cc04447f4a12039b3f825.jpg)
編集マークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/63e2c3a82adcd0a28e3fb448ee1a9b2f.jpg)
こちらでテキストリンクの編集ができます。
![](https://omochi-style.com/wp-content/uploads/2023/09/35dbffd2f9502709a9eb92fb38976de9.jpg)
リンク先ページを別のタグでひらかせたい場合は『高度』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/3ff5aef246a1ff34a790e5d279a00a8e.jpg)
新しいタブで開くにチェック。
![](https://omochi-style.com/wp-content/uploads/2023/09/1c8ed19860466e2056a3ef6bbd686887.jpg)
『保存』ボタンをクリック。
これでリンク先ページが別タブでひらくようになります。
リンク先ページが自分のブログ内であれば『新しいタブで開く』設定は不要です。自分以外のサイトをひらいてもらう場合は『新しいタブで開く』にチェックを入れると、ユーザーに親切な設計になるのでおすすめです!
太字にする方法
![](https://omochi-style.com/wp-content/uploads/2023/09/d6508f8f5f01e514d694c652540fec9e.jpg)
文章を書きます。
![](https://omochi-style.com/wp-content/uploads/2023/09/4d57bf95c1b7c9f9de04d1157307cd24.jpg)
太字にしたいところをドラッグして範囲指定します。
![](https://omochi-style.com/wp-content/uploads/2023/09/5052a9eedd7c2b38ec8b73db41332a54.jpg)
『B』マークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/7f2eebe4b8f1974cec6fdf7e22d9c8ab.jpg)
太字にすることができました。
吹き出しを入れる方法
吹き出しの設定が終わっていない方は、さきに吹き出し設定をすませてください!
![](https://omochi-style.com/wp-content/uploads/2023/09/cd8520b00dd33ea75d0b685e37c3488c.jpg)
吹き出しを入れたい行の右側にある『+』マークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/2406fc13a3a18b5fdd7a0680b81b4c23.jpg)
『吹き出し』をクリック。
『吹き出し』が表示されていない場合は、検索窓に『吹き出し』と入力してください。
![](https://omochi-style.com/wp-content/uploads/2023/09/164823fe8a22310dc47e691e832e3586.jpg)
吹き出しが表示されるので、あとは吹き出し部分にテキストを入力すればOKです!
![](https://omochi-style.com/wp-content/uploads/2023/09/b9dc036a34aa7f1b786788613d740dfa.jpg)
吹き出しをいくつか設定している場合は、画面右側にある『ブロック』の『登録済みの吹き出し』から、吹き出しの種類を変更できます。
ブロックに『登録済みの吹き出し』が表示されない場合は、記事内にいれた吹き出しのキャラクター部分をクリックすると、表示されるようになります。
画像を入れる方法
![](https://omochi-style.com/wp-content/uploads/2023/09/cd8520b00dd33ea75d0b685e37c3488c.jpg)
画像を入れたい行の右側にある『+』マークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/f6b2bdf64de155d693f480529177997b.jpg)
『画像』をクリック。
『画像』が表示されていない場合は、検索窓に『画像』と入力してください。
![](https://omochi-style.com/wp-content/uploads/2023/09/2235d3c2cf949709ecc006daba1982ce.jpg)
まだWordPressにアップロードしていない画像を選択したい場合は『アップロード』ボタンをクリック。
挿入したい画像を選択してください。
![](https://omochi-style.com/wp-content/uploads/2023/09/54d1fe87970395cb58537ef37fc01a95.jpg)
すでにWordPressにアップロードした画像を、再度、つかいたい場合は『メディアライブラリ』ボタンをクリック。
挿入したい画像を選択してください。
見出しを入れる方法
![](https://omochi-style.com/wp-content/uploads/2023/09/cd8520b00dd33ea75d0b685e37c3488c.jpg)
見出しを入れたい行の右側にある『+』マークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/4f111a7419084eda13891e37c1db68e9.jpg)
『見出し』をクリック。
『見出し』が表示されていない場合は、検索窓に『見出し』と入力してください。
![](https://omochi-style.com/wp-content/uploads/2023/09/2a5adfdce9c37af4cfd0ceecd888359e.jpg)
あとは見出しにつかいたいテキストを入力すればOK!
![](https://omochi-style.com/wp-content/uploads/2023/09/3425bbc652d1382eb9d600cfbe91c072.jpg)
見出しの大きさをかえたいときは『H2』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/3ebf5d58de717e2e664c021081f3154e.jpg)
こちらで見出しの大きさを変更できます。
見出しのデザインは、カスタマイズ画面で変更できます!
アフィリエイト広告を入れる方法
![](https://omochi-style.com/wp-content/uploads/2023/09/A8-36.jpg)
画面右側にある『+』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/A8-37.jpg)
検索窓に『html』と入力。
![](https://omochi-style.com/wp-content/uploads/2023/09/A8-38.jpg)
『カスタム HTML』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/A8-39.jpg)
『HTML を入力』に、掲載したい広告のアフィリエイトリンクを貼ってください。
![](https://omochi-style.com/wp-content/uploads/2023/11/A8-39.jpg)
リンクが貼れたら『プレビュー』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/A8-41-2.jpg)
これでアフィリエイト広告を入れることができました。
下書き保存する方法
![](https://omochi-style.com/wp-content/uploads/2023/09/2340c1a2e3c2228600abf99925580add.jpg)
画面右上にある『下書き保存』をクリックすると、記事の下書きが保存できます。
STEP3.プレビュー画面をひらこう
![](https://omochi-style.com/wp-content/uploads/2023/09/00bae2897f05392dc7bf805a5d2ffb47.jpg)
ある程度、記事が書けたら、プレビュー画面をつかって、実際にどんな感じで表示されるのか確認していきましょう。
画面右上にあるプレビューマークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/dc424ba2c3f015ee3351b73362966c74.jpg)
『新しいタブでプレビュー』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/828ede174f23a35589e3ff4e06e2ef89.jpg)
プレビュー画面がひらきました。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
記事が読みやすいかどうか、確認していこう!
STEP4.必要な設定をしよう
![](https://omochi-style.com/wp-content/uploads/2023/09/d82a8c92156ec6ccc9de2df668c0e611.jpg)
画面右上にある設定マークをクリックすると、
![](https://omochi-style.com/wp-content/uploads/2023/09/b3194a75fec77fb8b5bb0c0d50cbce2c.jpg)
設定画面が表示されます。
パーマリンクを設定する方法
![](https://omochi-style.com/wp-content/uploads/2023/09/6b5ad6a021c9ec1153281f623e5d4006.jpg)
URLの右側にある文字列をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/1aa7a76ad3fc5f5b677b9311ee0f6905.jpg)
こちらに、記事にふさわしいパーマリンクを入力していきましょう。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
パーマリンクは記事のURLになる文字列のことだよ!
自由に文字が入力できない場合は、さきにこちらの設定をすませてください。
![【WordPress】パーマリンクの設定を変更してSEOに最適なURLを手に入れよう](https://omochi-style.com/wp-content/uploads/2023/08/アイキャッチ:パーマリンク-320x180.jpg)
![](https://omochi-style.com/wp-content/uploads/2023/09/61ee4b59b802a5c7fe36952dacc15269.jpg)
パーマリンクを見ただけで、何について書いてある記事なのかが判断できるような文字列にするのがおすすめです。
![](https://omochi-style.com/wp-content/uploads/2023/09/471529f9121cbfdb94cb861323ad268d.jpg)
パーマリンクが入力できたら『×』マークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/84eb7fbf8a93126bc978acb6810434ab.jpg)
これでパーマリンクが設定できました。
カテゴリーを設定する方法
![](https://omochi-style.com/wp-content/uploads/2023/09/0df97b6a86511df6f78dea9465871bf2.jpg)
設定画面を下にスクロールすると『カテゴリー』があるので、ブログ記事にふさわしいカテゴリーを選択してください。
カテゴリーが表示されない方は、さきにこちらを済ませてください。
![【WordPress】効果的なカテゴリーの作り方と設定方法](https://omochi-style.com/wp-content/uploads/2023/09/e806337e8d867230ad4a8741d12c41f1-320x180.jpg)
アイキャッチ画像を設定する方法
![](https://omochi-style.com/wp-content/uploads/2023/09/5c2163c5aa667ec0b19c6dd147fafcac.jpg)
『アイキャッチ画像を設定』をクリックすると、ブログ記事のアイキャッチ画像が設定できます。
ブログ記事にふさわしい画像を選択してください。
STEP5.ブログ記事を公開しよう
![](https://omochi-style.com/wp-content/uploads/2023/09/521bdebf8524989901efb6a729c41014.jpg)
ブログ記事が書き終わったら、画面右上にある『公開』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/b964ae313e724653d9ac78eee366403c.jpg)
日時を指定して公開したい場合は『公開:今すぐ』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/1b01eff779de57829b78f7057c0e9413.jpg)
お好きな日時を指定してください。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
とくに指定する必要がないときは、なにもしなくてOK!
![](https://omochi-style.com/wp-content/uploads/2023/09/f3ccb81e761151bad23cebc5e1cce4df.jpg)
さいごに『公開』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/947aef220e36b767fab6cd36bd33d1b9.jpg)
これでブログ記事が公開できました。
![](https://omochi-style.com/wp-content/uploads/2023/09/3e64d4b7c936d8a6ada4599502575f41.jpg)
『投稿を表示』ボタンをクリックすると、
![](https://omochi-style.com/wp-content/uploads/2023/09/e91e1caaec49fc73a3d2d3dbe561e0b6.jpg)
公開されたブログ記事を表示することができます。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
この調子で、どんどん記事を書いていこう!