無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!〜コピペだけでできる簡単カスタマイズ方法

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ! つくる

ワードプレスの無料テーマCocoon(コクーン)は、無料なのに思いっきり心地よい使用感。

初心者が疑問を持つこと、「あ==、もうわからない!!」と投げ出してしまいたくなることがボタンクリック一つでクリアできてしまうのです。

無料テーマCocoon(コクーン)は、初めてワードプレスにチャレンジされる初心者にも丁寧親切で、おしゃれに仕上がるテーマだと感じました。

そこで、初めての方にもできるCocoonのカスタマイズ法をご紹介させていただきます。٩(ω’ )و

 

無料テーマCocoon(コクーン)の特徴

ワードプレスの無料テーマCocoon(コクーン)は、シンプルで使いやすい「Simplicity」というテーマの後継として作られたテーマです。

自分は「Simplicity」も利用させてもらっていますが、これも無料とは思えないほどシンプルで、使いやすいテーマです。

その後継とされているだけあって、Cocoonはさらに快適なブログライフを過ごすことができますよ。٩(ω’ )و

スポンサーリンク


とてもシンプル

使い方も見た目もとてもシンプル。

白を基調としたテーマで、検索で調べごとをしている人にとっては「文字」が読みやすいテーマだと感じます。

調べごとをしている人にとって大切なのは、文字の読みやすさ、内容のわかりやすさです。

そういう面でも、Cocoonは最適だと思うんですよね。(内容は作成者のセンスとなりますが・・)

 

内部SEO施策済み

このあたりは初心者にとって「?」な部分です。

SEOって何?

SEO対策とは?

という話になるので、細かいことは割愛しますが、要するにコクーンには検索に有利な仕組みが、初めから施されてあるということです。

特別な「SEO対策をしなくてもイケますよ!」ということ。

 

完全なレスポンシブスタイル

スマートフォンが普及された今の世の中レスポンシブであることは必須だと言えます。

「レスポンシブ」とは、パソコンならパソコンに合ったウェブページ、スマホならスマホに合ったウェブページというように、閲覧者の画面サイズに合わせて表示するウェブデザインの手法です。

2018年、インターネット利用の主要デバイスはスマホでの閲覧が7割以上を占めるようです。

全体の7割以上がスマートフォンから閲覧していることからも想像できるかと思いますが、それに合ったウェブページを表示しなければ、その見にくさからブログを見てもらえないことも十分に考えられます。

ブログを読んでもらう、アクセスを増やすためにレスポンシブスタイルは絶対に必要な条件となります。

 

収益化も簡単

初心者にとっては「広告を貼る(Adsenseなど)」という作業もちんぷんかんぷん。

コードをコピーできても、その後、どこにどのようにペーストすれば良いかわからない方もいらっしゃるはず。

そんな時でもCocoonなら、ボタンクリック一つで実行できてしまうのです。

「広告の表示位置」を自由に選択できるのもコクーンの大きなメリットですが、これもボタンチェックのみ。

わかりやすく、簡単な手順です。

 

必要な装飾が装備

ブログの主役はあくまでも内容(コンテンツ)

ブログを訪れるユーザーさんの役に立つことですよね。

極度な装飾や、華やかなデザインは必要性が薄いとも言えます。(グーグル的には特に)

内容の濃いコンテンツを手助けするために必要な装飾が、Cocoonには備わっているため、特に何もする必要がないのは初心者にとって、コンテンツに集中したい方にとってはとても嬉しい機能。

装飾として装備されているもの。

吹き出し機能

定型文のテンプレート化機能

アフィリエイトタグの一元管理

ランキング作成

ブログカード機能

文章の装飾スタイル

 

SNS機能も充実

記事がSNSで拡散されれば、短時間で多くのアクセスが見込まれます。

アクセスを増やす方法としては一番速い方法でもありますよね。

コクーンは、様々なSNSフォローボタンに対応しています。

ウェブサイト

Twitter

Facebook

Google+

はてなブックマーク

instagram

Pinterest

YouTube

Flickr

LINE@

Amazon欲しい物リスト

GitHub

feedly

RSS

 

カスタマイズが簡単

無料テーマCocoon(コクーン)は、シンプルなおしゃれさを持ち合わせているのでカスタマイズしなくても十分おしゃれで、見やすいサイト運営をすることが可能です。

あくまでも主役は内容(コンテンツ)ですからね!

しかし、cocoonでは簡単なカスタマイズが素早く手軽に設定できるよう工夫されています。

初心者にとてもわかりやすく設定されているのが何よりも嬉しい。٩(ω’ )و

 

無料テーマを選んだ理由

ワードプレスのテーマを選ぶ際に「有料」「無料」で悩んでいる方、多いと思います。

自分もそうでした。

当時、有料テーマにかける費用がないことから、無料テーマ「Simplicity」を使ってブログ運営をしていたのですが(現在進行形)、特に不自由を感じたことはなかったんですね。

でも、SNSや他人のブログから「有料テーマ」というものに興味を抱いたのです。

 

有料テーマの方がかっこよくできるのかな?

有料テーマの方がSEO効果があるのかな?

有料テーマの方が何かとメリット多いのかな?

 

などの疑問を持ち、人様にお聞きしても解決しなかったことから実際に「有料テーマ」を購入してみました。

「有料テーマを購入した結果何も変化なし」でした。٩(ω’ )و

有料テーマを使っても自分好みのサイトデザインにするには、カスタマイズが必要だし、

検索流入数(アクセス)についても正しい作成方法をしていれば、特別な変化はないし、

無料テーマよりも優れている点というのは、特に感じませんでした。

 

変化がない、変わらないのであれば「無料テーマで十分なのかな」と考えたわけです。

繰り返しますが、ブログにおいての最重要は内容(コンテンツ)であり、サイトデザインではありません。

デザインに凝る時間を、記事作成に費やした方が良いという結論に至りました。

 

スポンサーリンク


初心者向けカスタマイズ

「ブログにおいての最重要は内容(コンテンツ)である」という考えから、無料テーマCocoonについてのカスタマイズも必要最低限しか行なっていません。

とにかく早く、記事作りに入りたかったからです。

サイトのオリジナル性を演出するため「シンプルで見やすく、かつ、ちょっとだけおしゃれさを」というコンセプトのもとカスタマイズしました。

難しいカスタマイズは行なっていませんので、いたって初心者向けのカスタマイズとなります。

ワードプレス無料テーマ「Cocoon(コクーン)」でこれからブログに挑戦しようという方は、ぜひ参考にされてみてください。

 

これからご紹介するカスタマイズは全て「ダッシュボード外観テーマの編集 → Cocoon Child: スタイルシート (style.css)」にコピペするだけ、簡単に変更可能です。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

ワードプレス初心者様は、ぜひコピペでご自分のブログをカスタマイズしてみてください。

 

ダウンロード、インストールはできていますか?

カスタマイズの前にCocoonテーマをインストールする必要があります。

こちらのサイトCocoonをダウンロードしたら、自分のサイト「外観テーマ」をクリックします。

 

新規追加からCocoonテーマのアップロードを行います。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!
無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

先ほどDLしたフォルダを「ファイルを選択」から選ぶだけでインストールが開始されます。

 

その後「有効化」をクリックすれば、OKです。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

 

見出しのカスタマイズ

本文中の「見出し」はSEO的にも重要な役割を果たします。

また、何よりもユーザー様の読みやすさ、理解のしやすさをアップさせるものなので、少しだけおしゃれにしておきたい部分です。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

ここでは、画像のような見出しを設定しております。

見出しのカスタマイズ(コピペしてください)

.article h2  {

  background: #67bdbf;

  box-shadow: 0px 0px 0px 5px #67bdbf;

  border: dashed 2px white;

  padding: 0.2em 0.5em;

}

.article h3 {

letter-spacing: 0.2em;/*文字間*/

border-left: solid 10px #67bdbf;/*左カラー*/

}

.article h4 {

letter-spacing: 0.2em;/*文字間*/

border-color: #67bdbf;

}

.article h5 {

letter-spacing: 0.2em;/*文字間*/

border-bottom: dashed 2px #67bdbf;

}

変更が必要な箇所

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!
見出し背景色やラインカラー

 

 

サイドバー見出しのカスタマイズ

見出しカラーに合わせて、サイドバーも少しだけイメチェンしました。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

統一感が出て、オリジナル性が高まります。(色での印象も大切!!)

サイドバーの見出し(コピペしてください)

.sidebar h3 {

    background: none;

    font-size: 16px;

    letter-spacing: 2px;

    display: inline-block;

    position: relative;

    width: 100%;

    padding: 0;

    text-align: center;

}

.sidebar h3::before, .sidebar h3::after {

    content: ”;

    position: absolute;

    top: 50%;

    width: 28%; /*ラインの長さ*/

    border-top: 3px solid #67bdbf; /*ラインの色*/

}

.sidebar h3::before {

    left: 0;

}

.sidebar h3::after {

    right: 0;

}

変更が必要な箇所

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

ラインの長さ(画像を参考に決めると良いですよ。)

ラインカラー

 

検索窓のカスタマイズ

検索窓にカーソルを当てると、枠色が変化するというもの。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

とても細かい部分なので、こだわる方にオススメするカスタマイズ。(必要ない場合はスルー)

検索窓のカスタマイズ(コピペしてください)

input::placeholder{

font-size:0.75em;/*「サイト内を検索」の文字サイズ*/

}

.search-edit{

border-radius:10px;/*検索ボックスの角のまるさ*/

height:40px;

}

.search-submit{

top:0px;

line-height:0.25;

bottom:0;

}

.search-submit:hover::before{

color:#bdf1f1;/*検索ボタンホバー時の色*/

}

変更が必要な箇所

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

文字のサイズ

検索枠の角の割合

検索窓にカーソルを当てた場合の色

 

カテゴリのカスタマイズ

サイトを遊びっぽくしたかったので、カテゴリーをファイルアイコン付きにしてみました。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

アイコンを自由に変えることも可能ですが、初心者様にはこのままコピペしていただくことをオススメします。

「嫌だ!」という場合はスルーしてください。

カテゴリのカスタマイズ(コピペしてください)

/*———————————

親カテゴリのカスタマイズ

——————————–*/

.widget_categories ul li a{

  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */

}

.widget_categories ul li a::before{

  font-family: FontAwesome;

  content: “\f07b”; /* FontAwesomeのユニコード */

  color: #5FB3F5; /* アイコンの色 */

  padding-right: 6px;

}

.widget_categories > ul > li > a:first-child{

  border-top: none;

}

/*———————————

子カテゴリのカスタマイズ

——————————–*/

.widget_categories ul li ul li a::before{

  font-family: FontAwesome;

  content: “\f114”; /* FontAwesomeのユニコード */

  color: #5FB3F5; /* アイコンの色 */

  padding-right: 6px;

}

変更が必要な箇所

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

文字したラインカラー

ファイルアイコンカラー

 

タグクラウドのカスタマイズ

通常は文字のみが配列されますが、これもちょっとだけ遊び要素を加えてみました。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

タグクラウドのカスタマイズ(コピペしてください)

/*———————————

タグクラウドカスタマイズ

——————————–*/

.tagcloud {

  display: inline-block;

  padding: 0px 2px 0px 2px;

}

.tagcloud a {

  text-decoration: none; /*テキスト初期化*/

  color: #fff; /*タグフォントカラー*/

  font-size: 12px; /*タグフォントサイズ*/

  font-weight:bold; /*文字強調*/

  display: inline-block; /*横並びで上下左右空白有り*/

  background-color: #c4f8f8; /*タグ背景色*/

  padding: 2px 6px 0px 6px; /*タグ内側余白*/

  margin: 0px 0px 4px 0px; /*タグ外側余白*/

  border-radius: 9px 3px; /*タグデザイン*/

  border: 0px; /*タグ枠線無し*/

  word-break: break-all; /*テキストの途中で改行させない*/

}

変更が必要な箇所

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

タグないの文字カラー

文字サイズ

タグの背景色

 

次のページ(ページネーション)のカスタマイズ

通常は数字のみが表示されるのですが、丸型にカスタマイズしてみました。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

カーソルを当てると色が変わります。

ページネーションのカスタマイズ(コピペしてください)

.pagination-next, .next, .prev, .pager-prev-next{ display: none; }

.pager-numbers a { text-decoration: none; }

.page-numbers{

    border: none !important;

    border-radius: 50%;

    font-family: sans-serif;

    font-size: 80%;

    color: #666 !important;

    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);

    transition: all .1s ease;

    background-color: #ffffff;

}

.pagination a.page-numbers:hover,.pager-numbers a:hover .page-numbers{

    background-color: #b0c4de; /* マウスオーバー時の背景色 */

    color: #fff !important;

}

.pagination .current, .pager-links .current{

    background-color: #f0f8ff;

    color: #fff;

}

変更が必要な箇所

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

円の背景色(文字はグレーになります。)

カーソルを当てた時の色(文字は白になります。)

 

モバイル画面でのカスタマイズ

スマホ検索が割合を多くしめるため、Cocoonではスマホ表示も実に見やすくデザインされています。

カラーを変更するだけで、オリジナル性が出せるのでおすすめのカスタマイズです。

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

モバイルのメニュー色カスタマイズ(コピペしてください)

/* メニューのみ */

.navi-menu-button {

color: #2cc1c6;

}

/* ホームのみ */

.mobile-menu-buttons .home-menu-button > a {

color: #2cc1c6;

}

/* 検索のみ */

.search-menu-button {

color: #2cc1c6;

}

/* トップのみ:トップに画像を入れる歳は不要 */

.mobile-menu-buttons .top-menu-button > a {

color: #2cc1c6;

}

/* サイドバーのみ */

.sidebar-menu-button {

color: #2cc1c6;

}

/* ボタンhover時の文字・背景変更 */

.mobile-menu-buttons .menu-button:hover {

background-color: #e6f5f6; /* 背景色 */

color: #178e92; /* 文字の色 */

}

/* トップ・ホームの『文字』は構造上別途必要 */

.top-menu-button a:hover, /*トップに戻る画像を入れる場合はこの1行削除*/

.home-menu-button a:hover {

color:#178e92; /* ここは同じ文字色を */

}

変更が必要な箇所

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

各アイコンの色(全部違う色にすることも可能ですよ。)

ボタンをタップした時のカラーと文字色

 

モバイルメニューの背景色をカスタマイズ

アイコンの背景になりますね。(色をつけたい場合の身。)

モバイルメニューの背景色をカスタマイズ(コピペしてください)

/*———————————

    スライドインのカスタマイズ

——————————–*/

/* 背景色を変更:背景画像にするなら不要 */

.mobile-menu-buttons {

background: #e9f8f8;

}

変更が必要な箇所

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!

背景色のみ

 

以上が、このブログで行なった必要最低限のカスタマイズです。

初心者向けに、コピペのみでできるシンプルなカスタマイズ方法をご紹介させていただきました。

無料テーマCocoon(コクーン)をお使いの方は他にもたくさんいらっしゃって、プロデザイナーのように素晴らしいカスタマイズをされているブログがたくさん存在します。

ぜひ、いろいろなブログを見て自分好みのブログカスタマイズを行なってくださいね。٩( ‘ω’ )و

 

・【記事外注】ライターさんに依頼するデメリットをメリットへ~おすすめのクラウドソーシング登録方法~依頼方法までわかりやすく解説!!

・簡単で見映えのする「アイキャッチ画像」を作りたい方にはCanva(キャンバ)がおすすめ~使い方詳細

・集客のためにアクセスを増やしたい ~ せっかくサイトを作ったのに訪問者が増えないかたへ

・「常時SSL化」が意外にも簡単にできた ~ Web初心者に神対応なおすすめの方法

・簡単に目次が作れるWordPressプラグイン「Table of Contents Plus」の設定方法 ~ ブログ記事内「目次」は読者にとって利便性が高い

・【POMU.ME(ポムミー)】SNSプロフィールをおしゃれに、わかりやすく!~無料で簡単に作る方法

・【SNSアイコン画像】おすすめ作成法14選!~超簡単な使い方もご紹介!!

 

無料テーマ【Cocoon(コクーン)】ワードプレス初心者におすすめ!~コピペだけでできる簡単カスタマイズ方法を最後までお読みいただき、ありがとうございました。

コメント

タイトルとURLをコピーしました