【ブログの質を高める】WordPressテーマCocoon導入時のオススメ設定

cocoon-first-configurationブログ運営

☑Cocoonを導入したけど、機能が多すぎてどこから手をつけていいか分からない

☑ブログの質を高めたい

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

☑信頼性のあるブログにするための設定を行いたい

たむ
たむ

本記事では、CocoonをWordPressのテーマとして利用したい方向けに、導入したら最初にやっておくべき設定について説明します。

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

cocoon-first-cofiguration

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

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

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

tたむ
tたむ

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

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

ブログを始めたばかりは何よりも記事を書くことが優先ですが、最低限の外観は整えておく必要があります。Cocoonを使う場合、外観の基盤となるのがスキンです。スキン設定の表示に切り替えると、スキン一覧が表示されます。

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

スキンはの選択に迷う場合は、以下の2つの基準で選びましょう。ただし、基本的にはどれを選んでも変わらないので、自分の好みで選べば問題ないです。

・自分のブログのコンセプトとマッチした配色のもの

・見やすいもの

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

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

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

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

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

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

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

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

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

・小さい字と大きい字

・細い線と太い線

・寒色と暖色

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

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

ブログにおける良いデザインとは、読者にとって読みやすい文章です。記事の執筆の際には参考にしましょう。

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

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

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

カードタイプは「縦型カード2列」にしましょう。

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

・アイキャッチ画像が大きく、読者の目を引きやすい

 →クリック率の増加

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

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

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

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

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

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

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

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

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

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

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

しかし、あまりに余白をとりすぎてしまうと、スクロール幅が広くなってしまいます。また、行の高さを2.5以上にすると、一段落が長くなり、文章のまとまりが分かりずらくなってしまいます。

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

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

記事の内容を分かりやすくするために、他のページへのリンク(外部リンク)を貼り付けることがあります。

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

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

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

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

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

・HTMLを縮小化する

・JavaScriptを縮小化する

・Lazy Loadを有効にする

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

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

最後に

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

コメント

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