【短時間で終わる!】WordPress無料テーマCocoonで最初にしておくべき設定

cocoon-first-configuration-eye-catch

こんにちは、たむです。

CocoonはWordPressの無料テーマでブログの一番初めに導入するのには選びやすいテーマです。でも、いざ導入してみると機能が多くて、何から手をつけたらいいか分からなくなりますよね。

本記事を参考にすれば、ブログを始めたばかりの方でも、スムーズにCocoonの設定が終わります。

☑Cocoonの機能が多すぎてどこから手をつけていいか分からない

☑SEOを意識した設定を行いたい

☑ブログの信頼性を高めたい

こんな方は、是非、最後まで読んでみてください。

たむ
たむ

本記事は、CocoonをWordPressのテーマとして利用したい方向けの記事です。

最初にやっておくべきCocoon設定

WordPressを開いたらダッシュボードで「Cocoon設定」を選択します。

選択すると以下のような設定項目が表示されると思います。

最初からこれらすべてを設定する必要はないので、必要な設定項目だけピックアップして解説していきます。

たむ
たむ

以下、説明する際に、見出しに[Cocoon設定]→[スキン]のように選択する項目を明確にしますので、これに従って読み進めてください。

①ブログの外観を整える([Cocoon設定]→[スキン]→スキン一覧)

ブログ運営の初期は、記事を書くことが最も重要ですが、最低限の外観は整えておく必要があります。Cocoonを使う場合、外観の基盤となるのがスキンです。スキン設定の表示に切り替えると、スキン一覧が表示されます。

一覧の中から、ブログの外観にしたいスキンを選びます。スキン名左の写真アイコンにカーソルをのせると、サンプルを見ることができます。

スキンの選択に迷う場合は、以下の3つのうちのどれかおすすめします。

①SILK(シルク)

②ミックスブルー

③モダンブラック

スキンによっては、ヘッダー色やフッター色、全体のキーカラーを変更できるものもありますが、最初はすべてを設定するときりがないため、そのままにしておきましょう。

②フォントサイズを設定する([Cocoon設定]→[全体]→サイトフォント(又はモバイルフォント))<

フォントサイズの設定は、ブログを読みやすくするために行います。

ブログ本文のフォントサイズは一般的16px~18pxが多いですが、18pxをオススメします。(下にスライドすればモバイルフォントも設定できるのでこちらは13pxにしましょう)

ブログの見出しは「大きく」、本文は「小さく」して、フォントサイズの「コントラスト」を強調することで、読者のにとって読みやすい記事になります。

<参考>デザインの4つの基本原則のひとつ「コントラスト(対比)」について

デザインには「4つの基本原則」というものがあります。それぞれ「近接」「整列」「反復」「コントラスト(対比)」です。

コントラストとは、対照的な要素を入れるという原則です。コントラストにより、情報を組織化しページの道案内となり焦点を生み出すといった効果があります。

コントラストには、様々な組み合わせがあります。

・小さい字と大きい字

・細い線と太い線

・寒色と暖色

・水平の要素と垂直の要素

・ゆったりした行間と詰まった行間

③フロントページのカードタイプを縦型タイプ2列にする([Cocon設定]→[インデックス]→カードタイプ)

フロントページのブログカードタイプを設定します。

デフォルトは「エントリーカード(横長のブログカード)」になっています。(こちらも写真アイコンにカーソルをのせるとサンプルが見えます)

初心者のうちは、カードタイプは「縦型カード2列」にしましょう。

縦型カード2列にする理由は、他のタイプと比べて、次の2つを最もバランスよく満たしているからです。

・一度に多くの記事が目に入る

 →一目でより多くの情報を伝えることができる(新聞をイメージすると分かりやすい)

・整った配列で構造が分かりやすい

 →ブログが見やすく読者が混乱しない

これらに加えて、アイキャッチ画像が画面いっぱいに広がるため、フロントページがより印象的になるという効果もあります。

④行の高さを「1.8」、行の余白を「3」にする([Cocoon設定]→[本文]→本文余白)

行の高さ、行の余白だと、何を言っているのかいまいち分からないので、次のように考えてください。

行の高さ→一段落の中身の行間スペース

行の余白→段落間のスペース

オススメの設定は行の高さ「1.8」、行の余白「3」です。デフォルトよりも広めの設定です。

余白は読者の心にゆとりを持たせます。余白が少ない文章は、読者の目を酷使させ、無駄な疲労を与えてしまいます。

しかし、あまりに余白をとりすぎてしまうと、スクロール幅が広くなってしまいます。また、行の高さを1.8以上にすると、一段落が長くなり、読者にまとまりのない印象を与えてしまいます。

たむ
たむ

余白とまとまりの絶妙なバランスが大事というわけです。

⑤外部リンクを別タブで開くようにする([Cocoon設定]→[本文]→外部リンク設定→外部リンクの開き方)

ブログ記事には、他のページへのリンク(外部リンク)を貼り付けることがあります。

読者が外部リンクにアクセスする際に同じタブでアクセスさせてしまうと、自分の記事から離脱してしまいます。アクセス先の記事が有益であれば、自分の記事の存在すらも忘れられてしまうこともあります。

SEO対策上、外部リンクを貼らないというわけにもいきません。少しでも読者の離脱を防ぐために外部リンクは別タブで開くようにしておきましょう。

⑥ブログを高速化する([Cocoon設定]→[高速化※サイドバーに表示])

ブログを高速化するための設定です。何も考えずに以下すべてチェックすれば問題ないです。

・ブラウザキャッシュの有効化

・HTMLを縮小化する

・JavaScriptを縮小化する

・Lazy Loadを有効にする

・Googleフォントの非同期読み込みを有効にする

・アイコンフォントの非同期読み込みを有効にする

最後に

本記事では、Cocoon導入時の最初にやるべき設定について解説しました。

コメント

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