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

Cocoon記事書き方Cocoon

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

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

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

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

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

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

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

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

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

前提条件

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

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

記事構成が完成している

  • キーワード
  • タイトル
  • 見出し(大見出し、中見出し、小見出し…)

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

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

いきあたりばったりで作る記事はあんまりいい出来にならないです

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

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

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

▼パーマリンク設定方法▼

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

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

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

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

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

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

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

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

検索を押すとググります

本文を書く

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

▼投稿→新規追加▼

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

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

タイトル入力

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

見出し作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本文入力

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

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

よく使うブロック

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

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

段落ブロック

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

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

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

リスト(箇条書き)

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

吹き出し

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

画像

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

▼画像ブロック▼
▼メディアライブラリから選択する場合▼

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

ブログカード

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

よく使う機能

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

下書き保存・プレビュー

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

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

プレビューデスクトップにチェック→新しいタブでプレビューで確認するのがおすすめです。

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

ブロックの削除

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

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

ブロックの複製

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

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

ブロックの移動

移動したいブロックを選択後、ツールバーの上と下の矢印マークで移動できます。

複製したブロックをちりばめるときによくつかいます

記事構成や文字数の確認

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

ブロックやツールバーやサイドバーをいろいろいじってみて、自分なりの書き方を見つけていきましょう

投稿設定をする

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

▼投稿タブを選択します▼

パーマリンク入力

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

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

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

カテゴリー・タグ設定

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

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

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

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

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

アイキャッチ画像設定

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

▼ファイルをアップロード▼
▼事前に作っておいた画像を選択▼
▼代替テキストを入力してアイキャッチ画像を設定▼

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

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

その他詳細設定

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

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

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

SEO対策をする

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

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

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

記事を公開する

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

▼公開おす▼
▼もっかい公開おす▼

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

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

記事公開後にやること

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cocoon記事の書き方まとめ

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

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

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

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

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

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

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

タイトルとURLをコピーしました