【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】

本記事では、WordPressテーマCocoonを使用している方へ向けて、記事の書き方をめちゃくちゃ丁寧に画像付きで説明していきます。

ブロックエディター(Gutenberg)グーテンベルクを使用している人向けです。

実はブログ初心者にとっては、初投稿までが結構な難関だったりするんですよね。

前提条件

いきなり記事を書き始める前に、次の4点が終わっていることを前提条件とさせていただきます。

最悪サーチコンソールとwebmaster Toolsの設定が終わっていなくても記事公開はできますが、グーグルやBingに反映されづらくなりますのでやっておくことをおすすめします。

記事構成が完成している

これらを事前に考えておきましょう。だいたいで良いです。執筆中に見出しが増えたり減ったりしてももちろんOK

また、途中でタイトルが変わっても全然良いですが、記事の大枠は決めておかないと着地点が意味不明なところにいくので記事構成は事前に作りましょう。

パーマリンク設定が終わっている

パーマリンクは記事のURLのことです。最初にやっておかないとSEO的にまずいことになりますので、記事投稿を始める前にやっておきましょう。

念のためパーマリンク設定の方法をサラッと書いておきますね。より詳しく知りたいという方はご自身でお調べください。

ワードプレスの編集画面から、設定→パーマリンク設定を開く。

共通設定の部分から投稿名を選択する。

カスタム構造のところに/％postname%/と書かれればOKなので、それを確認したら変更を保存する。

サーチコンソール設定が終わっている

ブログ運営にとっても役立つツールです。本記事ではここがメインではないので省略させていただきます。

Cocoon公式Google Search Consoleに登録する方法
外部リンク【2020年5月更新】サーチコンソールの設置・初期設定方法！初心者向け！

Bing webmaster Tools設定が終わっている

簡単に言えばサーチコンソールのBing版です。サーチコンソールと同様に省略させていただきます。

本文を書く

ではいよいよ投稿画面の説明に入っていきます。WordPressにログインしたら投稿→新規追加と進みましょう。

そしたら次の画像の画面になりますね。

それぞれの場所に意味がありますので、下の画像をなんとなく見ておきましょう。今後画像にある用語を使っていきますよ。

タイトル入力

まずはタイトルを追加のところにタイトルを入力します。

見出し作成

タイトルを入力したら、上から順番に記事を書いていく人もいるかと思いますが、私の場合はまずは見出しをざっと作ってしまいます。

H2→H3→H4という風に大きい見出しから順番に作っていきます。まずは大見出しのH2を段落ブロックで記入します。※H1はタイトルです。

2つ目の見出しを書く。全部のH2見出しを書くまで「Enter」で段落ブロックを作って見出しを入力していきましょう。

段落ブロックでH2見出しが全部書けたら、段落ブロックから見出しブロックにする必要があります。

これでH2見出し（大見出し）の完了です。次はH3見出し（中見出し）作っていきます。

ブロックとブロックの間にカーソルを合わせていくと、「+」のマークが出てきますので、そちらをクリックします。

H2見出しを書いた時と同じ要領でH3見出しを段落ブロックに記入していきましょう。

H2見出しを見出しブロックに変換した要領で段落ブロックから見出しブロックに変更します。

H2見出しからH3見出しにするので、またH3見出しの部分をドラッグして選択してください。

この要領でどんどん見出しを作っていきます。

これで見出しが作れました。

もっと早く見出しを作る方法

基本の見出しの作り方は上記の通りなんですが、やり方を工夫すればもっと早く見出しを作ることができます。

私は現在こっちのやり方でやってます。とても早くできるので、試してみる価値ありですよ！

本文入力

見出しが完成したら、本文を書いていきましょう。基本は段落ブロックを使って書きます。箇条書きや画像、吹き出しなんかも使って見やすくできると良いです。

よく使うブロック

本文を書くためのブロック全部をこの記事では紹介できませんので、よく使うブロックに関してみていくことにします。

全てのブロックが知りたいという方は下の関連記事をご確認ください。
関連記事Cocoonブロック一覧！全機能まとめ【初心者向け】

段落ブロック

文章を書くブロックです。このブロックを選択中に左上のブロックの追加ボタンでいろいろなブロックを呼び出すことができます。

「Enter」で改行（新しいブロック）「Shift+Enter」で（ブロック内で）改行ができます。

赤文字やマーカーなどの文字装飾はツールバーやサイドバーを駆使してください。ツールバーの使い方は下の関連記事から詳細を確認することができます。
関連記事【Cocoon】投稿画面ツールバー機能一覧｜文字色・ルビほか【初心者向け】

リスト（箇条書き）

箇条書きブロックです。だらだら本文を書くよりも見やすくなる場合が多いです。箇条書きの詳細は次の関連記事をご確認ください。
関連記事【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】

吹き出し

吹き出しブロックです。会話形式のブログや本文中のアクセントに使えます。詳しくは関連記事をご覧ください。
関連記事【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

画像

画像ブロックを選択して、アップロードをすると画像が張れます。

画像の著作権には注意しましょう。
関連記事ブログの画像はどこから選べばいいのか？おすすめのフリー画像素材サイト８選

ブログカード

リンクをきれいに表してくれるブロックです。リンクをたくさん貼るようになったときに活躍します。
関連記事【Cocoon】ブログカードの基本的な使い方【初心者向け】

テーブル（表）

家族	年齢	性別	睡眠時間
私	32歳	おとこ	7時間
妻	29歳	おんな	10時間
娘	3ヶ月	おんな	16時間
ねこ	12歳	おんな	14時間

表を作るブロックです。比較表を作るときなどに役立ちます。基本的なことから文字の色、背景の色、画像の入れ方など応用も全部説明します。
関連記事【Cocoon】表を作成する方法を丁寧に解説【テーブルデザイン】

ボタン

光ったり並べたり、いろいろできます。アフィリエイトボタンも作れます。
関連記事【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】

よく使う機能

ブロック以外に記事を書くときによく使う機能を紹介していきます。必ず知っておきましょう。

リンク

リンク設定したテキスト等をクリック/タップすると、設定した先のページを開くのがリンクです。

やりかたはリンク先のURLをコピーしたあと、リンクにしたいテキストを選択しツールバーのリンクボタンを押しましょう。

コピーしたURLを貼り付けて矢印（送信ボタン）を押せば選択したテキストがリンクになります。

URLの貼り付けではなく、キーワードで検索してもあなたの記事をリンク指定できます。

ショートコード

これらを一瞬で呼び出す機能です。ちょっと難しいですが、使えるとあなたの記事の幅が広がります。
関連記事【Cocoon】ショートコードの使い方！便利さをマジで知ってもらいたい

下書き保存・プレビュー

投稿画面の右上に並んで下書き保存とプレビューがあります。いきなりデータが吹っ飛ぶ可能性もあるので、こまめに下書き保存をしましょう。

また、プレビューで実際にどのような見え方をするのか確認しておくのも大事です。

関連記事PCでスマホ表示の確認ができる！超簡単な画面切り替え方法

ブロックの削除

不要なブロックを削除します。消したいブロックを選択後、ツールバーの右端「オプション」から選択できます。

ブロックを選択後、Shift+Alt+Zでも同様にブロックの削除ができます。

ブロックの複製

ブロックを選択後、ツールバー右端のオプションから選択できます。H4見出しとかこれでたくさん作ったりしてます。

複製したいブロックを選択後、Ctrl+Shift+Dでも同様にブロックの複製ができます。

ブロックの移動

移動したいブロックを選択後、ツールバーの上と下の矢印マークで移動できます。複数のブロックを一気に移動することもできます。

記事構成や文字数の確認

ツールバーのⓘマークを押すと、文字数や記事構造を確認できます。今何文字かな？っと確かめるときによく確認します。

/（スラッシュ）でブロック検索

何も書いていない状態の段落ブロックに/（半角のスラッシュ）を記入すると、ブロックの検索ができます。

/（スラッシュ）の後に欲しいブロック名（例：list）とか入力ですぐにブロックを呼び出せるので便利です。

ローマ字と日本語で検索結果が変わります。スラッシュが半角だからそのままローマ字うちできるように日本語のブロックをローマ字で辞書登録するとより便利ですよ。

投稿設定をする

本文が書けたら、サイドバーから投稿の設定をしていきます。

パーマリンク入力

URLスラッグを入力します。記事のURLの最終部分になります。数字の並びなどではなく、意味のある言葉を英語かローマ字で入力しましょう。

ひらがなや漢字で入力すると意味不明な％ばかりのURLになるのでやめた方がいいです。

SEO的な意味もあるので、なるべくシンプルに作り、公開後は変更しないつもりでいてください。

カテゴリー・タグ設定

どのカテゴリーにするかをチェックします。カテゴリー構造で親カテゴリーや子カテゴリーがある場合は子カテゴリーにだけチェックすれば問題ありません。

また、複数のカテゴリーを選択することもできます。

その場合はちょっとスクロールしたところにメインカテゴリーを設定するところがあるのでそこでメインカテゴリーを指定しましょう。

タグを設定する場合はタグもつけましょう。

インスタやツイッターのハッシュタグみたいにたくさんつけるのはあまりよろしくないので、関連するタグを一つか二つつけると良いと思います。

アイキャッチ画像設定

記事の顔「アイキャッチ」を設定します。

代替テキスト（alt属性）を入力すると何かの理由でアイキャッチが表示されないときに代わりにこの文字が表示されます。

また画像検索にも引っかかるようになるので、キーワードを入力するようにしておきましょう。

その他詳細設定

その他サイドバーで設定できることを紹介していきます。あまり重要でないことが多いですが、一応知識としては持っておきましょう。

SEO対策をする

最後は投稿画面の下側にあるＳＥＯ対策をしましょう。一応した方がいいらしいです。

記事を公開する

ようやく記事の公開ができます。投稿画面の右上から公開ボタンを押しましょう。

そしたら、記事公開後にやっておくこともありますので、そちらを確認しましょう

記事公開後にやること

記事を公開したら一息つきたい気持ちもあると思います。でもあとちょっとだけ、我慢してやることやりましょう。がんばです。

パソコン・スマホで記事チェック

公開した記事をパソコンとスマホの両方でチェックしましょう。

ケアレスミスは結構あります。見直しは大切です。

別記事から内部リンクを貼る

記事を公開したらURLが確定しますので、既に公開している過去記事から今回の記事へ内部リンクを貼ってあげましょう。

サーチコンソール・Bing Webmaster ToolsにURL送信

サーチコンソールとウェブマスターツールに公開した記事のURLを送信して、インデックスしてもらうように要求しましょう。

これでいくらか待てば、サーチコンソールがインデックス登録することを了解してくれます。

次はウェブマスターツールです。

これでBingにもインデックスの要求ができました。以上で記事の公開後の作業もすべて終了です。

Cocoon記事の書き方まとめ

本記事では、【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】

ということでこれからワードプレスで初めて記事を書く方、記事投稿を始めて間もない方向けに記事の書き方を丁寧に解説してきました。

記事を書くのって、文章を考えるだけじゃダメなんですよね。ワードプレスの使い方を知らないととっても大変。

ちょっとずつでいいから慣れていけば、いつかスラスラとできるようになります！あなたのペースでブログ運営を楽しんでいきましょう。

その手助けができたのならば私はとてもうれしく思います。

よりブロックエディターを便利に使って記事執筆スピードを上げたい！という方はこちらのページにGutenbergの便利機能が書いてありました。参考にしてみてください。
参考ページ【Gutenberg】人気ワードプレス・テーマのフォーラムが追及する「グーテンベルグの使い方・Tips」 | 雑談 | Cocoon フォーラム

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。