無料テーマCocoonを使い始めたけど、サイトの見栄えがどうしたら良くなるのか悩んでいるかと思います。
私もCocoonを使っており、このブログでは月間3万PVを達成し月10万円程度稼げるようになりました
この記事では10の簡単なカスタマイズを行うことで格段に見栄えが良くなる方法をご紹介します。
Cocoon カスタマイズ これだけで立派なサイトになるカスタマイズ１０選！
このサイトもCocoonを使っており、今回は10のカスタマイズを以下にご紹介します。
この10のカスタマイズを行うだけで、サイトの見栄えが格段に上がります！
まずはじめにサイトの基本構成や基本色を決めるスキンの設定を行います。
また、アイキャッチ用のサムネイル画像の大きさが、それぞれそろっていないのでプラグインを使って修正します。
カラム幅も広すぎたりするので、適度な広さに設定することにより読みやすくなります。
さらに、見出しや、ブログカード、アイコンを使うことで見栄えがぐっと良くなりますのでぜひ使ってみてください。
Cocoon スキン カスタマイズ
スキンとは先ほど述べたように、 サイトの基本構成や基本色を決める設定のことを言います。
例えば、あたかも洋服を着替えるかのようにサイトの基本構成、基本色を変更することができます。
コクーンの素晴らしいメリットはクリック一つで、このスキンを変更できることです。
スキンの設定の仕方は、左にあるコクーン設定からスキンを選択し、自分の好みのスキンを選びます。
以下の設定から左側にあるスキンを選択します。
下の中から自分の好きなサイト構成、基本色のスキンを選びましょう。
スキン一覧は、この記事のサイズのため一部しか載せていません。
実際はもっとあり、 40種類程度あります。
Cocoon サムネイル画像のサイズ統一化
デフォルトではサムネイル画像のサイズが統一されていないため、プラグインで画像サイズを統一します。
プラグインによって下記に示すようにサムネイル画像の大きさを 自動的にそろえることができます。
プラグインは下記のRegenerate Thumbnailsを使用します。
正方形や、長方形など、お好みのサイズに一括で修正、統一化できます。
プラグインインストール、有効後、ツールにおけるRegenerate Thumbnails に移動します。
上の青いボタンががすべての画像を変更します。下の青いボタンはアイキャッチ画像のみ修正します。
ここでは下の青いボタンを押してください。
もし、インデックス（投稿の表示設定）の変更をした場合、 Regenerate Thumbnailsの設定が元に戻ってしまうので、
インデックスを変更した場合は、もう一度青いボタンを押して、設定し直してください。
Cocoon カラム幅の縮小
文章の横幅が広すぎて、読みにくいので横幅を変更します。
Cocoon設定からカラムを選択します。
下の方に行くと、カラム幅を変更できる項目が現れますので、660に変更します。
Cocoon 見出しデザインの簡単カスタマイズ
見出しデザインのカスタマイズ方法をご紹介します。
見出しとは下記のような文章の始まる前のタイトルのことを言います。
H2やH3とも呼ばれていますね。
まず、下記のコードをCCSへ貼り付けます。
（このサイトではコピープロテクトをしているのでお手数ですが、CCSへ入力ください。)
.article h2 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 8px #7db4e6;/*左線*/
}以下にCCSへの入力方法をご紹介します。
まず、左側にある外観から、カスタマイズを選びます。
下記から追加CCSを選択します。
下記の赤枠にあるようにコピーペーストあるいは入力を行ってください。
次に各コードについて説明します。
.article h2 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 8px #7db4e6;/*左線*/
}colorで文字色を修正できます。このコードでは黒になっています。
backgroundで背景色を修正できます。このコードではグレーになっています。
border-leftで左のラインの幅と色を修正できます。 このコードではスカイブルーになっています。
pxの前の数字を大きくすると、ラインが太くなります。
カラーコードは下記を参照ください。
別の色を試したいときは下記を参考にしてください。
色々な色を選択することができます。
Cocoon 様々な見出しボックス表示
Cocoonは様々な見出しボックスがあり、これらを使うことで記事の見栄えが良くなります。
見出しボックスとは例えば下記のようなものです。
見出しボックス
テスト
白抜きボックス
テスト
案内ボックス
テスト
以上は色が青ですが、他の色に簡単に設定することが可能です。
他にもたくさんあり、詳細は下記を参考にしてください。
ボタン機能
コクーンには下記のようにボタン機能もたくさんあります。
色も自由に変えられます。
アフィリエイトで私も良く使っています。
また下記のトグルも使うと面白いページになります。
テスト
テスト
テスト
テスト
クリックすることでコンテンツが閉じたり開いたりします。
詳細事項を記述したりするのに使います。
Cocoon ブログカード
ブログカードとは下記のようなサムネイルの付いたリンクカードのことを言います。
みなさんも一度はどこかのブログで見たことがあるのではないでしょうか？
Cocoonはこのブログカードを簡単に設置することができます。
以下に記事内へのブログカードの設置の仕方について説明します。
まず、左の十字をクリックし、下記を表示させます。そして、コクーンブロックを選択します。
次に左上のブログカードを選択します。
すると下記のようにグレーの枠が現れます。
このグレーの中にリンクさせるページを設定します。
下記のリンクのマークをクリックします。
リンク先の記事を選択することで、下記のようにリンクが挿入されます。
さらに、下記のようにブログカード左上にラベルを付けることができます。
グレーの部分をクリックすると、下記のように右にスタイル設定が表示されます。
この設定では、関連記事、人気記事、あわせて読みたいなどの多くのラベルを付けることができます。
評価スター
評価スターは下記のような星です。
ランキングによく使われますね。
グーグルは評価スターを好んでいるともいわれます。
そういえば検索上位にいる記事は評価スターがよくあるような気がします。
コクーンではこの評価スターを簡単に挿入することができ、星の数も自由に変えられます。
設定の仕方は、上にあるシュートコードを選択し、下の方にある評価スターを選択します。
下記のようなコードが記事内に挿入されます。
Star rate=の数字を変更することで、星の数を自由に変えることが可能です。
メニューアイコン表示
メニューに下記の赤枠のようなアイコン表示させることで、メニューを見やすくさせましょう。
下記に設定手順を示します。
まず、アイコンを入手するため下記のFont Awesomeというサイトへ行きます。
下記の赤枠にあるIconsをクリックします。
下記のようにたくさんのアイコンがあります。
ここで自分の好きなアイコンをクリックします。
検索窓で検索することも可能です。
検索窓でHOMEと検索すると下記の画面が現れます。
下記の赤枠のコードをコピーしておきます。
外観、メニューからメニュー設定において、下記のようにナビゲーションラベルに先ほどのコードをペーストします。
以上でアイコン設定は完了です。
アマゾン、Yahoo、楽天商品リンク
下記のような商品リンクを見たことはないでしょうか。
この商品リンクから商品が売れると売値の数％の収益を得ることが可能です。
この商品リンクの作成の仕方は、バリューコマース、もしもアフィリエイト、カエレバを使う方法があります。
バリューコマースの設定が一番簡単です。
カエレバは入力する項目が多いので、バリューコマースの商品リンクを使用することをお勧めします。
詳細は下記を参考にしてください。
まとめ
コクーンのカスタマイズ方法をご紹介しました。
サイトの見栄えを良くすることによって読みやすいページを作ることができると思います。
いろいろ試してみてください。
下記にブログを構築する上で役に立つ動画を記載しておきますので参考にしてください。
収益化にはアドセンスやアフィリエイトを行いましょう。
おすすめのアフィリエイトサイトは下記を参考にしてください。
グーグルアドセンス合格の仕方は下記に魂を込めてまとめたので参考にしてください。
きっと合格できると思います。
検索順位を上げるにはAll in One SEO Packを使うと効果的です。
設定は下記を参考にしてください。
収益化アップにつながる記事の作成方法は下記を参考にしてください。
