Cocoon　カスタマイズ9選！画像サイズやサムネイルサイズの修正の仕方をご紹介！

無料テーマCocoonを使い始めたけど、サイトの見栄えがどうしたら良くなるのかよく分からないという方がおられるかと思います。

私もCocoonを使っており、このブログでは月間3万PVを達成するようになりました

この記事では8つの簡単なカスタマイズを行うことで格段に見栄えが良くなる方法をご紹介します。

Cocoon　カスタマイズ　これだけで立派なサイトになるカスタマイズ9選！
スキンカスタマイズ
サムネイル画像のサイズ統一化
カラム幅の縮小
見出しデザインの簡単カスタマイズ
引用
ブログカード
様々な見出しボックス表示
メニューアイコン表示
アマゾン、Yahoo、楽天商品リンク
まとめ

Cocoon　カスタマイズ　これだけで立派なサイトになるカスタマイズ9選！

このサイトもCocoonを使っており、今回は9つのカスタマイズを以下にご紹介します。

この9つのカスタマイズを行うだけで、サイトの見栄えが格段に上がります！

スキン変更
サムネイル画像のサイズ統一化
カラム幅の縮小
見出しデザインのカスタマイズ
引用のカスタマイズ
様々な見出しボックス
ブログカード
メニューアイコン表示
アマゾン、Yahoo、楽天商品リンク

まずはじめにサイトの基本構成や基本色を決めるスキンの設定を行います。

また、アイキャッチ用のサムネイル画像の大きさが、それぞれそろっていないのでプラグインを使って修正します。

カラム幅も広すぎたりするので、適度な広さに設定することにより読みやすくなります。

さらに、見出しや、ブログカード、アイコンを使うことで見栄えがぐっと良くなりますのでぜひ使ってみてください。

スキンカスタマイズ

スキンとは先ほど述べたように、サイトの基本構成や基本色を決める設定のことを言います。

例えば、あたかも洋服を着替えるかのようにサイトの基本構成、基本色を変更することができます。

コクーンの素晴らしいメリットはクリック一つで、このスキンを変更できることです。

スキンの設定の仕方は、左にあるコクーン設定からスキンを選択し、自分の好みのスキンを選びます。

以下の設定から左側にあるスキンを選択します。

下の中から自分の好きなサイト構成、基本色のスキンを選びましょう。

スキン一覧は、この記事のサイズのため一部しか載せていません。

実際はもっとあり、 40種類程度あります。

サムネイル画像のサイズ統一化

デフォルトではサムネイル画像のサイズが統一されていないため、プラグインで画像サイズを統一します。

プラグインによって下記に示すようにサムネイル画像の大きさを自動的にそろえることができます。

プラグインは下記のRegenerate Thumbnailsを使用します。

正方形や、長方形など、お好みのサイズに一括で修正、統一化できます。

プラグインインストール、有効後、ツールにおけるRegenerate Thumbnails に移動します。

上の青いボタンががすべての画像を変更します。下の青いボタンはアイキャッチ画像のみ修正します。

ここでは下の青いボタンを押してください。

もし、インデックス（投稿の表示設定）の変更をした場合、 Regenerate Thumbnailsの設定が元に戻ってしまうので、

インデックスを変更した場合は、もう一度青いボタンを押して、設定し直してください。

カラム幅の縮小

文章の横幅が広すぎて、読みにくいので横幅を変更します。

Cocoon設定からカラムを選択します。

下の方に行くと、カラム幅を変更できる項目が現れますので、660に変更します。

見出しデザインの簡単カスタマイズ

見出しデザインのカスタマイズ方法をご紹介します。

見出しとは下記のような文章の始まる前のタイトルのことを言います。

H2やH3とも呼ばれていますね。

まず、下記のコードを外観からテーマエディターを選択し、Cocoon Child(子テーマ)のstyle.cssへ貼り付けます。

.article h2 {
   background: #f5f5f5;
   border-left: solid 10px #529eea;
   color:black;/文字の色を変える/
 }
 .article h3 {
   border: none;
   border-left: solid 10px #529eea;
 }

Cocoon Child(子テーマ) が無い場合があるので、その場合は下記を参考にしてください。

Cocoonの子テーマをインストールする

インストールしたテーマ(今回の場合はCocoon)に対してコードを書き換えるなどのカスタマイズを行う場合、直接Cocoonのファイルを書き換えるのではなく子テーマをインストールして子テーマの方をカスタマイズすると便利です。ここではCocoonの子テーマをインストールする手順について解説します。

次に各コードについて説明します。

.article h2 {
   background: #f5f5f5;
   border-left: solid 10px #529eea;
   color:black;/文字の色を変える/
 }
 .article h3 {
   border: none;
   border-left: solid 10px #529eea;
 }

backgroundで背景色を修正できます。このコードではグレーになっています。

border-leftで左のラインの幅と色を修正できます。このコードではスカイブルーになっています。

pxの前の数字を大きくすると、ラインが太くなります。

カラーコードは下記を参照ください。

別の色を試したいときは下記を参考にしてください。

色々な色を選択することができます。

https://www.colordic.org/

引用

Cocoonの引用はあまりにも見た目が粗末なので修正します。

修正することで下記のようにとてもカッコよくなります。

下記を同様に子テーマ Cocoon Childのstyle.css に張り付けてください。

blockquote {
     position: relative;
     padding: 10px 15px 10px 60px;
     box-sizing: border-box;
     font-style: italic;
     background: #efefef;
     color: #555;
 }
 blockquote {
     position: relative;
     padding: 10px 15px 10px 60px;
     box-sizing: border-box;
     font-style: italic;
     background: #efefef;
     color: #555;
 }
 blockquote {
     position: relative;
     padding: 60px 60px;
     box-sizing: border-box;
     font-style: italic;
     color: #4e4e4e;
     background: #ffffff;
     border: solid 1px silver;
 }
 blockquote:before{
     display: inline-block;
     position: absolute;
     top: 7px;
     left: 10px;
     content: "\f10d";
     font-family: FontAwesome;
     color: silver;
     font-size: 58px;
     line-height: 1;
     font-weight: 900;
 }
 blockquote:after{
     display: inline-block;
     position: absolute;
     bottom: 5px;
     right: 15px;
     text-align: center;
     content: "\f10e";
     font-family: FontAwesome;
     color: silver;
     font-size: 40px;
     line-height: 1;
     font-weight: 900;
 }
 blockquote p {
     position: relative;
     padding: 0;
     margin: 10px 0;
     z-index: 3;
     line-height: 1.7;
 }
 blockquote cite {
     position: relative;
     z-index: 3;
     display: block;
     text-align: right;
     color: #888888;
     font-size: 0.9em;
 }

ブログカード

ブログカードとは下記のようなサムネイルの付いたリンクカードのことを言います。

Cocoon　ブログカード簡単作成！

Cocoon　ブログカード簡単作成！記事内の下記のようなリンクを簡単に作成したいと...

みなさんも一度はどこかのブログで見たことがあるのではないでしょうか？

Cocoonはこのブログカードを簡単に設置することができます。

以下に記事内へのブログカードの設置の仕方について説明します。

まず、左の十字をクリックし、下記を表示させます。そして、コクーンブロックを選択します。

次に左上のブログカードを選択します。

すると下記のようにグレーの枠が現れます。

このグレーの中にリンクさせるページを設定します。

下記のリンクのマークをクリックします。

リンク先の記事を選択することで、下記のようにリンクが挿入されます。

さらに、下記のようにブログカード左上にラベルを付けることができます。

Cocoon　ブログカード簡単作成！

Cocoon　ブログカード簡単作成！記事内の下記のようなリンクを簡単に作成したいと...

グレーの部分をクリックすると、下記のように右にスタイル設定が表示されます。

この設定では、関連記事、人気記事、あわせて読みたいなどの多くのラベルを付けることができます。

さらに見栄えをよくするには下記のコードを追加するといいでしょう。

通常、左下にアドレスが表示されますが、非表示になります。

さらに右下の”続きを読む”の文言を入れることで見た目がカッコよくなります。

.internal-blogcard-footer{
     display: none; /* 内部ブログカードのアイコンとURLを非表示 */
 }
.internal-blogcard::after{
     content: '続きを読む \00bb'; 
     position: absolute;
     bottom: .5rem;
     right: 1rem;
     font-size: 70%;
     background-color: #529eea; 
     padding: .4em 3em;
     font-weight: bold;
     color: #fff; 
     border-radius: 2px;
 }
 .blogcard{
     position: relative;
     padding-bottom:50px;
 }