無料テーマCocoonを使い始めたけど、サイトの見栄えがどうしたら良くなるのかよく分からないという方がおられるかと思います。
私はサイト運営で、年間に100万円以上稼げるようになりました。
この記事では簡単なカスタマイズを行うことで格段に見栄えが良くなる方法をご紹介します。
Cocoonのカスタマイズ ９選！
このサイトもCocoonを使っており、今回は9つのカスタマイズを以下にご紹介します。
この9つのカスタマイズを行うだけで、サイトの見栄えが格段に上がります！
以下、順に説明します。
スキンのカスタマイズ
スキンとは先ほど述べたように、 サイトの基本構成や基本色を決める設定のことを言います。
例えば、あたかも洋服を着替えるかのようにサイトの基本構成、基本色を下記のように変更することができます。
コクーンの素晴らしいメリットはクリック一つで、このスキンを変更できることです。
スキンの設定の仕方は、左にあるコクーン設定からスキンを選択し、自分の好みのスキンを選びます。
以下の設定から左側にあるスキンを選択します。
現在、スキンがデフォルトで約40種類用意されています。
このサイトもスキンを使用しており、下記のブルーをベースとしています。
他にも下記のようなカラフルなものもあります。
下記のような四季に合わせたカラーもあります。
プロフィールのカスタマイズ
下記のようにシンプルで見やすいプロフィールにします。
下記のコードをCocoon Child(子テーマ)のstyle.cssに張り付けてください。
/
** プロフィール欄
/
.nwa .author-box {
max-width:none;
padding: 0;
}
aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
padding: 0!important;
border-radius: 10px;
}
@media (max-width: 1023px){
aside {
padding: 0 .5em;
}
}
.nwa .author-box .author-thumb {
width: 100%;
height:9em;
margin:0 0 5em 0;
border-radius: 10px 10px 0 0;
}
.author-box figure.author-thumb{
float: none;
text-align: center;
background: url( /こちらに背景画像のアップロードURLを入力/) center no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
background-image: none;
padding: 0!important;
box-shadow:none;
}
.author-box figure.author-thumb img{
width: 40%;
max-width:180px;
margin-top:5em;
}
@media (min-width:1023px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:120px;
}}
@media (max-width:480px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:130px;
}}
.author-box .author-name {
margin: 0 0 2em 0;
}
.author-box .author-content .author-name a{
text-decoration: none;
font-size:1.2em;
color:#545454;
}
.nwa .author-box .author-description {
margin-bottom:1.5em
}
.author-box .author-content .author-description p{
font-size:14px;
color:#7b7b7b;
line-height:1.6em!important;
margin:1em;
}
author_box-2 p{
margin:1em 2.5em;
}
div.author-follows{
padding-bottom:2em;
}
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
color: #fff!important;
margin:0 3px;
transition: .5s;
}
div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #7dcdf7!important;}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
div.author-follows a.follow-button.rss-button.rss-follow-button-sq{background-color: #f26522!important;}
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }
@media (max-width:1023px){
.nwa .author-box .author-thumb {
height:11em;
margin:0 0 7em 0;
}
.author-name{
font-size:16px!important;
}
.author-description{
line-height: 1.5 !important;
text-align:center;
margin:0 auto;
}
}
@media screen and (max-width: 1023px){/スマホ画面でサイドバーを非表示/
div.sidebar {
display: none;
}
}
.author-box .sns-follow-buttons a.follow-button {
background-color: #fff;
color:black;
border: 0px;
}
.author-box {
border: 0px;
}カラム幅のカスタマイズ
文章の横幅が広すぎて、読みにくいので横幅を変更します。
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(子テーマ) が無い場合があるので、その場合は下記を参考にしてください。
次に各コードについて説明します。
.article h2 {
background: #f5f5f5;
border-left: solid 10px #529eea;
color:black;/文字の色を変える/
}
.article h3 {
border: none;
border-left: solid 10px #529eea;
}backgroundで背景色を修正できます。このコードではグレーになっています。
border-leftで左のラインの幅と色を修正できます。 このコードではスカイブルーになっています。
pxの前の数字を大きくすると、ラインが太くなります。
カラーコードは下記を参照ください。
別の色を試したいときは下記を参考にしてください。
色々な色を選択することができます。
引用のカスタマイズ
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はこのブログカードを簡単に設置することができます。
以下に記事内へのブログカードの設置の仕方について説明します。
まず、左の十字をクリックし、下記を表示させます。そして、コクーンブロックを選択します。
次に左上のブログカードを選択します。
すると下記のようにグレーの枠が現れます。
このグレーの中にリンクさせるページを設定します。
下記のリンクのマークをクリックします。
リンク先の記事を選択することで、下記のようにリンクが挿入されます。
さらに、下記のようにブログカード左上にラベルを付けることができます。
グレーの部分をクリックすると、下記のように右にスタイル設定が表示されます。
この設定では、関連記事、人気記事、あわせて読みたいなどの多くのラベルを付けることができます。
さらに見栄えをよくするには下記のコードを追加するといいでしょう。
通常、左下にアドレスが表示されますが、非表示になります。
さらに右下の”続きを読む”の文言を入れることで見た目がカッコよくなります。
.internal-blogcard-footer{
display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}
.internal-blogcard::after{
content: '続きを読む .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;
}bb';
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;
}見出しボックス表示のカスタマイズ
Cocoonは様々な見出しボックスがあり、これらを使うことで記事の見栄えが良くなります。
見出しボックスとは例えば下記のようなものです。
見出しボックス
テスト
白抜きボックス
テスト
案内ボックス
テスト
以上は色が青ですが、他の色に簡単に設定することが可能です。
他にもたくさんあり、詳細は下記を参考にしてください。
メニューのカスタマイズ
メニューに下記の赤枠のようなアイコン表示させることで、メニューを見やすくさせましょう。
下記に設定手順を示します。
まず、アイコンを入手するため下記のFont Awesomeというサイトへ行きます。
下記の赤枠にあるIconsをクリックします。
下記のようにたくさんのアイコンがあります。
ここで自分の好きなアイコンをクリックします。
検索窓で検索することも可能です。
検索窓でHOMEと検索すると下記の画面が現れます。
下記の赤枠のコードをコピーしておきます。
外観、メニューからメニュー設定において、下記のようにナビゲーションラベルに先ほどのコードをペーストします。
以上でアイコン設定は完了です。
商品リンクのカスタマイズ
下記のような商品リンクを見たことはないでしょうか。
この商品リンクから商品が売れると売値の数％の収益を得ることが可能です。
この商品リンクの作成の仕方は、もしもアフィリエイト、 バリューコマース、 カエレバを使う方法があります。
もしもアフィリエイトの設定が簡単で、見た目的にもきれいです。
このためもしもアフィリエイトの商品リンクを使用することをお勧めします。
おすすめの商品リンクの詳細は下記を参考にしてください。
まとめ
コクーンのカスタマイズ方法をご紹介しました。
サイトの見栄えを良くすることによって読みやすいページを作ることができると思います。
いろいろ試してみてください。
サムネイルのサイズを統一したい場合、下記の記事を参考にしてください。
ブログやサイトの収益化はアフィリエイト行うといいでしょう。詳細は下記を参考にしてください。
おすすめのアフィリエイトサイトに関する詳細は下記をどうぞ。
ブログの書き方は下記の記事を参考にしてください。
私のサイトの収益は下記の記事を参考にしてください。
