想定読者Cocoonのカスタマイズに興味がある方「Cocoonのカスタマイズ全てを知り尽くしたい。」
本記事は、上記の方に向けて執筆しています。
本記事の内容
- Cocoonの初期設定
- Cocoonのヘッダー設定
- Cocoonのトップページ設定
- Cocoonのサイドバー設定
本記事では、Cocoonの使い方｜全てのカスタマイズを網羅していく予定です。
Cocoon以外のWordPressテーマで運営したい方は下記の記事をご覧ください。
Cocoonの初期設定｜使い方を解説
まずは、Cocoonの初期設定を行なっていきます。
- Cocoonのインストール
- スキンの設定
- SEO対策
Cocoonのインストール
まずは、Cocoon公式サイトにて、親テーマをインストールしましょう。
次に、子テーマをインストールしていきます。
親・子のインストールが終わりましたら、WordPressの管理画面へ戻りましょう。
外観<テーマ<新規追加<テーマのアップロードをクリックしてください。
このような画面が表示されますので、先ほどダウンロードしたzipファイルを追加していきます。
cocoon-master-2.3.8.zipを開き、その後【今すぐインストール】をクリックします。数秒で解凍されるので少し待ちましょう。
解凍されたら、有効化を行います。
同じような流れで、子テーマもアップロード→有効化を行っていきましょう。
この画面になっている方は、子テーマのインストールも完了したサインです。
スキンの設定→おしゃれなテンプレート
Cocoonでは「スキン機能」が実装されています。
私が運営するサブサイトでは「Natural(ブルー)」を活用しています。
スキン機能を使うことで、コーディングスキルのないブログ運営者でもプロレベルのデザインを実装することができます。
今回は、私が使用しているNatural(ブルー)に設定を変更してみましょう。
まずはCocoon設定へ移動し、スキンの項目をクリックします。
画面を下にスクロールすると、上記の画像のように色々な項目が現れますので、「Natural(ブルー)」に設定を変更しましょう。
エコおじいたったこれだけでスキンの設定は完了です。
Cocoonの初期設定｜SEO対策
Cocoonに限らず、ブログ運営をするのであればSEO対策は必要です。
SEO対策とは：特定の記事をGoogle検索上位に表示させる対策
具体的に、本記事では「Cocoon カスタマイズ」を狙って記事を書いています。
こんな感じで、ブログ収益化していくならSEO対策は必須です。
エコおじいCocoonのSEO対策設定を下記の記事で詳しく紹介しています。
ぜひご覧ください。
Cocoonの使い方｜ヘッダー設定のカスタマイズ
ここからは、Cocoonの使い方｜ヘッダー設定のカスタマイズについて解説していきます。
Cocoonのヘッダーでカスタマイズできる部分は下記の3つです。
- ヘッダーロゴのカスタマイズ
- ヘッダーメニューのカスタマイズ
- ヘッダーアピールエリアのカスタマイズ
エコおじい１つずつ解説していきます。
ヘッダーロゴのカスタマイズ
SIB部分のヘッダーロゴを「Cocoon機能」でカスタマイズしていきましょう。
カスタマイズできる部分
- ヘッダーレイアウト
- ヘッダーの高さ
- ヘッダーのキャッチフレーズ
- ヘッダー背景画像
エコおじい上記に加えて、Cocoonヘッダーロゴ画像を設定する方法を下記の記事で詳しく解説しています。
ヘッダーメニューの設置
ここでは簡単にヘッダーメニューを設置する方法を解説していきます。
まず、WordPress管理画面＜外観＜メニューへ移動してください。
- メニュー名
- メニュー設定：「ヘッダーメニュー」「ヘッダーモバイルメニュー」にチェックを入れる
エコおじいチェックを入れましたら、保存をクリックしましょう。
後は、好きなページを追加するだけです。
当サイトでは、サンプルページを追加してみました。追加を終えましたら、【メニューを保存】を必ずクリックしましょう。
エコおじい正しく、ヘッダーメニューが追加されています。
ヘッダーアピールエリアのカスタマイズ
アピールエリアとは、読者が思わず立ち止まってしまう場所です。
上記の機能をカスタマイズすることで、ユーザーの回遊率を高めることができるので、絶対に設定しましょう。
カスタマイズできる部分
- 高さ
- エリア
- テキストメッセージ
- ボタン
エコおじい上記に加えて、色合いやボックスなどをカスタマイズすることができます。
ぜひ、下記の記事をご覧ください。
Cocoonの使い方｜トップページ設定のカスタマイズ
ここからは、Cocoon使い方｜トップページ設定のカスタマイズについて解説していきます。
トップページでのカスタマイズは2つほど紹介させて戴きます。
- おすすめカードのカスタマイズ
- インデックスカードのカスタマイズ
エコおじい上記を詳しく解説していきます。
おすすめカードのカスタマイズ
おすすめカードとは、サイトページの上部分に掲載されている記事を意味しています。
Cocoonの初期機能で、ある程度のおすすめカードは簡単に設置可能です。
エコおじい上記に加えて、CSSでカスタマイズする方法を下記の記事で詳しく紹介していますので、ぜひご覧ください。
インデックスカードのカスタマイズ
Cocoonのインデックスカードとは、記事一覧リストを意味しています。
エコおじい初期設定のイメージとしては上記のような感じです。
初期設定に簡単なCSSを追加することで、流行りのWebデザインにすることができます。
詳しい解説は下記の記事で紹介していますので、ぜひご覧ください。
Cocoonの使い方｜サイドバー設定のカスタマイズ
ここからは、Cocoonの使い方｜サイドバー設定のカスタマイズを解説していきます。
サイドバーでのカスタマイズを4つほど紹介させていただきます。
- サイドバー基本設定
- プロフィールのカスタマイズ
- 人気記事のカスタマイズ
- Twitterを埋め込む
エコおじい上記を詳しく解説していきます。
サイドバー基本設定
Cocoonサイドバーの初期設定は上記画像の様に設定されています。
そのままですと、デザイン的に良くないので、改善する必要があります。
Cocoonサイドバーおすすめ配置
- 検索窓
- プロフィール
- カテゴリー
- タグ
- 人気記事
エコおじい上記のような配置を正しく作る方法を下記の記事で紹介していますので、ぜひご覧ください。
プロフィールのカスタマイズ
Cocoonには初期機能として「プロフィール機能」が実装されています。
ただ、初期機能のままだとデザイン的に質素なので、CSSを使ってカスタマイズしてみましょう。
CSSカスタマイズしている部分
- 背景画像の指定
- SNSアカウント
エコおじいコピペでできるカスタマイズを下記の記事で紹介していますので、ぜひご覧ください。
人気記事のカスタマイズ
Cocoonには初期機能として「ランキング｜人気記事機能」が実装されています。
そのままでも素晴らしい機能ですが、カスタマイズすることでより素晴らしいデザインにすることができます。
エコおじい詳しい実装方法は下記の記事をご覧ください。
Twitterを埋め込む
Cocoonに限らず、Twitterの埋め込みは比較的簡単に実装できます。
まずはhttps://publish.twitter.com/にアクセスしましょう。
エコおじいご自身のTwitterアカウント名を貼り付けて、→をクリックしましょう。
クリック後、「Embedded Timeline」と「Twitter Buttons」を選べます。
今回は「Embedded Timeline」を選択しましょう。
その後、【set customization options】が表示されますので、そちらのリンクをクリックしHeight(px)の値を400に設定に【update】をクリックしましょう。
Copy Codeをクリックし、WordPress管理画面＜外観＜ウィジェット＜テキストを選択しサイドバーに設置しましょう。
設置した後は保存し、サイドバーを確認しましょう。
エコおじいこのように表示されていれば、問題なしです。
WordPressカスタマイズ外注したい方
カスタマイズを外注したい方は「ココナラ」がおすすめです。
このように、ココナラでは3000円〜5000円でWordPressのカスタマイズ対応をしてくれます。
先ほどの画像の方のように、ココナラには沢山の案件をこなしている方が在籍しているので、カスタマイズ外注したい方はココナラを活用してみてください。
まとめ：Cocoonの初期設定と使い方｜カスタマイズは当サイトを参考にしよう
ここまでで「【初心者向け】Cocoonのカスタマイズと使い方【WordPress設定】」の解説は以上です。
- Cocoonの初期設定
- Cocoonヘッダーのカスタマイズ
- Cocoonサイドバーのカスタマイズ
エコおじい本記事は以上です。
最後までご覧頂きありがとうございました。
Cocoonではないテーマでブログ運営したい方
Cocoon以外のテーマ、具体的には有料テーマでブログ運営してみたい方は「SWELL」をおすすめします。
エコおじい今、稼いでいるブロガー達はこぞってSWELLを活用しています。
デザイン性＋機能面を考えると当然な気がします。
Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。
有料テーマに挑戦したい方はSWELLがおすすめです。
Cocoonを本格的にカスタマイズしたい方
→プログラミングを学びましょう。
Cocoon含む、WordPressを扱うためには下記の言語が必要です。
- HTML
- CSS
- JavaScript(React)
- PHP(WordPress)
エコおじい当サイトで、すべての言語を学べます。
カスタマイズを本格的に始めたい方はぜひご覧ください。
