WordPress無料テーマCocoon（コクーン）ブログの記事の書き方ってどうやるの？という疑問について解説していきますね。
Cocoonなら、1つ1つの基本的な使い方は非常に簡単な操作でできるようになっていますよ！
ワードプレス無料テーマでここまでできてしまうの？神っ！と思うくらい機能豊富なCocoonですが、その反面、初心者から慣れるまでは何から手を付けていけばいいのか混乱してしまうことがありますよね。
私もブログなんて書いたことがない初心者の時は、やる気はあるのにどういう手順で記事を書いていけばいいのかわからなくて作業が進まない・・という経験をしたことがあります。
なのでワードプレス無料テーマであるCocoonブログの記事の書き方から書き上げた記事を公開するまで、基本的な使い方を初心者向けに画像多めでわかりやすくお伝えしていきますね！
Contents
Cocoonブログの作り方
記事の書き方に入っていく前に、Cocoonブログの作り方をご紹介していきますね。
まだインストールがまだだよ～という方は、WordPressブログの作り方！【10分で完了】サーバーやドメインの設定を図解でわかりやすくにまとめているので、ご参考にしてください。
WordPress無料テーマであるCocoonは、
- 手軽にSEO対策ができる
- デザインが豊富
- 機能が豊富
- 初心者からでも使いやすいと
など有料級のテーマで優秀です。
本来ワードプレスでブログを作っていくとなると、
- 記事の見栄えを良くするために複数のプラグインを導入したり
- 操作性がより易しいものを探す必要があったり
しますが、Cocoonをインストールしていれば機能が豊富に揃っているため、初心者でも手軽に読者が読みやすい記事を作成できるブログを運営できます。
Cocoonブログの作り方も難しくありません。
設定方法については、Googleアドセンス審査用ブログの設定をしよう！一発で合格した私のコツも紹介にまとめているので、ご覧になってみてくださいね！
Cocoonブログで記事を書く前に済ませておきたいコト
Cocoonをインストールしたブログで記事を作成していく前に、済ませておきたいことがあります。
それは、
- パーマリンク設定
- コクーン設定からスキンでデザイン変更
この2つです。
順番に説明していきますね。
✔パーマリンク設定
パーマリンクとは、あなたが書いた記事URLの後半部分です。
後からパーマリンク設定の変更は難しいため、最初の記事を書く前にパーマリンク設定を済ませておくことがマスト！
それでは早速パーマリンク設定の方法を説明していきます。
ワードプレスのダッシュボード『設定』⇒『パーマリンク設定』をクリック。
カスタム構造をチェックして、/%postname%と入力し、『変更を保存』をクリックで完了。
これであなたが記事を書く際、手動でパーマリンク設定をできるようになりました！
パーマリンクを入力するときに、注意することが1つあります。
それは、アルファベットで入力する！ということ。
例えば、今回は test-touko-kiji にしてみました。
わかりやすいアルファベットなら何でも大丈夫ですよ！
✔コクーン設定からスキンでデザイン変更
スキン機能を使って、簡単手軽にあなたのブログの見た目を変更することができます。
ワードプレスのダッシュボード『Cocoon設定』をクリック。
『スキン』を選択して『スキン一覧』からお好みのものをチェックして、下の方にある『変更をまとめて保存』をクリックで完了。
デザインが豊富なため、あなたのお気に入りがきっと見つかりますよ♪
Cocoonブログの記事の書き方の基本的な使い方
記事を書く準備が整ったら、Cocoonブログでガンガン記事を書いていきましょう！
記事の書き方を頭で覚えるというよりは、基本的な手順を実際の作業を進めながら記事作成に慣れる方が手っ取り早く身につくと思いますので、ぜひ作業をしながら読み進めてみてください＾＾
基本的な記事の書き方の手順はこちら☟
- タイトルの入力
- パーマリンクを編集
- SEO対策をする
- アイキャッチ画像を決める
- カテゴリーにチェック印を入れる
- 記事本文を書いていく
- 記事を公開する
この順番通りでなくてはいけない！というわけではないので、慣れてきたらあなたがやりやすい手順で進めていって大丈夫ですよ。
それでは1つずつ説明していきますね。
✓タイトルを入力する
まず始めに記事タイトルを入力していきます。
ワードプレスのダッシュボード『投稿』⇒『新規追加』をクリックすると記事作成画面が開く。
タイトルを追加の欄にタイトルを26文字~32文字程度で考えて入力して完了。
記事タイトルの作成方法については、こちらで初心者向けに具体的に解説しているのでご参考になさってください。
タイトルは読者の一番初めに目に留まる文になるため、【読者が知りたい！見たい！】と思うタイトル作りが大切です！
かといって、ニュースサイトと同じタイトルではあなたの記事は読まれません。
ずらしというテクニックを使うことで、読者が読みたい！と思うな記事タイトルに仕上がるので意識して作成してみてくださいね。
✔パーマリンクの編集
タイトル入力が終わったら、パーマリンクを編集していきましょう。
『編集』をクリックして、アルファベットで入力します。
パーマリンクは何でもOKですが、タイトルに関連した言葉をアルファベットで入力した方が読者もわかりやすいですね。
今回は、test-touko-kiji と編集しました。
✔下書き保存をする
次にSEO対策をしていきますが、その前に一旦保存しておきましょう。
停電でも起きたら今までの作業は水の泡となってしまいますからね。
パーマリンク編集の右側にある『下書き保存』をクリックするだけで完了です。
下書き保存はこまめにやっておくと安心ですね。
✔SEO対策をする
Cocoonブログなら、SEO対策も手軽に行えます。
SEOとは、あなたの記事を上位に表示させるために必要な調整をすることです。
下の方にスクロールしていくと下記のようにSEOと書かれた項目が出てきますよ。
SEOタイトルは、タイトルをそのままコピペすれば大丈夫です。
メタディスクリプションには、記事の内容を140文字～160文字程度にギュッと短くしてキーワードを盛り込んで作成していきましょう！
メタディスクリプションってそもそも何？という声が聞こえてきそうですが、検索したことがある人なら、意識してないけどふと目にしている方も多いと思います。
記事タイトルはもちろん、メタディスクリプションも読んでから記事をクリックする！という人もいますよね。
そしてあなたが知りたい内容がありそうな記事を判断する1つの手段になっていると思います。
例えば、Cocoonブログの記事の書き方についてだと、
Cocoonブログの記事の書き方について、初心者さんでもわかりやすいように画像多めで解説していきます。機能豊富なCocoonですが、その反面、初心者から慣れるまでは何から手を付けていけばいいのか混乱するのを防ぐために、記事の書き方手順や目次機能・吹き出しなど基本的な使い方をまとめてご紹介していきますね。
という感じです。
メタディスクリプションに記載されているキーワードは、Googleが検索に反映させているとも言われてるのでぜひ活用してみてくださいね。
✔アイキャッチ画像を決める
アイキャッチ画像を設定しておくと、文字だけよりも読者の目に留まりやすいです。
アイキャッチ画像の選定に役立つ、フリー素材を集めたサイトがこちら☟
あなたのお気に入りのサイトが見つかったら、記事に合う画像を探してみましょう。
アイキャッチ画像を決めておけば、設定方法も簡単！
『アイキャッチ画像を設定』をクリック。
『ファイルをアップロード』⇒『ファイルを選択』をクリックして、アイキャッチ画像を設定して完了。
✔カテゴリーにチェック印を入れる
すでにカテゴリーが出来上がっている場合は、チェックを入れるだけで大丈夫です。
新規でカテゴリーを作成する場合は、2つのやり方があります。
-
記事作成画面の右側にある『新規カテゴリーを追加』から作成する方法
- ワードプレスのダッシュボードにある『カテゴリー』から作成する方法
です。
以下の画像の場所から作成する事ができるので、好きな方法でカテゴリーを作成してみてください☟
❶記事作成画面の右側にある『新規カテゴリーを追加』から作成する
❷ワードプレスのダッシュボードにある『カテゴリー』から作成する
✔ツールバー切り替えボタンをクリック
記事作成に入っていきますがその前に、ツールバー切り替えボタンをクリックをしておきましょう。
そうすると記事作成に便利なボタンが出てきます＾＾
画像にあるピンク枠のボタンをクリックするだけで完了するので、便利なボタンを使って記事を作成できるようにしておきましょう！
✔記事本文を作成していく
記事作成は、いきなり本書きするとタイトルと記事内容が合致せずにずれてしまうことがあります。
そのため、以下のような書き方で進めるとタイトルと記事内容を合致させやすくなりますよ。
- 見出しを使って目次機能を活用
- リード文を考える
- 本文を順番に考える
- まとめ
このような感じです。
簡単に1つずつ説明していきますね。
【見本あり】Googleアドセンス審査用ブログの書き方の流れを理解しようで説明した通りに見出しを作成すると、Cocoonでは目次機能を活用することができます。
見出しを先に考えておくことで、タイトルと記事内容がずれにくくなりますよ。
そして次にリード文を考えていきましょう。
リード文とは、冒頭で読者に向けて簡潔に記事内容を説明する文章です。
例えば、「野菜サラダ」というタイトルだけよりも、ニンジンとレタスと玉ねぎに小エビを加えたイタリアンサラダという情報があった方がイメージできて理解しやすいですよね。
ブログでも同じように、リード文で内容の方向性（読者のどのような疑問を解決するのか）を短めにギュッと濃縮させてあげることで理解しやすくなります。
見出しとリード文が終わったら、各見出しごとの本文を埋めていきます。
その際、意識してほしいことが1つあります。
ブログでは先に結論を伝える方が好ましいです。
なぜなら、読者が知りたい内容がいつまでも見えてこないと他のブログに簡単に移れるからです。
あなたは、記事を読む時に隅々まで目を通しますか？
なぜこの質問をしたかというと、基本的に読者は、自分が疑問に感じているコト以外は読まない傾向にあるんです。
上から下にスクロールしていく読者の行動を考えると、先に結論を伝えてあげることでじっくりと読んでくれるようになります。
結論を先に伝えるというのは、読者の満足度とGoogleからの評価を高めることが出来るので意識して取り入れてみてくださいね。
そして最後に記事全体をまとめていきます。
まとめという見出しを作り、記事の内容を再度簡潔にまとめていくと、記事全体がきれいに収まりますよ。
✔記事を公開する
記事が完成したら、公開していきましょう！
記事作成画面の右側にある『公開』をクリックすれば完了です！
記事作成お疲れさまでした＾＾
記事作成画面の基本的な使い方｜便利な機能を紹介
Cocoonブログでの記事作成に便利な機能をご紹介していきますね。
- 記事内に画像を挿入する方法
- 色付きアンダーラインを使う方法
- 文字に色を付けるやり方
- フォント変更のやり方
- おしゃれな『スタイル』デザインの紹介
- リンク設定したボタンの作り方
- 簡単に吹き出しを挿入する方法
の8つのラインナップを順番に説明していきます！
✔記事内に画像を挿入＆サイズ変更する方法
記事内に画像を挿入する方法は、アイキャッチ画像を設定する方法と似ています。
合わせて、画像の変更方法もお伝えしていきますね。
タイトル下にある『メディアを追加』をクリックして、画像を選択すればこれだけでも画像を挿入できます。
もし画像のサイズを変更したい場合は、画像を選択して『投稿に挿入』をクリックする前に、ピンク矢印部分を下にスクロールします。
サイズの項目から、あなたのお好きなサイズを選択して『投稿に挿入』をすれば完了。
今回の画像がなんだか小さいな・・と感じた時は、このサイズ設定によるものかもしれないので、フルサイズを選択すれば大きくなりますよ。
✔色付きアンダーラインを使う方法
Cocoonブログでは、文字の下に色付きラインをする機能をプラグインなしで使うことが出来るようになっています。
記事作成画面にある『スタイル』をクリックしてマーカーを選択すると、6種類のマーカーが選べます。
アンダーラインマーカーを選べば、通常のマーカーよりも細めになっているのでお好みで使い分けてみてくださいね。
✔文字に色を付けるやり方
文字に色を付けるやり方も、『スタイル』に入っています。
『スタイル』にあるインラインの中から好きな種類を選ぶだけです。
赤太字や青太字などを選べば、一発で色付きの太字にできるので便利！
打消し線もあるので、必要な時はインラインから選んでください。
✔フォント変更のやり方
フォント変更も同じように『スタイル』から選べます。
サイズ変更したい文字を選択して、『スタイル』⇒『フォントサイズ』からお好みのサイズを選んで完了。
他のタブから選ぶ方法もありますが、この方法なら文字サイズが一目でわかるようになっているため使いやすいですよ。
✔おしゃれな『ボックス』デザインの紹介
Cocoonブログは、これ1つで記事のデザイン性をUPできるボックスが豊富に用意されています。
しかも【スタイル】タブからクリックするだけですぐ使える便利なデザイン！
- ボックス（アイコン）
- ボックス(案内）
- ボックス（白抜き）
- ボックス（タブ）
- ボックス（付箋風）
と、大きく5種類あって色が選択できるものもあります。
記事作成でうまく使い分けて、視覚的に読者が読みやすい記事作りにのために役立ててくださいね♪
スタイル⇒ボックス（アイコン）
- 補足情報（i）
- 補足情報（？）
- 注意喚起
- メモ
- コメント
- OK
- NG
- GOOD
- BAD
- プロフィール
スタイル⇒ボックス(案内）
- プライマリー（濃い水色）
- セカンダリー（濃い灰色）
- サクセス（薄い緑）
- インフォ（薄い青）
- ワーニング（薄い黄色）
- デンジャー（薄い赤色）
- ライト（白色）
- ダーク（暗い灰色）
スタイル⇒ボックス（白抜き）
- 灰色
- 黄色
- 赤色
- 青色
- 緑色
スタイル⇒ボックス（タブ）
- チェック
- コメント
- ポイント
- ティップス
- ヒント
- ピックアップ
- ブックマーク
- メモ
- ダウンロード
- ブレイク
- Amazon
- OK
- NG
- GOOD
- BAD
- プロフィール
スタイル⇒ボックス（付箋風）
- 灰色
- 黄色
- 赤色
- 青色
- 緑色
✔リンク設定したボタンの作り方
ここではリンク設定したボタンの作り方を解説していきます。
『スタイル』⇒『ボタン』をクリックする。
ボタンとカーソルが表示されたら、適当な文字を入力する。
（※ボタンの色は「パープル（中）」を選択しました）
例えば、商品のHPはこちら などなど。
ボタンに文字を入力した後カーソルはそのままにしておいて、ピンク枠のボタンをクリック。
リンクしたいページのURLをコピー（CTRLとCキー）する。
コピーしたURLを貼り付け（CTRLとＶキー）する。
そして赤枠の風車マークをクリック。
必要に応じて「リンクを新しいタブで開く」にチェックをする。
『更新』をクリックして完了。
Cocoon吹き出しの使い方
✔プラグインなしで吹き出しを挿入する方法
Cocoonブログなら、プラグインなしで吹き出し機能も装備されています♪
こんな感じに仕上がるので、会話調ってやっぱり身近にいるようで読者も読みやすいですよね。
吹き出しタブからお好きなサンプルをクリック。
言葉を入力して完了。
✔カスタマイズしてオリジナルアイコンの吹き出しも作れる
サンプル以外のアイコンの吹き出しが使いたい！っていう方は、オリジナルアイコンで吹き出しも簡単に作れます。
『Cocoon設定』から『吹き出し』⇒『新規追加』をクリック。
タイトルにはあなたが探しやすい名前を入力。
あらかじめ準備しておいた画像を選択して『保存』をクリックして完了。
※必要に応じて、名前や人物位置やアイコンスタイルを設定してみてくださいね。
まとめ
「Cocoonブログの記事の書き方｜基本的な使い方を画像多めでわかりやすく」という内容をお伝えしてきました！
とても優秀なワードプレスの無料テーマCocoonの使い方を覚えて、ステキな記事をどんどん完成させてくださいね♪
syoko
