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

Cocoon記事の書き方 Cocoon

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

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

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

  • 知らない用語がたくさんあってよくわかんないし
  • WordPressワードプレスなんて使ったことないし
  • ググろうにもなんて検索したらよくわかんない

わかんないことばかりで先に進めませんー

そんな初心者さんを救うために、投稿画面の使い方をしっかりお伝えしていきます。

これだけは知っておいて欲しいという本当に基本的な部分に絞ってありますので、きちんと読んで身に着けて欲しいと思います。

それでは、あなたのワードプレス編集画面を開きながら一緒に作業をしていきましょう。

本記事でご紹介するやり方は筆者(峠)が実際に投稿画面でやっているやり方です。記事の書き順やブロックエディターの使い方は人それぞれ異なってきますので、最終的にはあなたなりのやり方を見つけていただければと思います。

前提条件

いきなり記事を書き始める前に、次の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はタイトルです。

▼見出しを作っていく要領▼
  • 段落ブロックに見出しを書く
  • 見出しを全選択してブロックタイプを変更
  • 見出しレベルを変更

画像を追いながらやっていきましょう

▼タイトルの下の段落ブロックに最初の見出しを書く▼
見出しを書く
▼1つ目の見出しを入力して「Enter」▼
見出しを書いたらエンター

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

▼できた段落ブロックに2つ目の見出しを書く▼
2つ目の見出しを書く
▼H2見出しが全部書けました▼
H2見出しを全部書いたあと

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

▼ドラッグで見出しにする段落ブロックを全部選択▼
見出しをドラッグ&ドロップ
▼1 ツールバーのブロックタイプまたはスタイルを変更ボタンを押す▼
▼2 見出しを押す▼
ツールバーで見出しに変換
▼段落ブロックからH2ブロックに変更できました▼
H2見出しが完成

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

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

▼「+」を押して段落を押す▼
段落

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

▼H3見出しを段落ブロックに書く▼
段落ブロックに入力

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

▼H3見出しの部分をドラッグして選択▼
H3をドラック
▼1 ブロックまたはスタイルの変更を押す▼
▼見出しを押す▼
ツールバーで見出しを変える
▼H2見出しになる▼
H2見出しに変換

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

▼H3見出しを選択後、1 見出しレベルを変更ボタンを押す▼
▼2 H3を押す▼
ツールバーでH3見出しに変換
▼H3見出しが完成▼
H3見出しが完成

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

▼見出しを作っていく要領(おさらい)▼
  • 段落ブロックに見出しを書く
  • 見出しを全選択してブロックタイプを変更
  • 見出しレベルを変更

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

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

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

やり方
  • 『##』というように段落ブロックに半角のシャープをふたつ書く
  • スペースを押すとH2ブロックになる
    • ※H3の場合は#が3つ、H4の場合は4つ並べる
  • 見出しを1個作ったらCtrl+Shift+Dで見出しを必要な数複製する
  • 見出しに文字を書く

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

本文入力

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

▼基本の書き方▼
  • 段落ブロックに文章を書く
  • 「Enter」で改行(新しいブロックができる)
  • ツールバー左上の「ブロックの追加(+)」でいろいろブロックが選べる
  • 段落と段落の間にカーソルをもっていっても「+」が出る
▼ブロックの追加ボタンの位置▼
ブロックを追加ボタンの位置

よく使うブロック

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

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

段落ブロック

段落ブロック

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

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

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

リスト(箇条書き)

リストブロック

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

吹き出し

吹き出しブロック

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

画像

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

画像ブロック
▼画像ブロック▼
画像ブロックが表示される
▼メディアライブラリから選択する場合▼
メディアライブラリから画像選択
選択した画像

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

ブログカード

ブログカードブロック

リンクをきれいに表してくれるブロックです。リンクをたくさん貼るようになったときに活躍します。
関連記事【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のメタディスクリプションと同じ効果と考えておけばいいと思います
  • ディスカッション
    • コメントを許可するか
    • ピンバックとトラックバックを許可するか
    • あなたの好みで良いと思います
  • 広告
    • アフィリエイト記事ならチェックしてアドセンスを除外しましょう
  • ページ設定
    • メインカテゴリー
      • 複数のカテゴリを選択した場合はメインカテゴリを指定しときましょう
    • ページタイプ
      • 普通のブログ記事ならデフォルトで良いです
    • 読む時間を表示しない
      • Cocoon設定→本文で読む時間を表示するにした場合でも、ここで表示しないに設定すればこの記事だけ表示しなくなる
    • 目次を表示しない
      • いつもは表示するけどこの記事だけ表示しないって時にチェックする
  • 更新日の変更以下はいじったことがないので、このままでよいと思います。

以上で投稿設定が終了です。もう少しで公開できます。

SEO対策をする

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

SEO対策入力
  • SEOタイトル
    • 本文のタイトルをそのままコピペしましょう。ここのタイトルが検索結果に出ます。
  • メタディスクリプション
    • 記事の要約を入れてあげましょう。ここも検索結果に出ます。無記入の場合は記事の初めの部分が検索結果に出ます
  • メタキーワード
    • 記事に関連するキーワードを入れましょう。私は面倒なので入れてません。自動で設定されるものに任せています
  • インデックスしない
    • この記事が検索しても出てこないように設定すること。普通はインデックスするのでチェックしない
  • リンクをフォローしない
    • 主にスパム対策で導入されたもの、よくわからなければチェックしなくて良い

あなたのプラグインの状況によってはほかにも項目があるかもしれませんが、基本的には上記の項目をやっておけばOKです

記事を公開する

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

▼公開おす▼
記事公開を押す
▼もっかい公開おす▼
記事公開をもう一度押す

おめでとうございます。これで記事の公開が完了です

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

記事公開後にやること

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

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

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

  • 見づらいところはないか
  • 誤字脱字はないか
  • リンクミスってないか

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

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

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

読者にも機械にも回遊しやすいブログになります。

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

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

▼サーチコンソールを開いてURLを入力しEnter▼
サーチコンソールにURL入力
▼サチコが検査する▼
URLの検査
▼登録されてない場合は登録されていませんになる▼
▼インデックス登録をリクエストを押す▼
インデックス登録をリクエスト

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

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

▼左のメニューからURL送信を押す▼
▼その後右上のURL送信を押す▼
URLの送信
▼URLを上の四角に入力して送信▼
URLの入力

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

Cocoon記事の書き方まとめ

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

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

2記事分くらいのボリュームになってしまいましたね

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

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

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

ライティングの勉強にはこちらの本がおすすめ

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

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

Cocoonの使い方

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

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

コメント