コクーン設定をしてみよう(スキン~投稿)|始め方5

コクーン

始め方4では、コクーンのインストールを行いました。

さっそくコクーン設定で初期設定をしましょう。

コクーン設定を開く

ワードプレスの管理画面から、

外観」>「Cocoon設定」を開きます。

下のような設定画面が開きます。

ここでは、「スキン」~「投稿」タグを取り上げます。

主に赤枠で囲んだタグでの設定をします。

スキン

設定する内容
  • サイトのスキン(肌色)つまりイメージカラーの設定

色々なデザインが用意されています。

全体

設定する内容
  • サイト各部分の色
  • 文字のフォント・大きさ
  • サイドバーの位置と非表示

キーカラー」:

カテゴリータグやサイドバーのウィジェットの色を変えられます。

変えずにそのままでも構いません。記事を書きながら変えてみてもいいと思います。

サイト背景色」と「サイト背景画像」:

下のように背景色を変えたり、背景を画像に変更したりできます。

文字

文字のフォントや大きさ、太さを変えられます。

モバイルでの文字の大きさも変更できます。

そのままでも構いません。好みで変更してください。

サイドバー

サイドバーを左や右にしたり、特定のページで非表示にしたりできます。

ヘッダー

設定する内容
  • キャッチフレーズの表示・非表示

キャッチフレーズは、ページの一番上に表示されています。

これを消してスッキリさせたい場合、下のように「表示しない」にチェックを入れます。

タイトル

設定する内容
  • 検索結果でトップページが表示される時の表示方法

検索結果で、以下のようにトップページが表示されます。

主にこの3つの設定をします。

フロントページ設定」:

  • フロントページタイトル」では、お好みでキャッチフレーズを非表示にしたり、「自由形式」でタイトルをカスタマイズできます。
  • サイトの説明」は検索順位に影響を与えるので、検索キーワードを交えながら興味を引く説明を入れます。
  • メタキーワード」とは、検索エンジンにそのページの内容がどういったものなのかを伝えるキーワードのことです。SEO(上位表示のための施策)的にはあまり重要ではないとされていますが、一応、入れておきましょう。
「セパレーター」についてはこちら

セパレーターとは、下のようにタイトルとキャッチフレーズを区切る文字のことです。

デフォルトでは上のようになっていますが、お好みでハイフンに変えられます。

OGP

設定する内容
  • ブログの情報をSNSでどう表示するかの設定

Twitterカードタイプを「大きな画像のサマリー」にすれば、より目立たせることができます。

アクセス解析・認証

設定する内容
  • アクセス数に自分自身のアクセスをカウントに含めるか
  • Glooleサーチコンソールやアナリティクスとの連携が、プラグインなしでできる

デフォルトでは、自分がページを開いた時もアクセス数にカウントされます。

これを含めない設定にする場合、下のように「アクセス解析設定」でチェックを外します。

サーチコンソールの設定方法については、サーチコンソールの始め方|コクーンで所有権を確認するをご覧ください。

カラム

設定する内容
  • コンテンツやサイドバーの幅、その2つの間の余白幅を変更

初期設定でしっかり調整されているので、こだわりがなければそのままでOKです。

インデックス

設定する内容
  • トップページでの記事リストの表示を変更
  • スマホでのページ説明文の表示・非表示

カードタイプ」:

先頭のサムネイル(視認性を高めるために縮小させた見本)画像を大きくしたり、カード2列・3列にしたりできます。

下のようにチェックを入れます。

カード2列・3列にする手順については、別記事のワードプレス(コクーン)でトップページを3カラム表示に変えるで説明しています。

投稿関連情報の表示」:

スマホに抜粋文を表示させるよう設定できます。

「スマホ端末でスニペットを表示」にチェックを入れます。

以下のような表示に変わります。

トップページの1ページごとに表示する記事数を変更するには?

デフォルトでは、1ページごとに10記事ずつ表示する設定になっています。

この表示する記事数を変更するには、コクーン設定ではなく、

ワードプレスの「設定」>「表示設定」を開きます。

「1ページに表示する最大投稿数」を好きな数に変えます。

投稿

設定する内容
  • カテゴリーとタグの表示・非表示
  • 記事下の関連記事を1列から2列・3列に変更
  • パンくずリストの表示位置

カテゴリー・タグ表示設定」:

デフォルトでは、記事下にカテゴリーとタグが表示されています。

「カテゴリーとは?タグとは?」についてはこちら
  • カテゴリーとは、記事を大きく分類したものです。
  • タグとは、探しやすいように記事に付けた目印(キーワード)です。

例えでざっくり説明したいと思います。

サイトは1つの小さな商店街に似ています。

ある人が、

「今日のお昼ご飯、どうしようか?」

と思いながら、ある商店街にやって来たとします。

そして、食べ物関係の「看板」を見ながら、お店を選びます。

サイトを訪れる人も、記事の「タイトル」という看板を頼りに記事を探します。

では、仮にあなたでしたら、下のどれを選びますか?

どうですか?

ちょっと迷いませんか?

では、これを下のようにカテゴリーで分けるとどうでしょうか?

先ほどより、お店が探しやすくなったと思いませんか?

このように、カテゴリーとは、

ある分野の関連記事をグループにまとめることにより、ブログの構成を直観的に示し、記事を探しやすくするための仕組みです。

でも、

今日は外でパスタにしよう!

と具体的に決まっている場合は、どうでしょうか?

上のカテゴリーでは、ちょっと探しにくそう、って思いませんか⁉

『パスタ』っていうキーワードで探したい

と思いますよね⁉

こういったキーワードで記事を探す人のために、関連記事に下のような「タグ」を付けます。

訪れた人がこのタグをクリックします。

すると・・・?

この「タグ」の付いたすべての記事リストが表示されます

このように、「タグ」とは、見たいキーワードを扱った記事リストをすぐに出してくれる仕組みのことです。

まとめ
  • カテゴリー」があると、訪れた人は自分の関心のある分野の関連記事をすぐに見つけられる
  • タグ」があると、キーワードで見たい記事をピンポイントで見つけられる

ですので、「カテゴリー」と「タグ」の両方をしっかり設定してあげれば、サイトの利便性が高まり、記事もより多く見られるようになります。

記事はカテゴリーごとに整理し、タグを付けるようにしましょう。

タグは複数付けることができます。

上の例のように、サイドバーにタグを表示させると使い勝手がいいです。

ごちゃごちゃしてるので、タグを消したいと思う場合、下のように

「カテゴリーのみ」を選びます。

関連記事設定」:

関連記事の表示を、以下のように変更できます。

以下が設定の方法です。

「表示タイプ」で3列を選びます。

「表示数」は列の倍数を設定します。

パンくずリスト設定」:

パンくずリストとは?

パンくずリストとは、下のようにWebサイトにおける現在ページの位置を階層順に示したものです。

画像に alt 属性が指定されていません。ファイル名: list_2.jpg

パンくずリストという名前は、グリム童話『ヘンゼルとグレーテル』の中で主人公が森で迷子にならないように通り道にパンくずを落としていったことから来ているそうです。

パンくずリストがあると、訪問者はブログの中で’迷子’になることなく、今見ているページの位置を直観的に理解できるようになるため、ブログの利便性が増します。

デフォルトでは、ページの一番下に表示されるようになっています。

これをページ上に変えると使いやすいと思います。

「メインカラム手前」を選ぶと、ページ上に移動します。

コメント