WordPress（ワードプレス）のテーマにCocoonを選んだけど、ブログの初心者なので、何をどうやっていいのか分からないな
こういった疑問や悩みに答えていきます。
この記事の内容
- Cocoon初心者が最初にやるべきこと
- Cocoonで稼ぐのに最低限やるべきこと
この記事では、ブログで実際に稼ぎ始めるまでにCocoonで実践した内容を、そのつど追加していきます。記事の目次や構成もそのたびに整理していきます。いっしょに頑張りましょう。
初心者にも分かりやすく解説していくよ。ブログの知識がゼロだったアラフィフのぼくでも理解できたことばかりだから、安心してね！
会社に頼らず、自分でお金を稼げるようになると、人生が楽になりますよ。
この記事はCocoonの使い方に内容を絞り、ワードプレス全般の使い方は次の記事にまとめました。
あわせてご活用ください。
ワードプレステーマの「Cocoon」を、どうやってインストールするの？
基本的な流れは以下の通りです。
- Cocoon公式サイトのダウンロード画面にアクセス
- テーマをダウンロード
- テーマをインストール
Cocoonのテーマには２種類あります。
- 親テーマ テーマそのもののファイル
- 子テーマ 親テーマをベースにサイトをカスタマイズするファイル
Cocoonを使うには、親テーマと子テーマをそれぞれダウンロードして、さらにインストールする必要があります。
インストールの詳しい手順は公式サイトを参考にしてください。
初心者のうちは、親テーマと子テーマの違いを理解する必要はありません。深く考えず、両方ともインストールしてしまいましょう。
ワードプレステーマの「Cocoon」で、ブログ本文への飾りつけはどうやってやるの？
文字や文章をどうやって太字や赤字に変えるの？
文章でもっとも大事なところを太字や赤い線で強調すると、読者により伝わりやすくなるのは当然ですよね。
これらの作業はとても簡単。
文章を書いてから、すぐに太字や赤字に加工したり、赤線を引いたりすることができてしまいます。
やり方は、Cocoonの公式サイトで確認できます。「Cocoonインライン」の項目のところですね。
文章をブロック（枠）で囲む方法は？
文章を四角い枠で囲うと文章が読みやすくなります。
なぜなら、ほかの文と区分けすることで、メリハリがつくからです。
文章がずーっと続くより、四角で囲った方が見た目にも読みやすくなりますね。
実際の使い方は以下の通りです。
ボックスの詳しいつくり方は「まるろぐ日和。」さんのブログを読むとわかりやすいです。
ボックスの種類はCocoon公式サイトで確認できますよ！
リストや箇条書きをボックスでうまく囲めないときの対処法は？
ボックスを使ううえで、一つだけ注意点があります。
- リストや
- 箇条書きの
- 例です
こちらCocoonの公式サイトに、詳しいやり方が書いてあります。
１度できるようになれば、次からは難なくできてしまいますよ。
マンガのような「吹き出し」をつける方法は？
吹き出しをつけると、読む人を飽きさせないブログになります。
アイコンが実際に会話しているような感じになるので、文章に変化をつけることができるからです。
たとえば、こんな感じ。意外と簡単にできちゃうんだよ！
文章が並んでいるだけのブログより、とっても読みやすくなります。
吹き出しをつける手順は次の通りです。
- アイコン画像を用意。正方形で、大きさは一片が１６０px～２００px
- ワードプレスの「Cocoon設定」→「吹き出し」を選択
- 「新規追加」をクリックして、タイトルなどを入力して事前登録
- 投稿するときは「⊕」（ブロックの追加）→「吹き出し」を選択
詳しくは、こちらのcocoonの公式サイトを読むと分かりやすいです。
「あぁ、ブログ。」さんのブログでは、いろいろなタイプのCocoonの吹き出しを実際に見て確認することができます！
ワードプレステーマ「Cocoon」で、記事に内部リンクを貼る方法は？
「内部リンク」とは、自分のブログの中で、ある記事のことを別の記事の文中で紹介するときに使うリンクのことです。
たとえば、ワードプレスの使い方をまとめたブログ内の別の記事を、文字上にリンクを貼る「テキストリンク」として紹介したり、下のような「内部ブログカード」の形で披露したりできます。
内部リンクは積極的に活用していきましょう。
なぜなら、ある記事を読んだ方に、別の記事にも関心を持ってもらうきっかけとなるからです。
たとえば、読者が内部リンクを通じてブログ内のたくさんの記事を読んだとします。そうすると価値の高いブログだと評価され、ブログ全体の検索順位を向上させる効果が期待できます。
なので、「関連記事」や「参考記事」として、内部リンクで別の記事をどんどん紹介しましょう。
Cocoonの場合、内部リンクの設定の仕方はとても簡単。基本的に、リンク先のＵＲＬを貼り付けるだけの作業です。
詳しいやり方はCocoonの公式サイトでご確認ください。
最後に１点だけ注意点があります。
「パーマリンクって何？」という方は、こちらの記事で説明していますので参照してください！
ワードプレステーマの「Cocoon」で、ブログに画像を挿入する方法は？
文章だけでなく、画像を盛り込んだほうが読者にとって読みやすくなります。
やはり文章だけだと、とっつきにくい印象になってしまうからです。
たとえば、商品の説明なら商品の画像をのせた方が、読むひとに対して説得力が増します。なによりブログにメリハリがついて読みやすくなりますよね。
なので、積極的に画像を活用しましょう。
画像の挿入方法がわからない
画像を挿入する方法は以下の通りです。簡単ですよね。
- 「⊕」（ブロックの追加）→「画像」を選択
- 画像の形や場所（右寄せ、中央など）、サイズを選択
- 写真をアップロード
画像の挿入のしかたは、「バズ部」さんのサイトに詳しいです。
画像の適切なサイズ・大きさは？
適切な画像の大きさは、ワードプレスのテーマによって異なります。
Cocoonの作者の「わいひら」さんによりますと、ワードプレスのテーマとしてCocoonを使う場合の初期設定で、オススメのサイズは以下の通りです。
- サムネイルのサイズ：300×0
- 中サイズ：500×0
- 大サイズ：800×0 （単位はピクセル）
Cocoonの作者本人が指摘されているので、これに従うのが無難ですね。
縦幅をゼロにすると、自動的に元のファイルと同じ縦横比を保つことができます。
ワードプレスでのサイズの初期設定のしかたは、Cocoon公式サイトで確認できます。
画像の大きさやサイズは変更しなくてもいいの？
画像を挿入するときに、ワードプレスが自動的にリサイズしてくれます。上のように設定した場合、「大サイズ」を選べば自動的に横幅が８００ピクセルとなります。
でも、挿入する前に自分で小さくリサイズするのが理想的です。
大きな画像をワードプレスのサーバーにアップすると負担が大きくなるためです。
ちなみにですが、このブログでは通常、横幅を１２００ピクセル、縦幅を９００ピクセルにリサイズしたうえでアップしています。
なぜなら、ふだん使っているiPhoneで撮影した画像が基本的に「４：３」の比率、つまり「１２００：９００」だからです。
画像のサイズ変更の話は「失敗しないワードプレスの使い方」として別の記事にまとめましたので、こちらも参考にしてください！
ワードプレステーマ「Cocoon」で、アイキャッチ画像を設定する方法は？
「アイキャッチ画像」とは、読者の注目を記事に集めるための画像のことです。
記事冒頭のタイトルの真下に挿入するブログが多いですね。
なぜなら、もっとも読者の注目を集めやすい場所だからです。
自分で撮った写真でもいいですし、記事と関係のありそうなフリー画像でもいいです。
アイキャッチ画像を必ず挿入するようにしましょう。記事と関連した画像がいいですね。
「アイキャッチ画像」という用語とセットで、「サムネイル画像」という用語も覚えましょう。
基本的には「アイキャッチ画像を小さく表示したもの」が「サムネイル画像」です。
たとえば、ブログトップ画面の記事一覧で、それぞれの記事の端っこに載っている小さな画像がサムネイル画像です。
Cocoonの場合は原則、アイキャッチ画像をもとにサムネイル画像がつくられます。
アイキャッチ画像とサムネイル画像の関係については、「クギネット」さんのブログが説明してくれています。
アイキャッチ画像の挿入の仕方がわからない 【簡単です】
簡単です。まずは「アイキャッチ画像をどのように表示するか」を設定します。
- ワードプレスのダッシュボードで「Cocoon設定」を選択
- 「画像」→「アイキャッチの表示」
- 「本文上にアイキャッチを表示する」にチェック
これで、記事ごとにアイキャッチ画像を挿入することができるようになります。
挿入の仕方は、以下の通りです。
- 記事投稿画面の右上の「設定」（歯車のマーク）をクリック
- 表示された右サイドバーの「文書」をクリック
- 「アイキャッチ画像」で必要な画像を選択
上で紹介した「クギネット」さんのブログに、簡単な説明が写真とともに載っています。
アイキャッチ画像に使う画像のサイズは決まっているの？【１２００ピクセルが最適】
決まっていませんが、このサイトでは、基本的に以下のサイズの画像を使っています。
理由は３つあります。
なので、元画像の横幅が１２００ピクセル以上だった場合は、横幅を１２００ピクセルにリサイズ。１２００ピクセル以下だった場合は、そのままの大きさで使います。
画像のサイズや縦横比率を調整するには無料の画像加工サイトが便利です。
たとえば 「I♡IMG」という無料サイトは、多くのブロガーが使っています。
アイキャッチ画像に使う元画像の縦幅は変更しなくてもいいの？【変更は不要】
基本的に、そのつど変更する必要はありません。
なぜなら、ワードプレスやCocoonが自動的に決めてくれるからです。
たとえば、アイキャッチ画像なら縦横幅は元画像と同じ比率となります。
サムネイル画像なら、自分好みに比率をあらかじめ設定できます。初期設定をしてしまえば、それに基づいて縦幅は自動的にリサイズされます。
なので、いちいち変更してくても大丈夫です。
ちなみに、 iPhoneで撮影した画像は基本的に「４：３」の比率。横幅を１２００ピクセルとすると、縦幅は９００ピクセルとなります。
もし全ての画像を同じ比率に統一したいのなら、iPhone以外で撮影した画像も同じく１２００ピクセル×９００ピクセルにリサイズするのも手ですね。
サムネイル画像の縦横比率はどうやって設定するの？
Cocoonでは比率を選ぶことができます。設定画面は次の場所にあります。
Cocoonで設定できるサムネイル画像の縦横比率は次の通り。
- ９：１６（ワイド、１：１．７７７）
- ５：８（黄金比、１：１．６１８）
- ５：７（白銀比、１：１．４１４）
- ３：４（スタンダード、１：１．３３３）
- １：１（正方形）
それぞれの比率の詳しい説明は、Cocoon公式サイトに詳しく載っています。
このサイトでは、この中の「ワイド」を採用しています。
地デジ画面やYouTube動画の縦横比率と同じで、Cocoonでも「ネットの親和性の良さ」からデフォルト（初期設定）となっているためです。
サムネイル画像の上下部分が少し見切れてしまって困っています
スマホなどで撮影した画像をアイキャッチ画像にすると、サムネイル画像の上下部分が見切れる可能性があります。
アイキャッチ画像とサムネイル画像とで縦横比率が異なる場合があるからです。
たとえば、iPhoneで撮影した画像は基本的に「４：３」の比率。横幅を１２００ピクセルとすると、縦幅は９００ピクセルとなります。
一方、サムネイル画像を「ワイド」の「１６：９」にすると、横幅が１２００ピクセルなら縦幅は６７５ピクセルとなります。
縦幅の差となる９００－６７５＝２２５ピクセル分が見切れることになります。
上下が見切れても大丈夫な画像であれば問題ないですが、見切れてしまうと明らかに見栄えが悪くなるならば、あらかじめ自分で、問題のないような形で画像の切り抜きを行うことをオススメします。
まとめ
この記事では、Cocoonをダウンロードするところから、実際にお金を稼ぐことができるようになるまでに、最低限やっておくべきことをまとめました。
いずれも、難しい作業ではありません。
せっかく記事を読んだ時間を無駄にしないためにも、すぐに行動しましょう。
会社に頼らず、自分で稼げる地力を身につければ、老後も安心ですよね。
まとめ
この記事では、2020年ノーベル文学賞の有力候補者を紹介してきました。
1年に１度、世界中が注目するノーベル文学賞。
何ごともきっかけが大事。ノーベル賞作家の著作を１冊手に取ることで、あなたも奥深い読書の世界へ！！
「まちがい」や「更新もれ」に気づいたら？
記事の中で「まちがい」や「更新もれ」に気づかれましたら、ぜひご連絡ください。
ご指摘やご質問、ご要望は、すぐ下の方にある「問い合わせ」コーナーに記入していただけましたらうれしいです。
すこしでも役に立つブログにしたいから、気軽にれんらくしてね！