cocoon初心者向けの記事作成~公開までの手順|文字編集、画像挿入、便利機能を解説

cocoonマニュアル

ワードプレスを始めたばかりの人、

cocoonのテンプレートを使いはじめたばかりの人、

いざ記事を書いて投稿したくても操作方法がイマイチよく分からないって悩んでいませんか?

そういう方のために、最低限ここまでは知っておいた方がいいと私が思える基本操作方法を解説します。

画像付きで説明しますので、それを見ながら練習してみてください。

 

自分のブログの「ダッシュボード」を開きます。

左側の「投稿」をクリックします。

 

「新規追加」をクリックします。

どちらの「新規追加」ボタンでもかまいません。

 

「タイトル」を入力します。

まずは、これから書く記事のタイトルを考えて入力します。

この記事タイトルがGoogleやYahoo!などの検索結果に表示されます。

スマホとパソコンでは表示される文字数が違います。

文字数は、32文字~42文字にしましょう!

最近はスマホで検索する人の方が圧倒的に多いので、スマホでは42文字まで表示されるようになっています。

32文字以下の少ない文字数の記事タイトルはしない方がいいです。
せっかく32文字~42文字まで表示してくれるわけですから、フルに使わなければモッタイナイのです。
文字数が多ければ、それだけ検索キーワードをたくさん記事タイトルに入れることができますよね。
1つキーワードで検索する人は少なく、最近は3つ、4つのキーワードを入力して検索しています。
GoogleやYahoo!で検索されやすいキーワードを見つける方法は以下をご参考になさってください。
>> 検索キーワードの見つけ方
例として、このような記事タイトルを入力しました。

 

「下書きとして保存」をクリックします。

記事タイトルを入力したら、ここでいったん、画面の右上の方にある「下書きとして保存」をクリックします。

今後、記事を書いたり、画像を追加したり、修正したりする時には、コマメに「下書き保存」をする癖をつけておきましょう。
停電などで折角書いた記事が消えてしまうほど悲しいことはありませんからね。

 

「パーマリンク」を編集します。

次に、パーマリンクを編集しておきましょう。

この作業を忘れてしまうと、今後のアクセスにも悪影響が出ますので絶対に忘れないでください!

*パーマリンクとは?

そもそもパーマリンクってな~に?という方もいらっしゃるかもしれませんね。

以下をご覧ください。

これは今読んでいただいている記事のURLです。

https://blog-adviser.com/cocoon-classic/

青文字の部分は、このブログのURLです。

 

ワードプレスでは、記事の1つ1つにそれぞれ独自のURLを自分で作成することができます。

https://blog-adviser.com/cocoon-classic/

それが、オレンジの部分で、パーマリンクになります。

 

例えばアメブロなどの無料ブログでは、

https://ameblo.jp/lohaskatas/entry-12235220984.htmlというURLになっています。

https://ameblo.jp/lohaskatas/までは、私のアメブロのURLですが、そのあとのentry-12235220984.htmlは、アメブロ側で任意のパーマリンクが付けられているわけです。

これは、Googleなどの検索でヒットさせるためには良くないのです。

ちなみに、Google は URL に対して以下のように推奨しています。

アメブロなどの無料ブログが今はなかなかGoogleで上位表示されなくなっている要因はここにもあるわけです。

 

それでは、具体的にパーマリンクの編集手順を解説します。

記事タイトルを入力して、「下書きとして保存」をクリックすると、以下のような状態になります。

今のままでは、記事のURLがタイトルの日本語のままになっていますよね。

URLは半角英数字にしなくてはいけません。

「編集」ボタンをクリックします。

いったん日本語の部分を消します。

 

記事内容を連想するような半角英数字の文字を入力します。

入力したら「OK」をクリックします。

次に、必ず「下書きとして保存」もクリックするのを忘れないで下さい。

 

パーマリンクは無理に英語にする必要はありません。
日本人にはローマ字という便利な文字がありますので活用しましょう。
(例)パソコン ⇒ pasokon_(アンダーバー)、-(ハイフン)で単語をつないでもOKです。
ただし、あまり長くなってしまうのは良くありませんのでご注意ください。

 

SEO設定

次に重要な作業が「SEO設定」です。

SEOについては初心者には難しい説明になるため割愛します。

Googleなどで検索されやすく、さらに上位表示されやすくするために必要な設定とだけ覚えていてください。

ただし、この作業は必須です!

特に、あとで解説する「メタディスクリプション」は絶対に入力しておくことを忘れないで下さい!

 

画面を下に下げていくと、「SEO設定」という項目があります。

「SEOタイトル」は、最初の記事タイトルをコピペすればいいです。

次に「メタディスクリプション」を入力します。

「メタディスクリプション」とは、これから書く記事の概要です。

140以上160文字以内にまとめてください。

 

Googleなどで検索すると以下のような表示が並びますよね。

この黄色の枠内をメタディスクリプションといいます。

あなたは、何かについて検索して表示された沢山の情報の中から、何をポイントにして選んでクリックしていますか?

記事タイトルは必ずチェックしますよね。

でも、メタディスクリプションにも目を通しているはずです。

自分が求めてる答えが書いてありそうかどうかは、タイトルとメタディスクリプションを読んで判断しているはずです。

だからこそ、あなたも記事ごとにメタディスクリプションの入力は絶対に忘れてはいけないのです。

メタディスクリプションにも、検索キーワードを盛り込んでおくことが大切です。

Googleはメタディスクリプションの中のキーワードも検索に反映させているからです。

記事タイトルに入れられなかった検索キーワードを、メタディスクリプションに入れておきましょう。

または、以下のようなテクニックもあります。

例えば、「片づけ」で検索する人もいれば、「片付け」や「かたづけ」で検索する人もいますよね。
そこで、記事タイトルには「片づけ」を使い、メタディスクリプションには「片付け」や「かたづけ」を使って文章を書いておけば、全てのキーワードにヒットできます。

 

アイキャッチ画像の設定

次に行う設定作業は「アイキャッチ画像」の設定です。

アイキャッチ画像とは以下のようなものです。

記事タイトルの下に表示されるイメージ画像の事です。

記事の一番最初に表示させるイメージ画像ですので、記事の内容に関連した画像を設定するようにしてください。

全然関連がない画像を表示しているとGoogleにマイナス評価されてしまいます。

または、アイキャッチ画像がないと、その部分は「No Image」と表示されますので、せっかく記事を読みに来てくれた人にマイナスイメージを与えてしまいます。

 

●画像は、800×600ピクセル以上
●横長の画像(縦画像にはしないこと)
●Google画像検索や他人の画像は使用禁止!
●芸能人などの画像を使うと訴えられることもあります。
以下のサイトは、無料で個人的にブログに使える画像を提供してくれていますのでオススメです。

アイキャッチ画像の設定方法

画面の一番下の右端に「アイキャッチ画像を設定」がありますのでクリックします。

 

次に、「ファイルをアップロード」をクリックします。

次に、「ファイルを選択」をクリックします。

 

自分のパソコンなどに保存している画像をどれか選び、下にある「開く」をクリックします。

 

画像のアップロードが完了するので、下にある「アイキャッチ画像を設定」をクリックします。

 

無事にアップロードと設定ができました。

 

画面の一番上の右側にある「プレビュー」をクリックします。

 

記事を書いていくと、今の時点でどんな感じの表示になっているのかを確認したい時があります。
そういう時には、「プレビュー」をクリックすれば見ることができます。
「プレビュー」は大変便利な機能ですので大いに活用するようにしましょう!
プレビューで見てみると以下のようになっています。

 

記事タイトルの下にイメージ画像のアイキャッチ画像がちゃんと表示されています。

 

記事を書く時の手順と便利な機能

さて、いよいよ記事を書いていきましょう。

でもその前に以下のような画面になっている人はいませんか?

 

赤枠のボタンをクリックしてください。

すると以下のように設定ボタンが増えますので、必ずこの状態にしておきましょう。

 

カテゴリーの設定、追加

これから書く記事をカテゴリー分けすることができます。

既にカテゴリーを作成している人は、どのカテゴリーに入れるのかチェックを入れます。

まだカテゴリーを作成していない人、カテゴリーを追加したい人は以下の手順で操作してください。

 

右側に以下のような場所があります。

「新規カテゴリーを追加」をクリックします。

 

カテゴリー名を入力します。

ここでは「cocoonマニュアル」と入力しました。

入力後は、「新規カテゴリーを追加」をクリックします。

 

カテゴリーはブログの右側に表示させることができます。

読者はこのカテゴリーを見て、読みたい記事を探すことができます。

 

記事作成の手順

さて、記事を書いていきましょう。

 

まずは序文(はじめに)の文章を書く

ブログの上級者はいきなり本文を書くのではなく、序文を書きます。

小説などの本には必ず序文やはじめにという部分があるはずです。

この記事にはこういうことを書いていますよとか、読者に問いかけをしてみるとか、続けて読みたくなるような誘導文にすることが望ましいです。

長文にすることはありませんし、ここが長文だと読むのが嫌になってしまいますので短い文章で構いません。

最初は馴れないので、記事の大まかな概略を数行書くようにしてみましょう。

 

まず文字を入力する前に、「ビジュアル」をクリックしておきましょう。

因みに、左下に「文字数」という表示があります。

これは今時点で何文字書いているかを教えてくれる機能です。

Googleは読者がこの記事を何分読んでいるかも評価の基準にしています。

一般的には平均3分以上が高評価されると言われています。

と考えると、文字数は最低3,000文字以上にした方がいいです。

読者は1文字1文字丁寧に読んでくれません。

スマホだと特に下にスクロールしながら流し読みしますよね。

3分以上読んでもらえる記事にするためには、記事の内容がタメになったり、面白かったり、丁寧に書いてあることが一番のポイントと同時に、文字数も多い方がいいのです。

そのため、記事を書いていきながら、この部分を見れば今時点で何文字かを確認することができます。

ただし、初心者の人があまり文字数ばかり気にしていると苦痛になりがちなので、最初の頃は記事の内容に注力して書くようにした方がいいです。

 

目次機能を活用する

cocoonには、最初から目次を作成できる機能が備わっています。

本には目次があるので読みたいページをすぐに開くことができますよね。

ブログの読者は短気だと思っておきましょう ^^

自分が求めている答えがどこに書いてあるのかが分かりやすいと読みやすいですよね。

 

cocoonの目次は以下のように表示されます。

 

また先程、文字数は3,000文字以上を心掛けましょう!とお話ししましたが、なかなか原稿用紙8枚以上と考えるとモチベーションが下がりがちです。

そこで、私の記事の書き方を伝授します。

以下のように、これから書く記事の「見出し」をとりあえず書いていくのです。

頭に浮かぶ言葉でもいいし、ポイントでも構いません。

この「見出し」を最低10個作ります。

そして、1つの「見出し」に300文字書けば、10 × 300 で全体で3,000文字に。

1つの「見出し」に500文字書けば、10 × 500 で全体で5,000文字になりますよね。

この方法で書くことに馴れてくると、3,000文字にとどまらず、10,000文字でもストレスなく書けるようになっていきますよ。

 

目次(見出し)機能の操作方法

それでは、次に先ほどの「見出し」を目次にする操作方法を解説します。

1つの見出しを選び、「段落」をクリックします。

 

「見出し1」は、記事タイトル用ですので使わないで下さい。

数字が大きくなるほど、見出しの表示は小さくなります。

ここでは「見出し2」を選びます。

 

すると以下のようになります。

大きな「見出し」になりましたね。

 

では次は、少し小さな見出しにしてみます。

見出しにする文章を選択します。

今度は「見出し3」を選びます。

 

すると以下のようになります。

 

次は、「見出し4」を選んでみましょう。

同じように見出しにする文章を選択します。

 

「見出し4」を選びます。

 

すると以下のようになります。

 

現時点でブログはどんな感じになってるのかを「プレビュー」で見てみます。

目次が自動で作成できているのが分かりますよね。

そして、記事作成欄には「見出し2」~「見出し4」まで大中小の大きさの見出しが表示されています。

「見出し5」以上もありますが、せいぜい「見出し4」まででいいと思います。

 

因みにいったん「見出し」にしてしまった文章を元に戻したい時の操作方法は、その文章を選択して「段落」を選べば「見出し」はリセットされます。

 

画像の挿入方法

記事の中に画像を入れたい時の操作方法を解説します。

「アイキャッチ画像」を設定した時と基本的に同じ方法です。

画像を入れたい場所にカーソルを置いておきます。

次に「メディアを追加」をクリックします。

 

自分のパソコンなどに保存している画像の中から1枚選び、下段の「開く」をクリックします。

 

 

画像のアップロードが終わりましたら以下のような画面になります。

「配置」とは、画像を表示させる場所です。

常に「中央」にしておくのがいいでしょう。

画像の表示サイズを選べますが、「中」か「フルサイズ」にしましょう。

最後に「投稿に挿入」をクリックします。

 

記事の中に画像が挿入できました。

 

文字の装飾・加工方法

他の人のブログを見ていると、文字に色がついてたり、太字になっていたり、下線が引かれてたりしていますよね。

cocoonには、こうした文字の装飾機能も豊富に備わっています。

まずはベーシックなことから解説していきましょう。

 

文字の色を変える方法

色を変えたい文字の範囲を決めます。

次に、赤矢印の部分「テキスト色」の▼をクリックします。

 

どの色にしますか?と表示されますので、どれかを選びます。

ここでは赤を選びます。

 

以下のように文字の色が変わりました。

選択した文字だけが赤色になりましたね。

 

文章にラインマーカーを引いた感じにする方法

色を付けたい文章の範囲を決めます。

次に、赤矢印の「背景色」の▼をクリックします。

 

どれか色を選びます。

ただし、濃い色を選ぶと文字が黒の場合は文字が読みづらくなってしまいます。
背景色は薄めの色を選んで下さい。
ここでは薄い黄色を選びました。

 

すると以下のように背景に黄色のラインマーカーが塗られました。

 

文章に赤の下線を引く方法

下線を引きたい文章を選択して、「スタイル」ボタンをクリックします。

「インライン」を選びます。

 

「インライン」の中の「赤アンダーライン」を選びます。

 

すると以下のようになります。

 

ラインマーカーの下線を手で引いた感じにする方法

ブログを柔らかなイメージにしたい時には、この下線がオススメです。

下線を引きたい文章を選択して、「スタイル」ボタンをクリックします。

次に「マーカー」を選びます。

 

黄色、赤色、青色のアンダーラインマーカーのどれかを選びます。

ここでは黄色アンダーラインマーカーを選びました。

 

すると以下のようになります。

 

文字の大きさ(フォント)を変更する方法

通常は、文字のサイズは16pxという大きさになっています。

時には、大きく誇張させるために大文字にしたり、逆に小文字にしてみることもできます。

文字のサイズを変更したい文章を選択して、「スタイル」ボタンをクリックします。

その中の「フォントサイズ」を選ぶと、12px~48pxまで選ぶことができます。

今よりも大きくしたい時には、16pxより大きな数字を、小さくしたい時には16px以下の数字を選びます。

 

すると以下のようになります。

 

「スタイル」ボタンの機能を活用しよう!

「スタイル」には、cocoonならではの便利な機能があります。

可愛くしたり、オシャレにしたり、使い方によってブログのイメージも変わってきますので、いろいろと試してみましょう!

一例をご紹介します。

 

ボックス(アイコン)の活用

文中に補足情報を入れたい時に便利です。

読んでいる人も見やすくなりますので活用した方がいいです。

 

「スタイル」の中の「ボックス(アイコン)」を選びます。

 

次に「補足情報」をパターンがいろいろとありますので、初心者の方は上から順番に選んで、どんな表示になるのか確認してみましょう。

ここでは「補足情報(コメント)」を選んでみました。

 

すると以下のようになります。

この枠の部分に文章を書けばいいのです。

 

他も試してみますね。

今度は「スタイル」 ⇒ 「ボックス(案内)」と選びます。 

 

次は「プライマリー(濃い水色)」を選んでみました。

 

すると以下のようになります。

この水色の部分に文章を書けばいいのです。

 

まだまだできますよ。

色付きの枠線で中は白にしたい時。

「スタイル」⇒「ボックス(白抜き)と選びます。

 

次は、枠線の色を選びます。

ここでは緑色を選んでみました。

 

するとこんな感じになります。

 

もっと面白い枠が作れますよ。

「スタイル」⇒「ボックス(タブ)」を選びます。

 

次にいろいろなパターンが表示されます。

ここでは「ボックス(コメント)」を選んでみました。

 

次は色を選びます。

ココでは黄色を選んでみます。

 

すると以下のようになります。

読者にも見やすく分かりやすいですよね。

他にも、「チェック」や「ポイント」「ヒント」などがありますので活用しましょう。

 

このように、cocoonの「スタイル」には多彩な機能が備わっています。

これはどんな感じになるんだろう?って、いろいろと試してみてください。

きっとブログを書くのが楽しくなるはずです。

 

因みに、文字を太文字にするのは「スタイル」の横の「B」をクリックすればOKです。
斜めにしたい時には「I」をクリックしてください。

 

申込みなどの「ボタン」の作り方

お申込みはコチラ

ブログなどにこのようなボタンを載せている人がいますよね。

他にもこのようなボタンもよく見ます。

詳しくはココをクリック!

 

cocoonには、このようなボタンを作って、そのボタンをクリックすると違うページにジャンプさせる機能があります。(リンクを貼るという言い方をします)

その作り方を解説します。

まずは、「スタイル」⇒「ボタン」と進みます。

次に色やボタンの大きさを選べるようになっています。

練習として何か選んでみてください。

すぐに以下のようなボタンが作成されます。

ボタンの中央にカーソルがピコピコ点滅しています。

そこに自分で例えば「お申込みはコチラ」などと入力してください。

お申込みはコチラ

 

次にカーソルはそのボタンの中に置いたまま、上の「リンク」ボタンをクリックします。

 

すると以下のような表示がでてきます。

空白の部分にジャンプさせるお申込みページのURLや他の記事のURLをコピペします。

 

URLをコピペまたは入力したら、ネジのマークをクリックします。

 

「リンクを新しいタブで開く」にチェックを入れて下さい。

最後に「「リンク追加」をクリックします。

このようにしてボタンを作成できます。

お申込みはコチラ

 

「吹き出し」機能を使いましょう!

cocoonには、「吹き出し」機能が標準装備されているのが嬉しいです。

「吹き出し」って以下のようなものです。

 

ワードプレスの使い方を教えてくれませんか?

私におまかせください!

 

いかがですか?

マンガを読んでいるみたいな感じになって、読者も読みやすくないでしょうか?

というより、読みたくなりませんか?

会話形式にすると、文章が固くならないので読みやすくなります。

ぜひ「吹き出し」を活用してください。

 

「吹き出し」の作成方法を解説します。

「吹き出し」をクリックします。

 

いろいろな形式が表示されますので、どれか選んでみてください。

 

ここでは「どや顔男性(左)」を選んでみます。

すると以下のようになります。

内容を入力してください。

 

次に、「内容を入力してください。」の部分に会話言葉を入力してください。

私に全ておまかせを!

文章を書くのが苦手な人も「吹き出し」を使うと意外に楽しくなって書けちゃうんです ^^

 

自分オリジナルの「吹き出し」も作れるよ!

cocoonに標準装備されている「吹き出し」以外に、自分でオリジナルの「吹き出し」を作成できます。

例えば私は自分の顔の「吹き出し」を作っています ^^

わたし

なにかお困りですか?

作り方は、「cocoon設定」の中の「吹き出し」をクリックします。

次に「新規作成」をクリックすれば、あとは画像を選択していくだけで簡単に作れます。

何でもまずは練習が大切です。

壊れたりしませんから、まずは試してみることを心掛けてくださいね。

 

まとめ

いかがでしたか?

私なりに画像付きで丁寧に解説したつもりです。

何度も申しますが、とにかく練習が大切です。

このボタンは何だろう?

クリックしたらどんな感じになるんだろう?

とりあえず、練習用の記事を作っていろいろとcocoonの機能を実感してみてください。

 

cocoonを制作してくださった「わいひらさん」は本当に優しい人です。

ここまでの機能を最初から装備してくれて、しかも無料で使わせてくれているわけですからね。

せっかく「わいひらさん」が作ってくれている機能を活用しないのはモッタイナイですし、申し訳ないです。

 

ブログって他人任せでは作れません。

ブログって自分の子供のような存在です。

つまり、自分で育てていくしかないのです。

だからこそ楽しんでいただきたいです。

あなたのブログが素敵なブログに育ちますように願っております。

そして最後にブログを書く時に最も重要なポイントをお伝えしておきます。

 

人のタメになる記事であること!
人の役に立つ記事であること!

あなたは誰のために書くのか?

あなたは誰の役に立ちたいのか?

ターゲットを決めて下さい。

ブログを書いているパソコンの向こうにいる読者の事を忘れずに書くことを忘れないで下さい。

 

私の本業は、整理収納アドバイザーです。

だからこそ、丁寧に分かりやすく教えてあげるをモットーにしています。

ブログでお悩みの方のためにブログアドバイザーとしても活動していますが、決してこれで大儲けをしようとは考えてはいません。

半分ボランティアのような活動です。

売込みっぽく聞こえるかもしれませんが、私はほぼ毎月「ワードプレスをマスターする1dayセミナー」を開催しています。

もしもご興味がおありでしたら、セミナーの詳細をご覧になってみませんか?

>>ワードプレス1dayセミナーの詳細

 

この記事を書いた人
ブログアドバイザー 佐藤 亮介

本業は、男の整理収納アドバイザー1級&認定講師の整理ist 佐藤亮介として岡山を拠点に全国でコンサルタント、講師として活動しています。

もう一つの顔は、ネット界のカリスマ、中嶋茂夫先生、羽根田雅幸先生に師事し、ブログやWEBのノウハウを習得したブログアドバイザーとしても活動中です。
WordPressやホームページなどの作成~Facebook広告やメルマガによる集客アップのためのコンサルやセミナーを行っています。
初心者の方から、丁寧で分かりやすいと好評をいただいております。

【資格】
整理収納アドバイザー級
整理収納アドバイザー2級認定講座講師

【書籍】
一生つかえる整理力が3週間で身につく本(明日香出版)
※中国国内、香港、台湾、シンガポールでも販売中

【メディア】
日本テレビ「解決!ナイナイアンサー」レギュラー
「AKB48 俺の嫁選手権」審査員&コメンテーター
RSKラジオ「あもーれ!マッタリーノ」レギュラー
FMおかやま「フレッシュモーニング」レギュラー
OHKスーパーニュース
広島テレビ「テレビ派」
リビング新聞
山陽新聞レディア
山陽新聞さん太タイムズ
リフォームブックおかやま
国際グラフ
HUGHUG

リクナビ「NEXT JOURNAL」
ユーキャン「マナトピ」
山陽新聞「リフォーム岡山web」

連絡先:
メール:info@lohaskatas.com
電話:086-722-2864

ブログアドバイザー 佐藤 亮介をフォローする