Cocoonの使い方とカスタマイズ10選を紹介【ヘッダー含む】

Cocoonの使い方とカスタマイズ10選を紹介【ヘッダー含む】ブログ

Cocoonの使い方を解説!ヘッダーもカスタマイズしよう!

Kizuki
Kizuki

こんにちは、管理人のKizukiです!

今回は以下の悩みにお答えしていきたいと思います。

(Kizukiについてはプロフィールをご覧ください)

困っている人
困っている人

WordPress無料のテーマのCocoonをダウンロードしてインストールまで済ませましたが、カスタマイズなどの使い方が分かりません。どうすればいいのですか?(ダウンロード方法は「WordPress無料テーマCocoonのダウンロード方法を解説!」をご覧ください)

結論、Cocoonのウェブサイトで自分が希望するカスタマイズに応じた指南コンテンツを探し、ページの指示通りに動けばカスタマイズが可能です

Cocoonとは、機能が充実しているWordpressテーマですが、カスタマイズ情報が多いので情報の取捨選択が難しい時があります。

基本的にワンクリックでカスタマイズを済ませられたりしますが、自分の思い通りにカスタマイズしたい場合には、まとまった情報があると作業の時短につながります。

本記事では「Cocoonの使い方とカスタマイズ」について解説していきます。

本記事の内容
  • 初心者向けのCocoonカスタマイズ10選
  • ブログ記事作成を支える無料ツール

本記事を読むことで、Cocoonの使い方とカスタマイズの方法を理解できるようになります。

「Cocoonのブログサイトをかっこよくしてみたい」とお悩みの方は、ぜひ本記事をご参考ください。

ご自身の体験談や経験した情報を副業ブログで発信し、収益化を始めるノウハウを知りたい方は「【初心者向け】副業ブログの始め方とは?ポイントは5つ」もご参考ください。
記事の信頼性
Kizuki

Sharestyle Kizuki管理人のKizukiです。国内外のシェアハウスで2年3ヵ月生活してきました(ルームシェアの経験は5か月)。大規模な研修施設での共同生活も経験しています。仕事はITと語学のフリーランスです。英検1級と通訳案内士を取得。自身の経験や見解に基づき、シェアハウス・フリーランス・英語学習の生活に関する記事を公開しています。

Kizukiをフォローする

Cocoonの使い方を解説!ヘッダーもカスタマイズしよう!

Cocoonの使い方を解説!ヘッダーもカスタマイズしよう!

サイトを構築したばかりの初心者が行うCocoonのカスタマイズは、以下の10選です。

Cocoonのカスタマイズ内容
  1. Cocoonのスキン機能でサイトデザインを整える
  2. ヘッダーにロゴとキャッチフレーズを表示する
  3. トップ画面にアピールエリアを表示する
  4. モバイルボタンを表示する
  5. カルーセルでブログ記事のサムネを流し込む
  6. フッターの設定を行う
  7. コンテンツページに目次を表示させる
  8. SNSフォローボタンを表示させる
  9. 記事内でオシャレなアイコンボックスを使う
  10. オシャレなクリックボタンを使う

Cocoonのスキン機能でサイトデザインを整える

Cocoonのスキン機能でサイトデザインを整える

Cocoonのスキンとは、ウェブデザインをワンクリックで設定できる機能です。

WordPress管理画面の左サイドバーから「Cocoon設定>Cocoon設定」の順にクリックすると、上図の設定画面が表示されますので、左上にある「スキン」をクリックしてください。

スキン画面ではテンプレートの一覧が表示されます。

スキン画面ではサイト構築に利用できる「テンプレート名」と「作者」の一覧が表示されます。

Kizuki
Kizuki

どのテンプレートもテイストが異なるので、ご自身の好みに合うデザインを選んでください。ちなみに私はtakasakiさんのホワイトラーメンを使っています。

通常のサイト構築ではHTMLやCSSの専門知識を使ってカスタマイズを行いますが、装飾関係ならスキン機能を使えばすぐに終わります。

ヘッダーにロゴとキャッチフレーズを表示する

ヘッダーにロゴとキャッチフレーズを表示する

ヘッダーをカスタマイズする時は、Cocoon設定画面の「ヘッダー」をクリックしてください。

ヘッダーロゴとキャッチフレーズを設定する

Kizuki
Kizuki

私は自分で作成したヘッダーロゴをアップロードし、サイズも調整しました。キャッチフレーズが合わなかったので非表示にしていますが、お好みで設定してください。

トップ画面にアピールエリアを表示する

トップ画面にアピールエリアを表示する

アピールエリアとは、上図の通りトップ画像と文章説明を指します。

Cocoon設定画面中段の真ん中にある「アピールエリア」をクリックしてください。

私が設定した項目は以下の通りです。

アピール画像の設定をしましょう。

まずはアピールエリア画像の設定です。

アピールエリア画像設定
  • アピールエリアをどこに表示させるのか
  • 高さ
  • 画像
  • エリア背景色
  • テキストエリア表示の有無
ちなみにブログで利用できるフリー画像については「【著作権は?】ブログで使えるフリー画像素材サイト10選」で紹介しています。

モバイルボタンを表示する

モバイルボタンを表示する

モバイルボタンとは、上図赤枠のようにスマホでウェブサイトを閲覧する時に表示される操作ボタンです。

Cocoon設定画面の中段右にある「モバイル」を選択してカスタマイズしましょう。

Kizuki
Kizuki

モバイル設定の注意点は、一部がレスポンシブ設定になっていない場合の対処法です。

たとえば私が初めてモバイル設定をした時は以下のような表示になり、アピールタイトルとアピールボタンが画面からはみ出る表示になっていました。

私が初めてモバイル設定をした時は以下のような表示になり、アピールボタンがはみ出る表示になっていました。

実際にスマホの実機で確認した時も文字がはみ出ていたため、CSSのコードを修正しました。

上記のようなケースで修正が必要な場合は、下記のコードをCocoon子テーマの「style.css」ファイルに貼り付けて検証してみてください(私が修正時に用いたコードです)

@media screen and (max-width: 834px){
.appeal-title {
display: inline-block;
max-width: 100%;
}
.appeal-button {
display: inline-block;
max-width: 100%;
}

カルーセルでブログ記事のサムネを流し込む

カルーセルでブログ記事のサムネを流し込む

カルーセルとは、上図赤枠のように画像などのコンテンツを自動でスライドさせる機能です。

Kizuki
Kizuki

Cocoonのカルーセルでは、トップページで人気記事のサムネ画像を自動スライドさせて表示できます。

カルーセルでブログ記事のサムネを流し込む

まずCocoon設定画面の中段から「カルーセル」を選択し、上図のように「カルーセルの表示」「表示内容」を設定してください。

私は「最大表示数」で表示サムネ数を決め、「オートプレイ」「オートプレイインターバル」も設定してスライドが自動で流れるようにしました。

フッターの設定を行う

フッターの設定を行う

Cocoon設定画面中段の「フッター」タブをクリックすると、フッターの表示内容も設定できます。

フッターにはロゴだけでなく、クレジット表記もできるのが特徴です。

どのように表示させるかは、ご自身のお好みで選択してみてください。

コンテンツページに目次を表示させる

コンテンツページに目次を表示させる

Cocoon設定画面上段の「目次」をクリックすると、目次の表示有無やどのように表示させるかを設定できます。

Kizuki
Kizuki

私の場合は投稿ページにデフォルトで目次を表示させるようにしているため、同様の設定にしたい場合は、上図をご参考ください。

SNSフォローボタンを表示させる

SNSフォローボタンを表示させる

Cocoon設定画面中段左の「SNSフォロー」をクリックすると、コンテンツページにSNSのフォローボタンを設置できるようになります。

私はTwitterも使っているため、SNSボタンを表示するようにしていますが、「スキン」の設定を適用しているせいか、SNSフォローボタンの表示内容がプレビューと若干異なります。

「スキン」の設定を適用しているせいか、SNSフォローボタンの表示内容がプレビューと若干異なります。

Kizuki
Kizuki

「スキン」も設定している場合は、実際にSNSフォローボタンを表示させて内容を確認してみてください。

記事内でオシャレなアイコンボックスを使う

記事内でイケてるアイコンボックスを使う

Cocoon公式サイトで紹介されている拡張スタイルを使うと、オシャレなアイコンボックスをサクサク使えます。

たとえば上図のように「スタイル>ボックス(アイコン)>補足情報(i)」を選択すると、このようなアイコンボックスを使えるようになります。
「スタイル>マーカー>黄色マーカー」を選択すれば、このようなマーカーも使えるので、装飾のカスタマイズが楽しくなりますね。

オシャレなクリックボタンを使う

オシャレなクリックボタンを使う

文字装飾やアイコンボックスだけでなく、クリックボタンの配置も可能です。

上図のように「スタイル>ボタン>レッド(大)」をクリックすると、下記のボタンを設置できます。

このようなボタンを設置できます

Kizuki
Kizuki

スタイル機能に慣れてくるとデザインの装飾が楽しくなってくるので、記事執筆時にいろいろ試してみてください。

まとめ:ブログ記事作成では無料ツールを使っていこう

まとめ:ブログ記事作成では無料ツールを使っていこう

本記事では「Cocoonの使い方とカスタマイズ10点」をご紹介しました。

Cocoonは無料のWordpressテーマですが、機能をうまく使えばブログ執筆が大きく捗ります。

Kizuki
Kizuki

他にもラッコキーワードのように、キーワード選定をサポートする無料ツールもあります(ラッコキーワードについては「【無料のブログツール】ラッコキーワードの使い方とは?」で解説)

ぜひ有料級の無料ツールを利用し、ぜひブログ記事の執筆へ役立ててみてください!

プラグインの設定も一気に終わらせたい場合は「【インストールしよう】WordPressおすすめプラグイン8選」もご参考ください。

本記事のように、WEBサイト制作の体験談をブログで発信していきたい場合は、下記の情報もご参考ください。

【無料登録できるおすすめのアフィリエイトASP】

【おすすめのレンタルサーバー】

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