ブログ

無料&高性能WordPressテーマ「Cocoon」の設定項目全網羅解説!

無料&高性能WordPressテーマ「Cocoon」の設定項目全網羅解説!

どうもこんにちは。
Web/App/UIデザイナーのサトウです。

今回は、無料&高性能WordPressテーマ「Cocoon」の設定項目全網羅解説!と題して、WordPressテーマ「Cocoon」の設定項目について書いていきます。

目次

高性能であるがゆえに設定も煩雑

WordPressの無料テーマ「Cocoon」は、無料とは思えないほどしっかり作られていて高性能です。
が、高性能であるがゆえに、様々な設定項目がたくさんあり、どんな設定項目があるのか、任意の箇所を変更するにはどの設定を変更すればいいのか、パッと直感的に判断できません。

そこで、管理画面から操作できる「Cocoon設定」の画面に含まれるすべての設定項目を洗い出し、それぞれについて解説していきます。
Cocoonの設定で迷子になってしまっている人の助けになれば幸いです。

SEO、OGPの設定はプラグインとの衝突に要注意

All in one SEO や Yoast といった SEO 系のプラグインを使っている場合、それらのプラグインで出力されるタグと、Cocoon が出力するタグが重複する場合があります。
これは正常な状態ではないので、これらの出力は重複しないよう、いずれかで出力するよう設定したら、他では出力しないよう設定しましょう。

スキン

ブログの外観を変更できます。
Cocoonには大量のスキンがバンドルされていて、選択して保存ボタンを押すだけで一瞬にしてブログの外観を変更することができます。

全体

ブログ全体にかかる設定を変更できます。

キーカラー

サイトキーカラー サイト全体のポイントとなる部分に適用される背景色を指定します。
サイトキーテキストカラー サイト全体のポイントとなる部分に適用されるテキスト色を指定します。

サイトフォント

サイト全体に適用されるフォントの「書体」「文字サイズ」「文字色」を設定できます。
書体は以下の13書体、文字サイズは12px〜22px、文字色はカラーピッカーで自由に設定できます。

  • ヒラギノ角ゴ, メイリオ(デフォルト)
  • メイリオ, ヒラギノ角ゴ
  • 游ゴシック体, ヒラギノ角ゴ
  • MS Pゴシック, ヒラギノ角ゴ
  • Noto Sans JP(WEBフォント)
  • Noto Serif JP(WEBフォント)
  • Mplus 1p(WEBフォント)
  • Rounded Mplus 1c(WEBフォント)
  • 小杉ゴシック(WEBフォント)
  • 小杉丸ゴシック(WEBフォント)
  • さわらびゴシック(WEBフォント)
  • さわらび明朝(WEBフォント)

モバイルサイトフォント

スマホ等のモバイル端末で閲覧した際の文字サイズを設定できます。
この文字サイズは画面の横幅が480px以下の端末で適用されます。

ちなみに iPhone の画面の横幅は、iPhone 12 Pro Max が 428px、iPhone 12/12 Pro が 390px、iPhone 12 mini が360px となっています。
僕はまだ Xs を使ってますが、Xs だと 375px ですね。

Apple や Google のガイドラインでは、モバイル向けサイトのフォントサイズは 16px 以上が推奨されてます。
1画面の情報量を多くしたい場合などは 14px くらいのフォントサイズを採用する場合もありますが、ブログなら 16px でちょうどいいんじゃないでしょうか。
デフォルト設定は 16px です。

文字の太さ

基本の文字の太さ(フォントウェイト)を100〜900の間で100単位で設定できます。
デフォルトは400です。
書体によって持っているウェイトが違うので要注意。
通常本文だと300か400くらいがちょうどいい太さです。

サイトアイコンフォント

サイト全体で使用するアイコンフォントを設定できます。
Font Awesome 4 か Font Awesome 5 を選べます。
5 は 4 よりアイコンの種類が増えてるみたいですね。
でも 4 にあったけど 5 でなくなってしまったアイコンなんかもありそうですね。

サイト背景色

サイト全体の背景色を設定できます。

サイト背景画像

サイト全体の背景画像を設定できます。
より詳細に設定したい場合は、ここで設定せず、「外観→カスタマイズ」の「背景画像」から設定します。
「外観→カスタマイズ」から設定すれば、背景画像を画面に合わせて拡大縮小させたりリピートさせたり、画面のどこを始点にして配置するかなども設定できます。

サイト幅の均一化

画面幅いっぱいに表示されているヘッダーやフッターを、コンテンツの幅と揃えるかどうかを設定できます。
「サイト幅を揃える」にチェックを入れると幅が揃います。
デフォルトではチェックは外れています。

サイトリンク色

リンクテキストの文字色を設定できます。

サイト選択文字色

テキストをドラッグして選択したときの文字色を設定できます。

サイト選択背景色

テキストをドラッグして選択したときの背景色を設定できます。

サイドバーの位置

2カラム表示の際のサイドバーを右に配置するか左に配置するかを設定できます。
サイドバーにコンテンツとして何を配置するかで右に置くか左に置くかを決めるといいですね。
ナビゲーションであれば左、副次的な情報であれば右、といった具合です。
往々にして、一般的なWebサイトでは左カラム、ブログ等の読み物サイトでは右カラムになることが多いと思います。

サイドバーの表示状態

サイドバーをどのページで表示させるかを、下記のいずれかで設定できます。

  • 全てのページで表示
  • 全てのページで非表示
  • フロントページで非表示
  • インデックスページで非表示
  • 固定ページで非表示
  • 投稿ページで非表示
  • 404ページで非表示

ファビコン

ここに項目があるわりに、ここでは設定できません。
「外観 → カスタマイズ → サイト基本情報」にある「サイトアイコン」設定から設定します。

Webブラウザで閲覧する際、タブにサイト名・ページタイトルと共に表示されたり、ブックマークしたりスマホでホーム画面に保存したりした際にサイトのアイコンとして表示されます。

画像のサイズは、幅512px、高さ512pxの正方形が推奨されます。

サムネイル表示

記事一覧画面などでサムネイル表示するかどうかを設定できます。

日付フォーマット

記事の投稿日などを表示する際の書式を設定できます。
デフォルトはY.m.d(2021.06.01)の書式になっています。

「Y年m月d日」と設定すれば「2021年06月01日」という表示になりますし、「Y/n/j」と設定すれば「2021/6/1」という表示になります。

月はゼロ付きが「m」、ゼロなしが「n」、日はゼロ付きが「d」、ゼロなしが「j」です。

ヘッダー

ヘッダー(ブログの一番上についているロゴやメニューなどの部分)の表示について設定できます。

ヘッダーレイアウト

センターロゴ(デフォルト) 左右中央寄せで縦に①サイト説明文、②ロゴ、③メニューが並びます。
センターロゴ(トップメニュー) 左右中央寄せで縦に①メニュー、②サイト説明文、③ロゴが並びます。
センターロゴ(スリムメニュー) 左右中央寄せで縦に①サイト説明文、②ロゴ、③メニューが並びます。メニュー部分の高さがデフォルトより少しだけ細くなります。
センターロゴ(スリムトップメニュー) 左右中央寄せで縦に①メニュー、②サイト説明文、③ロゴが並びます。メニュー部分の高さがセンターロゴ(トップメニュー)より少しだけ細くなります。
トップメニュー 左寄せでロゴ、メニューを配置します。サイト説明文は表示されません。
トップメニュー(右寄せ) 左寄せでロゴ、右寄せでメニューを配置します。サイト説明文は表示されません。一般的なWebサイトではよく使われる配置ですね。
トップメニュー小 左寄せでロゴ、メニューを配置します。ロゴが普通のトップメニューより小さくなります。サイト説明文は表示されません。
トップメニュー小(右寄せ) 左寄せでロゴ、右寄せでメニューを配置します。ロゴが普通のトップメニュー(右寄せ)より小さくなります。サイト説明文は表示されません。

ヘッダーの固定

「ヘッダーを固定する」にチェックを入れると、ページをスクロールしたとき、画面上部にヘッダーが付いてくるようになります。
PCのみ対応、IE非対応です。

高さ

PC閲覧時のヘッダーの高さをpx(ピクセル)で指定します。
デフォルトでは60pxに設定されています。
あまり分厚いとコンテンツエリアを圧迫するので、視認性とのバランスを考えて50px〜70pxくらいに設定するのがいいと思います。

高さ(モバイル)

モバイル(スマホ)閲覧時のヘッダーの高さをpx(ピクセル)で指定します。
デフォルトでは50pxに設定されています。
ちなみにメニューは含まれません。ロゴのみ中央に配置されたヘッダーの高さです。

ヘッダーロゴ

ヘッダーに表示されるロゴ画像を設定できます。
WordPressのメディアライブラリで取り扱えるファイル形式のみ対応です。
特にカスタマイズしていなければsvgは不可ということになります。

ヘッダーロゴサイズ

ヘッダーロゴの幅と高さをpxで指定します。
Retinaディスプレイなどの高解像度ディスプレイに対応させたい場合は、画像の幅、高さとも、表示させたいサイズの倍のpx数で制作し、表示させたいサイズを指定しましょう。

この設定は「ヘッダーレイアウト」の設定が「センターロゴ(デフォルト/トップメニュー/スリムメニュー/スリムトップメニュー)」になっていないと反映されません。

キャッチフレーズの配置

「ヘッダーレイアウト」が「センターロゴ(デフォルト/トップメニュー/スリムメニュー/スリムトップメニュー)の際の、キャッチフレーズ(サイト説明文)の配置を指定します。

表示しない サイト説明文を表示しません。
ヘッダートップ サイト説明文をロゴの上に配置します。
ヘッダーボトム サイト説明文をロゴの下に配置します。

ヘッダー背景画像

ヘッダー部分の背景画像を指定します。
「ヘッダー背景画像の固定」にチェックを入れると、ページをスクロールした際に背景画像だけ位置固定されたままスクロールするパララックス効果が適用されます。

この設定は「ヘッダーレイアウト」の設定が「センターロゴ(デフォルト/トップメニュー/スリムメニュー/スリムトップメニュー)」になっていないと反映されません。

ヘッダー全体色

ヘッダー全体の色を指定します。

ヘッダー全体背景色 ヘッダー部分全体の背景色を指定します。
ヘッダー全体文字色 ヘッダー部分全体の文字色を指定します。

ヘッダー色(ロゴ部)

ヘッダーのロゴ+サイト説明の部分について色を指定します。

ロゴエリア背景色 ロゴ+サイト説明部分の背景色を指定します。
ロゴ文字色 ロゴ+サイト説明部分の文字色を指定します。

グローバルナビメニュー色

グローバルナビ(ヘッダー部分のメニュー)について色を指定します。

グローバルナビ色 グローバルナビの背景色を指定します。
グローバルナビ文字色 グローバルナビの文字色を指定します。

グローバルナビメニュー幅

トップメニュー幅 グローバルナビの1項目あたりの横幅をpxで指定します。
デフォルトでは176pxになっています。
「メニュー幅をテキストに合わせる」にチェックを入れると、幅を固定せず、文字数に合わせて成り行きになります。
サブメニュー幅 グローバルナビの項目に子項目がある際のドロップダウンメニューの幅をpxで指定します。
デフォルトでは240pxになっています。
こちらはメニュー幅をテキストに合わせることはできません。

広告

広告全般(アドセンスやウィジェット等)について設定できます。

広告設定

広告の表示 「全ての広告を表示」のチェックを外すと、サイト内に設置しているすべての広告を非表示にします。
広告ラベル 広告の上部に表示されるテキストを設定します。

アドセンス設定

アドセンス広告の表示 「全てのアドセンス広告を表示」のチェックを外すと、サイト内に設置しているすべてのアドセンス広告を非表示にします。
広告コード Adsense の広告設定からコードをコピーしてここに貼り付けます。
アドセンス表示方法 「自動広告のみ利用」か、自分で任意の場所に広告を表示させる「マニュアル広告設定(自前で位置を設定)」を選択できます。
「自動広告のみ利用」を選択した場合、広告の設置場所は Adsense 側で自動的に選択されるので、Cocoon 側で表示位置などを設定してもすべて無視されます。
広告の表示位置を反映させたい場合は、必ず「マニュアル広告設定」を選択しましょう。
広告の表示位置
  • インデックスページの表示位置
    カテゴリーアーカイブやタグアーカイブ等の一覧系画面の広告について、「表示位置」「広告ユニット」「広告ラベルの表示/非表示」を設定できます。「表示位置」を「ミドル」に設定すると、記事一覧が並んでいる途中に「スポンサーリンク」として広告を挿入してくれます。
  • サイドバーの表示位置
    サイドバーの広告について、「表示位置」「広告ユニット」「広告ラベルの表示/非表示」を設定できます。
  • 投稿・固定ページの表示位置
    シングルページ(投稿、固定ページ)の広告について、「表示位置」「広告ユニット」「広告ラベルの表示/非表示」を設定できます。
[ad]ショートコード 「[ad]ショートコードを有効にする」にチェックを入れると、投稿や固定ページの任意の位置にショートコードで広告を挿入できるようになります。
「広告コード」に Adsense のコードを入力してある必要があります。

バリューコマース

LinkSwitch 「LinkSwitchを有効にする」にチェックを入れると、バリューコマースの LinkSwitch 機能が有効になります。
次の「LinkSwitch ID」の欄に LinkSwitch ID を入力しないと機能しません。
LinkSwitch ID バリューコマースの LinkSwitch を使用する場合は、 LinkSwitch ID を入力します。

LinkSwitchについて詳しくはこちら。

タイトル

titleタグ、descriptionタグ、keywordタグを、

  • トップページ(ホームページ、フロントページ)
  • シングルページ(投稿、固定ページ)
  • アーカイブページ(カテゴリー、タグ等)

でそれぞれ設定できます。

All in one SEO などのプラグインを使用していると、description や keyword が重複して出力されることがあったりするので、必ず出力状況を確認しましょう。

フロントページ設定

トップページ(ホームページ、フロントページ)の title、description、keyword について設定します。

フロントページタイトル トップページ(ホームページ、フロントページ)の title を

  • サイト名
  • サイト名 | キャッチフレーズ
  • 自由形式

から選択します。
「自由形式」を選択する場合は、任意のタイトルを入力欄に入力します。

サイトの説明 トップページ(ホームページ、フロントページ)の description を設定します。
設定しない場合は空欄にします。
All in one SEO 等のプラグインとの重複を避けたい場合は空欄にするか、こちらで設定したらプラグイン側で出力しないように設定しましょう。
メタキーワード トップページ(ホームページ、フロントページ)の keyword を設定します。
こちらも SEO系プラグインとの重複には注意しましょう。
ただ、keyword 自体、今では SEO 的にも UX 的にも特に意味を持たない存在になっています。

投稿・固定ページ設定

トップページ(ホームページ、フロントページ)同様、シングルページ(投稿、固定ページの title、description、keyword について設定します。

カテゴリー・タグページ設定

トップページ(ホームページ、フロントページ)同様、アーカイブページ(カテゴリー、タグ等)の title、description、keyword について設定します。

タイトル共通設定

簡略化したサイト名 サイト名が長すぎる、逆に短すぎるのでキーワードを含めたサイト名にしたい等の場合に、代わって出力したいサイト名を設定します。
ここで設定したサイト名はサイト全体の title タグに使用されます。
セパレーター title にサイト名+説明文を表示する際の区切り記号を設定します。

SEO

headタグ設定

canonical や noindex といった、head タグ内の記述を設定できます。
これらの設定はSEO系プラグインと重複して出力されないよう、どちらかで出力したらもう一方は出力しないよう設定しましょう。

headタグに挿入
  • canonicalタグの追加
    URLにパラメーターがついて存在する場合などに重複コンテンツとして評価されないよう、単一のページであることを伝える canonical タグを出力するかどうか。
  • 分割ページにrel=”next”/”prev”タグの追加
    アーカイブ系の画面や投稿、固定ページを分割している場合などに前後のページの有無を伝えるタグを出力するかどうか。
  • カテゴリページをnoindexとする
    カテゴリーアーカイブページを Google 等の検索エンジンにインデックスさせるかどうか。
    一般的に、カテゴリーアーカイブはインデックスさせるほうがいい場合が多いです。
  • タグページをnoindexとする
    タグアーカイブページを Google 等の検索エンジンにインデックスさせるかどうか。
    一般的に、タグアーカイブはインデックスさせないほうがいい場合が多いです。
    カテゴリーと違い、タグの場合は複数のタグアーカイブに同一の記事が入ってくるケースが多く、重複コンテンツとして評価されるリスクがあるためです。
  • その他のアーカイブページをnoindexとする
    日付アーカイブや投稿者アーカイブ等のアーカイブページを Google 等の検索エンジンにインデックスさせるかどうか。
    こちらも、タグアーカイブと同様の理由で noindex にするケースが多いです。
  • 添付ファイルページをnoindexとする
    WordPressでは、メディアライブラリにアップロードされているメディアがすべて1メディアあたり1ページのシングルページを持っています。
    これらのページをインデックスさせるかどうかを設定します。
    一般的には noindex にします。
    メディアのページはそのメディアがポツンと1枚表示されるだけのページなので、低品質コンテンツと評価されるリスクがあるためです。
構造化データ Google 等の検索結果にパンくずなどのリッチスニペットを表示させる、構造化マークアップをするかどうか。
「JSON-LDを出力」にチェックを入れると、構造化タグが出力されます。

日付の設定

投稿や固定ページについて、投稿日または更新日をどのように表示するかを設定します。

  • 投稿日・更新日を表示
  • 投稿日のみ表示
  • 更新日のみ表示
  • 表示しない

OGP

Twitter や Facebook でシェアする際の見え方を設定できます。
これらの設定も、SEO系プラグインとの重複に注意して設定しましょう。

OGP設定

OGPの有効化 「OGPタグの挿入」にチェックを入れると
セパレーター title にサイト名+説明文を表示する際の区切り記号を設定します。

実際シェアされたときどんな外観になるか、デバッグツールで調べることができます。
意図したものがしっかり反映されているかどうか、確認しましょう。

ホームイメージ

トップページ(ホームページ、フロントページ)をシェアする際に表示される画像を設定できます。
デフォルトではCocoonのイメージ画像になっているので、さっさと何かしらの画像を設定しましょう。
こちらも、設定したらしっかり反映されているかどうか、前述のツールで確認しておきましょう。

SEO系のプラグインを入れている場合、Cocoon側で設定してもプラグイン側の設定が優先されて反映されない場合があるので要注意。

アクセス解析・認証

Googleタグマネージャや Google Analytics、Google Search Console の紐付け設定ができます。
SEO系のプラグインを入れている場合、Cocoon側かプラグイン側のどちらかで設定すればOKです。

アクセス解析設定

「解析全般」の「サイト管理者も含めてアクセス解析する」のチェックは外しておきましょう。
これで、WordPressに管理者としてログインしている状態でサイトを閲覧した際にアクセスとしてカウントされなくなります。
デザインや記事の確認でサイトを表示した際に意図しないPVとしてカウントされるのを防ぐためです。

ただし、WordPressに管理者としてログインしていないと、普通にカウントされてしまうので要注意です。

Googleタグマネージャ設定

「タグマネージャID」と「AMP用 タグマネージャID」を入力します。

Google Analytics 設定

Google Analytics のトラッキングIDと、スクリプトの種類を設定します。

Google Search Console 設定

Google Search Console ID を設定します。

その他のアクセス解析・認証コード設定

上記以外のアクセス解析や何かしらの認証コードをソースに挿入する必要がある場合はこちらに記述します。

  • <head>〜</head>の中に挿入するもの
  • <body>開始タグ直後に挿入するもの
  • </body>終了タグ直前に挿入するもの

の3種類を設定できます。

カラム

コンテンツエリアやサイドバーの幅、余白などを設定できます。

メインカラム設定

メインカラム(メインコンテンツエリア)の

  • 幅(width)(600px〜1600px)
  • 余白(padding)(10px〜80px)
  • 枠線幅(border-width)(0px〜10px)
  • 白線色(border-color)

を設定できます。
単位は指定できず、pxになります。「%」や「VW」等での指定はできません。

サイドバー設定

サイドバー(サイドカラム/サブコンテンツエリア)の

  • 幅(width)(600px〜1600px)
  • 余白(padding)(10px〜80px)
  • 枠線幅(border-width)(0px〜10px)
  • 白線色(border-color)

を設定できます。
単位は指定できず、pxになります。「%」や「VW」等での指定はできません。

カラム間余白設定

メインカラムとサイドカラムの間隔を0px〜60pxの間で設定できます。
単位は指定できず、pxになります。「%」や「VW」等での指定はできません。

インデックス

トップページ(ホームページ、フロントページ)、カテゴリーやタグ等のアーカイブページといった一覧画面での表示について設定できます。

リスト設定

フロントページタイプ(β版) 【表示形式】
フロントページ(トップページ、ホームページ)での記事の表示形式(並び方)を設定できます。

  • 一覧(デフォルト)
    全記事を新着順に並べます。
  • タブ一覧
    新着記事+任意のカテゴリーをタブ切り替えで一覧表示します。
  • カテゴリごと
    新着記事+任意のカテゴリーを縦に順番に並べて表示します。
  • カテゴリごと(2カラム)
    新着記事+任意のカテゴリーを縦に順番に並べて表示しますが、カテゴリーについては2カラムで並びます。
  • カテゴリごと(3カラム)
    新着記事+任意のカテゴリーを縦に順番に並べて表示しますが、カテゴリーについては3カラムで並びます。

【表示カテゴリー】
表示形式で「タブ一覧」か「カテゴリごと」を選択した際に表示させるカテゴリーを選択します。
ただし「タブ一覧」の場合は選択できるカテゴリーは3つまでです。

■カテゴリの表示順を指定する
「カテゴリ表示の順番を並び替える場合はこちら」のリンクをクリックすると、カテゴリーのIDを指定するテキストフィールドが表示されます。
並べたい順番にカンマ区切りでカテゴリーIDを記述すると、その順番で表示させることができます。
ここに1文字でも記入していると、上の「表示カテゴリー」で何を指定しても無視されるので要注意です。

カテゴリーIDは、WP管理画面の 投稿 > カテゴリー からカテゴリー名にマウスオーバーしてリンクURLを確認するか、カテゴリー名をクリックして遷移したページでURLを確認すればわかります。
URLの中に ID=xxx という文字列があります。

■表示する記事数を変更する
「『カテゴリごと』表示でカード表示数を変更する場合はこちら」のリンクをクリックすると、表示させる記事数を変更できるプルダウンが表示されます。
1〜12個の間で自由に設定できます。

並び順

記事の並び順を下記3種類から選択できます。

  • 投稿日(降順)
  • 更新日(降順)
  • ランダム

「降順」は「新しい順」です。

カードタイプ

一覧で並んだ際の記事のデザインを下記7種類から選択できます。

  • エントリーカード(デフォルト)
    記事が縦1列に並びます。
    記事1件あたりは、左にアイキャッチ画像、右にタイトル+抜粋が並ぶ形です。
  • 大きなカード(先頭のみ)
    エントリーカード(デフォルト)の並び方で、先頭の1記事のみ、コンテンツ幅いっぱいにアイキャッチ画像、その下にタイトル+抜粋という形になります。
  • 大きなカード
    コンテンツ幅いっぱいにアイキャッチ画像、その下にタイトル+抜粋という形で、縦一列に記事が並びます。
  • 縦型カード2列
    記事が縦2列に並びます。記事1件あたりは、アイキャッチ画像、タイトル、抜粋が縦に並ぶ形です。
  • 縦型カード3列
    記事が縦3列に並びます。記事1件あたりは、アイキャッチ画像、タイトル、抜粋が縦に並ぶ形です。
  • タイルカード2列
    記事が縦2列に並びます。記事1件あたりは、アイキャッチ画像、タイトル、抜粋が縦に並ぶ形です。アイキャッチ画像の高さがバラバラでも綺麗に並べることができます。
  • タイルカード3列
    記事が縦3列に並びます。記事1件あたりは、アイキャッチ画像、タイトル、抜粋が縦に並ぶ形です。アイキャッチ画像の高さがバラバラでも綺麗に並べることができます。

並び方を2列にするか3列にするかで、記事の表示件数を変更しましょう。
2列の際は2の倍数、3列の際は3の倍数に設定すると、綺麗に並びます。

また、「縦型カード」「タイルカード」に設定した際にはアイキャッチ画像のサムネイルを再生成することが推奨されています。
カードタイプによって使用されるサムネイルサイズが違うため、最適化されたサムネイルを生成するのがベターなようです。

「スマホ端末で縦型&タイル型のエントリーカードを1カラムにする」にチェックを入れると、スマホで見た際に記事が縦1列に並びます。
デフォルトでは2列になっています。
昔の小サイズ&低解像度のスマホでは1列にしないと物理的に無理がありましたが、最近のスマホであれば2列で十分に見やすく表示できます。
お好みで設定していいと思います。

枠線の表示

「カードの枠線を表示する」にチェックを入れると、一覧表示での記事1件ごとに枠線が付きます。
線の太さと色は指定できません。1pxグレーの線です。

自動生成抜粋文字数

自動で生成される抜粋の表示文字数を0〜500文字で設定します。
全角も半角も含めてのカウントです。

抜粋文がこの設定文字数を超える場合は、末尾に「…」等の文字列が付き省略されます。

省略文字列

抜粋文が表示設定文字数を超えて省略される際、抜粋文末尾に付く文字列です。
デフォルトでは「…」になっています。

投稿関連情報の表示

一覧画面で記事の何を表示するかを設定できます。
下記の項目があります。

  • スニペット(抜粋)の表示
  • スマホ端末でスニペットを表示(480px以下)
  • 投稿日の表示
  • 更新日が存在しない場合は投稿日を表示
  • 更新日の表示
  • 投稿者名の表示
  • コメント数の表示

除外カテゴリー

一覧画面で表示させたくないカテゴリーを設定できます。
ただし、「フロントページタイプ」の項目でカテゴリー表示の順番を指定している場合はそちらが優先されます。

投稿

シングルページ(投稿画面)の表示について設定できます。

カテゴリ・タグ表示設定

カテゴリ・タグ表示 閲覧中の記事が属しているカテゴリーと、記事についているタグをどのように表示するかを設定します。

  • カテゴリ・タグ2列
    カテゴリーとタグを2列(2行)で表示します。
  • カテゴリ・タグ1列
    カテゴリーとタグをすべて横1列(1行)に表示します。
  • カテゴリのみ
    カテゴリーだけを表示します。
  • タグのみ
    タグだけを表示します。
  • カテゴリもタグも表示しない
    カテゴリーもタグも表示しません。
カテゴリ・タグ表示位置 ↑のカテゴリ・タグ表示を、ページのどの位置に表示させるかを設定します。

  • タイトル上
    タイトルの上に表示します。
  • 本文上
    本文の上に表示します。
  • 本文下(デフォルト)
    本文の下に表示します。

関連記事設定

デフォルト設定のエントリーカード(デフォルト)は冗長な見た目になるので、それ以外がおすすめ。
縦型4列は表示エリアの幅が広くないと窮屈な見た目になりユーザビリティーも落ちるので要注意です。

表示 「関連記事を表示する」にチェックを入れると、閲覧中の記事と関連のある記事を表示します。
関連性 ↑で「関連記事を表示する」に設定した際、関連記事をどんな条件で選定するかを設定します。

  • カテゴリー
  • タグ

の2種類があります。

関連記事見出し ↑で設定した関連記事を表示する際の見出しを設定します。
「この記事を読んだ人はこんな記事も読んでいます」のような感じです。
空欄にすると見出しは表示されません。

「見出し」と「サブ見出し」を設定できますが、特に効果的な文言がないのならサブ見出しは空欄でいいと思います。
しかも見出しとサブ見出しは1行につながって出力されてしまうので、ちょっと使いづらいですね。

表示タイプ
  • エントリーカード(デフォルト)
    関連記事が縦1列に並びます。
  • ミニカード(推奨表示数:偶数)
    アイキャッチ画像とタイトルだけの小さなカードが縦2列に並びます。
  • 縦型カード3列(推奨表示数:6, 12, 18…)
    アイキャッチ画像+タイトル+抜粋を縦に配置したカードが縦3列に並びます。
  • 縦型カード4列(推奨表示数:4, 8, 12…)
    アイキャッチ画像+タイトル+抜粋を縦に配置したカードが縦4列に並びます。
  • AdSense関連コンテンツユニット
    Google AdSense が出力する関連コンテンツユニットを配置します。中に広告が挿入されます。
表示数 関連記事を何件表示させるかを2件〜30件の間で設定します。
あまり件数が多いとユーザビリティーが下がるので、8件くらいまでにとどめておくのがいいと思います。
取得期間 関連記事の集計期間を直近の1週間〜3年間、または全期間の中から設定します。
ランキングの場合は「旬」があるのである程度短期間に絞るほうがいいですが、関連記事の場合はあまり関係ないでしょう。「全期間」でいいと思います。
枠線の表示 関連記事のカードに枠線を付けるかどうかを設定します。
最大自動生成抜粋文字数 関連記事に本文から自動生成される抜粋文を表示させる場合の文字数を0〜500文字で設定します。
投稿関連情報の表示 一覧画面で記事の何を表示するかを設定できます。
下記の項目があります。

  • スニペット(抜粋)の表示
  • スマホ端末でスニペットを表示(480px以下)
  • 投稿日の表示
  • 更新日が存在しない場合は投稿日を表示
  • 更新日の表示
  • 投稿者名の表示

ページ送りナビ設定

表示 「ページ送りナビを表示する」にチェックを入れると、次の記事/前の記事のリンクを表示します。
表示タイプ ページ送りナビを表示させる場合のデザインを選択します。

  • デフォルト
    次の記事/前の記事のリンクを縦並びで表示します。
  • デフォルト
    次の記事/前の記事のリンクを横並びで表示します。特に理由がなければこちらがいいでしょう。
表示位置 ページ送りナビを表示させる位置を下記の4種類から選択します。

  • 本文下
  • 関連記事上
  • 関連記事下(デフォルト)
  • コメント下

サイトの回遊性を高める意味ではデフォルトの「関連記事下」がいいと思います。
記事を読み終わったあと、次の記事/前の記事のリンクより先に関連記事を見てもらいたいからです。

カテゴリー 「同一カテゴリーのものを表示する」にチェックを入れると、同一カテゴリーの中だけで次の記事/前の記事のリンクを表示します。
コンテンツ次第では有用な設定だと思います。

「除外カテゴリー」で次の記事/前の記事のリンクに表示させないカテゴリーを設定できます。

枠線表示 次の記事/前の記事のリンクに枠線を付けるかどうかを設定します。

コメント設定

表示 「コメントを表示する」にチェックを入れると、コメント欄を表示します。

パンくずリスト設定

パンくずリストの配置 パンくずリストをページのどこに表示させるかを設定します。
基本的には「メインカラムボトム(デフォルト)のままでいいと思いますが、「フッター手前」でもいいと思います。
記事タイトル 「パンくずリストにタイトルを含める」にチェックを入れると、パンくずリストの末尾に閲覧中のページタイトルを挿入します。
これはチェックを入れておくほうがいいと思います。

固定ページ

シングルページ(固定ページ)の表示について設定できます。

本文

記事本文について設定できます。

目次

シングルページ(投稿、固定ページ)に見出しがある場合、それを基準に目次を表示させるかどうかを設定できます。

SNSシェア

シェアボタンの表示について設定できます。

SNSフォロー

自分のSNSアカウントをフォローしてもらいやすくするためのボタンについて設定できます。

画像

ブログ内で表示される画像について設定できます。

ブログカード

ブログ内で投稿または固定ページのリンクを記述した際のブログカード表示について設定できます。

コード

投稿や固定ページに記事としてソースコードを表示させる場合の表示について設定できます。

コメント

コメント機能を有効にする際の表示や入力について設定できます。

通知

ブログの閲覧者に向けて表示させる通知について設定できます。

アピールエリア

ヘッダー下に表示させるアピールエリアについて設定できます。

おすすめカード

ヘッダー下に表示させるおすすめ記事やおすすめカテゴリーについて設定できます。

カルーセル

ヘッダー下に表示させるカルーセル(スライド)について設定できます。

フッター

フッター(ブログの一番下についているロゴやメニュー、コピーライト表記などの部分)の表示について設定できます。

ボタン

トップへ戻るボタンについて設定できます。

モバイル

モバイル端末で閲覧する際の表示について設定できます。

404ページ

存在しないページにアクセスした際の404(Not found)ページについて設定できます。

AMP

AMP(Accelerated Mobile Pages)について設定できます。

PWA

PWA(Progressive Web Apps)について設定できます。

管理者画面

管理者用画面について設定できます。

管理者パネル

PVの表示 「インデックスにPV数を表示」にチェックが入っていると、カテゴリーアーカイブやタグアーカイブといった一覧画面で投稿ごとにPV数が表示されます。非表示にしたい場合はこのチェックを外しましょう。

ウィジェット

使用しないウィジェットを表示しないように設定できます。

ウィジェットエリア

使用しないウィジェットエリアを表示しないように設定できます。

エディター

投稿、固定ページの編集画面について設定できます。

API

利用するアフィリエイトのIDを設定できます。

その他

上記以外のいくつかの項目を設定できます。

リセット

設定画面で設定した内容をすべてリセットできます。

テーマ情報

テーマやプラグイン、WordPressの環境などについての情報を確認できます。