> デザインが綺麗でおしゃれ!評判のSWELLをレビュー!

Cocoonの初期設定方法|画像付きで分かりやすく解説

Cocoon-initial-settings

ブログ超初心者のための、「マネするだけでOK」のCocoon初期設定方法になります。

これを見ながら設定すれば、とりあえずCocoonを使ってブログを書く準備ができるので、ぜひサクッと設定してみてくださいね。

WordPressテーマのおすすめランキング

タップできる目次

Cocoonテーマのインストール

まずは、Cocoonのインストール方法を解説しておきます。

「Cocoonを使うことは決めたけど、まだインストールしてない」という方は、下記の記事からCocoonをダウンロード、インストールしておいてください。

Cocoon初期設定①:Cocoon設定

それでは、Cocoon導入後の初期設定方法を解説していきます。

ブログ超初心者向けに、コレをマネすればOKというものにしてあります。

とりあえず今は意がが分からなくても、「マネ」していってください。

Cocoon設定①:スキン

スキン

Cocoon設定の「スキン」では、デザインの着せ替えができます。

下記のようにスキン名横の「画像マーク」にカーソルを合わせるとイメージ画像が出るので、好きなイメージを選びましょう。

Cocoonスキンを選ぶ

選んだら、ページ下部の「変更をまとめて保存」を忘れずにクリックしてください。

Cocoon設定②:タイトル

タイトル

Cocoon設定の「タイトル」では、サイトのタイトルや説明文を設定できます。

とりあえず、下記の2か所だけ設定しておきましょう。

ちなみに、用語が分からない方のため、以下解説しておきます。

フロントページタイトル

「サイト名」では、サイト名のみ表示させる。

「サイト名|キャッチフレーズ」では、サイト名の右側にキャッチフレーズが表示される。

「自由形式」では、自由形式タイトルに入力したものが表示される。

といった設定ができます。

タイトル
サイトの説明

サイトの説明に入力したものが、タイトルの下に検索結果に表示されます。

メタディスクリプション

Cocoon設定③:SEO

Cocoon設定の「SEO」では、SEO(検索エンジン最適化)の設定ができます。

ここで、やっておきたいのは下記です。

タグ

「タグページをnoindexとする」にチェックを入れましょう。

この記事ではブログ初心者向けに書いていますが、タグページの効果的な使い方が分かる方はいないはず。

それが分かるまでは、noindexにしておくことをオススメします。というか必ずそうしておきましょう。

SEO評価が下がります。

Cocoon設定④:OGP

OGP

Cocoon設定の「OGP」とは、SNSでブログがシェアされたときのアイキャッチ画像(サムネイル)を設定しておけるものです。

設定していない場合は、下記のようになります。

OGPイメージ

デフォルトがCocoonの画像になっているので、「ん?Cocoon?」という疑問を相手に与えてしまいます。

できれば、ここを変更してオリジナル画像にしておきましょう。

ただし、「とりあえず今はこれでいい」という方は、この設定はあとからでもOKです。

Cocoon設定⑤:本文

本文

Cocoon設定の「本文」では、記事本文内の設定ができます。

ここで設定するのは、「外部リンクの開き方」「内部リンクの開き方」「レスポンシブテーブル」の3つです。

下記のように設定しておきましょう。

外部リンクの開き方

外部リンクの開き方

「新しいタブで開く」とは、リンクがクリックされた時に、元ページを開いたまま別タブでリンク先ページを開くことができる設定です。

内部リンクの開き方

内部リンクの開き方

レスポンシブテーブル

レスポンシブテーブル

横に長いテーブル(表)を作成したときに、ここをチェックしておくことで横スクロールができるようになります。

Cocoon設定⑥:目次

目次

Cocoon設定の「目次」では、記事の目次設定ができます。

Cocoonでは「見出し」から自動で目次生成されるようになっていて、デフォルトではh2~h6見出しまで目次に表示されます。

h3までで十分なので、「目次表示の深さ」を下記のように設定して、h2~h3までの自動出力に変更しましょう。

目次設定

Cocoon設定⑦:フッター

フッター

Cocoon設定の「フッター」では、フッター(ページ最下部)の設定を行います。

一般的にフッターのクレジット表記は中央表記が多いので、以下のように設定しておきましょう。

クレジット表記

Cocoon初期設定②:吹き出し

「Cocoon設定」で基本的な部分は設定できたら、次は「吹き出し」も設定しておくと便利です。

吹き出しを設定しておくと、登録しておいた吹き出しを簡単に呼び出せるようになります。

吹き出しを使う必要がない、という方は飛ばしてOK。

では、設定方法を解説していきます。

STEP
Cocoon設定の「吹き出し」をクリックする。
吹き出し
STEP
「新規追加」をクリックする。
ふきだし新規
STEP
良く使うであろう吹き出しを登録。
ふきだし設定
STEP
記事作成画面で「吹き出し」から選択できるようになる。
ふきだし選択
ふきだし使用例

こういった流れで設定しておくと、簡単に「吹き出し」が使えるようになって便利です。

Cocoon初期設定③:高速化

Cocoon初期設定の3つ目として、高速化設定も行っておきます。

高速化設定をしておくとページの表示速度が速くなるので、わりと重要です。

ページの表示速度は、検索順位に影響があります。

設定方法は以下の通りでOK。

STEP
Cocoon設定の「高速化」をクリック。
Cocoon高速化
STEP
該当項目(下記参照)にチェックを入れる。
高速化設定
  • 「ブラウザキャッシュの有効化」にチェック
  • 「HTMLを縮小化する」にチェック
  • 「CSSを縮小化する」にチェック
  • 「JavaScriptを縮小化する」にチェック
  • 「Lazy Loadを有効にする」にチェック
  • 「Googleフォントの非同期読み込みを有効にする」にチェック

Cocoon初期設定④:プラグインの導入

Cocoonを導入したら、プラグインも併せて導入しておきましょう。

プラグインとは、Wordpressの機能を拡張できるプログラムのことです。

できれば入れておきたいプラグインは下記です。

  1. Akismet Anti-Spam
  2. Contact Form 7
  3. Wordfence Security
  4. SiteGuard WP Plugin
  5. LiteSpeed Cache(LiteSpeedサーバー用)
  6. WP Fastest Cache(LiteSpeedサーバー以外)
  7. Broken Link Checker
  8. EWWW Image Optimizer
  9. XML Sitemap & Google News

それぞれ、軽く解説します。

①:Akismet Anti-Spam

Akismet Anti-Spamは、スパム対策プラグインです。

大量のスパムをブロックしてくれて、サイトの安全性を高めてくれます。

②:Contact Form 7

Contact Form 7は、お問い合わせページ作成プラグインです。

ブログやサイトの運営においては必須でしょう。

③:Wordfence Security

Wordfence Securityは、Wordpressも推奨するセキュリティプラグインです。

インストールしておくだけで、悪意ある攻撃からサイトを守ってくれます。

④:SiteGuard WP Plugin

SiteGuard WP Pluginは、インストールするだけで、セキュリティを向上させることができるセキュリティプラグインです。

管理ページ、ログインページの保護をしてくれます。

⑤:LiteSpeed Cache(LiteSpeedサーバー用)

LiteSpeed Cacheは、「LiteSpeed」という最新サーバーのみに対応している高速化プラグインです。

ロリポップやミックスホストなどが採用しています。

非常に強力なので、出来れば導入したいところ。

⑥:WP Fastest Cache(LiteSpeedサーバー以外)

WP Fastest Cacheは、「LiteSpeed」ではないサーバーの場合に推奨される高速化プラグインです。

大手でいうとエックスサーバー、コノハウイングなどを使用している方向けになります。

⑦:Broken Link Checker

Broken Link Checkerは、リンク切れを発見して教えてくれるプラグインです。

外部リンクを貼っておいても、いつの間にかリンクが切れていることがあるので、出来れば入れておくと良いかと。

⑧:EWWW Image Optimizer

EWWW Image Optimizerは、画像最適化プラグインです。

画像を圧縮してくれたり、Webp化できたり、サイトの高速化に役立ちます。

⑨:XML Sitemap & Google News

XML Sitemap & Google Newsは、「XML Sitemap」を自動作成してくれるプラグインです。

Googleの検索エンジンに対し、正しくサイトの情報を伝えるために必要となります。

Cocoonのトップページに画像を設定

トップページに画像設定
トップページ画像

ここは好みになりますが、Cocoonで「トップページに画像を設定したい」という方向けの設定方法を解説します。

トップページに画像があると一気にオシャレな雰囲気に。

まずは、トップページに使う画像を用意しておいてください。

おすすめは「Canva」という画像ツールです。これがあれば、画像の用意、画像サイズ変更、文字入れまで何でもできます。

上記のように横幅いっぱいを使う場合、横幅サイズは1,600以上で用意しておくと良いでしょう。(サイズが小さいと画像が荒くなってしまうため)

画像を用意したら、「Cocoon設定」→「アピールエリア」に進んで、画像を設定しましょう。

設定ができたらトップページに画像が表示されていると思いますので、確認してみてください。

もっと簡単にオシャレなサイトにしたい方へ

残念ながら、Cocoonではトップページに画像を設定することは出来ても、自由度が低いというのが実情です。

サイズや見た目などが中々しっくりこない・・・といったことも起きてきます。

このカスタマイズなどに膨大な時間を吸われてしまうことも多々あるでしょう。

そこで、もっとオシャレに、かつ簡単にカスタマイズができるWordpressテーマを紹介しておきます。

それが、当サイトでも使用している「SWELL」というWordpressテーマです。

CocoonとSWELL

SWELLは、上記のようにインストール直後から画像が表示されていて、とてもオシャレです。

また、画像の表示設定も非常に柔軟で、どのサイトもオシャレ。

参考に、SWELLを使ったサイト事例は下記です。

ほんの一部ですが、どれもオシャレですよね・・・。

このようなサイトが、誰でも簡単に手に入るというのがSWELLの素晴らしいところです。

また、非常に高機能で、使いやすさも抜群なので、ブログ超初心者にこそ使ってほしいWordpressテーマといえます。

\ 超おしゃれなテーマSWELL /

※初心者にも上級者にもおすすめ!

まとめ|Cocoon初期設定方法を解説

今回は、Cocoon初期設定を解説しました。

Cocoonは多機能がゆえに設定が難しく、初心者には少々難しいという点が否めません。

しかし、この記事どおりに設定しておけば、とりあえず最低限はクリアしたといえます。

あとの細かい部分は、ブログに慣れてきてからでも十分間に合いますしね。

というわけで、今回は以上となります。

では、また!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

タップできる目次
閉じる