Cocoon 設定

こんにちは。All in One SEO をご利用いただき、ありがとうございます。他の方にも利用していただけるように、WordPress でぜひ5つ星の評価をお願いします !

~ Syed Balkhi
All in One SEOのCEO

了解です。その価値があります
結構です。後で検討するかもしれません
すでにしました

Cocoonの設定全般についてはマニュアルを参照してください。 テーマ利用マニュアル

スキン設定

スキンを変更することで、サイトのデザインを手軽に変更できます。

プレビュー

スキンを選択してください。

スキン一覧に含めて表示するスキンを選択してください。

もしスキンを作成された際には、是非ご連絡ください。サイトで紹介させていただければと思います。

詳しくはこちら オリジナルスキンのCocoonサイト紹介について

全体設定

ページ全体の表示に関する設定です。

プレビュー

カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

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

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

サイト全体適用されるフォントを選択します。


サイト全体のフォントサイズを変更します。

サイト全体の文字色を変更します。

フォントプレビュー

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで初めて人間というものを見た。

現在の太さ：400
「文字の太さ」変更でフォントに合った太さに調整しよう。
太さ見本：100, 200, 300, 400, 500, 600, 700, 800, 900

モバイル端末でのフォントサイズを変更します（横幅が480px以下の端末）。
400 100900

font-weightで、フォントの太さを指定します。フォントの太さは「100（細い）～900（太い）」で指定できます。ただし、細かく太さを設定できないフォントもありますので実際の太さを確認しながら設定してください。

サイト全体で使用するアイコンフォントを選択します。 解説ページ
カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

サイト全体の背景色を選択します。

サイト全体の背景画像を選択します。より詳細に背景画像を設定するには、当設定を無効にして、「外観→カスタマイズ」の「背景画像」設定から行ってください。

サイト全体の幅をコンテンツ幅で統一します。
カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

サイトで利用されるリンク色を選択します。
カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

サイト内のテキストを選択した際の文字色です。
カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

サイト内のテキストを選択した際の背景色です。

サイドバーの表示位置の設定です。

サイドバーを表示するページの設定です。

ファビコン（サイトアイコン）設定は、管理画面から「外観 → カスタマイズ → サイト基本情報」にある「サイトアイコン」設定から行ってください。設定する画像は512×512 pxのPNG画像を推奨します。 解説ページ

サイト内のサムネイル画像の表示を切り替えます。文章メインのサイト用設定です。※ブログカードは何かしら画像が取得できるので表示します。

テーマ全体に使われている日付のフォーマット形式を入力してください（初期値：Y.m.d）。

日付と時刻の書式の解説

広告設定

広告全般に関する設定です。アドセンス設定や、ウィジェットの設定も含みます。

アドセンス設定、ウィジェット設定等、全ての広告の表示を切り替えます。

広告上部ラベルに表示されるテキストの入力です。

アドセンス設定

アドセンス広告に関する設定です。一応通常広告でも利用できるようにはなっています。 解説ページ

「アドセンス設定」で設定した、アドセンス広告全ての表示を切り替えます。

アドセンスのレスポンシブ広告コードを入力してください。サーバーのファイアウォールにより、保存時に403エラーが出る場合はscriptタグを取り除いて入力してみてください。

モバイルでAdSenseの幅を画面いっぱいにします。AdSenseタグの「data-full-width-responsive」を「true」にします。この機能が有効な場合、AdSenseの仕様で"horizontal","vertical"広告をモバイルで表示した際は"rectangle"として表示されます。意図通りのサイズで表示する場合は機能を無効にしてください。

インデックスページの表示位置

  • 詳細設定

  • 詳細設定

  • 詳細設定

サイドバーの表示位置

  • メインカラムトップの広告に注意

    広告にグローバルナビメニューが覆いかぶさっていませんか？
    広告設定の前にAdSenseポリシーをご確認ください。
    AdSense プログラム ポリシー

    詳細設定

  • 詳細設定

投稿・固定ページの表示位置

  • サイドバートップの広告に注意

    広告にグローバルナビメニューが覆いかぶさっていませんか？
    広告設定の前にAdSenseポリシーをご確認ください。
    AdSense プログラム ポリシー

    詳細設定

  • サイドバートップの広告に注意

    広告にグローバルナビメニューが覆いかぶさっていませんか？
    広告設定の前にAdSenseポリシーをご確認ください。
    AdSense プログラム ポリシー

    詳細設定

  • 詳細設定

  • 詳細設定

    個まで
    ※-1で全てのH2見出し手前に広告を挿入
  • 詳細設定

  • 詳細設定

  • 詳細設定

  • 詳細設定

それぞれのページで広告を表示する位置を設定します。

設定によっては、アドセンスポリシー違反になる可能性もあるので設定後は念入りに動作確認をしてください。
詳細設定

本文内に[ad]と入力したり「広告ブロック」を挿入した場合、その部分に「広告コード」に設定してある広告を表示します。 解説ページ

設定によっては、アドセンスポリシー違反になる可能性もあるので設定後は念入りに動作確認をしてください。

バリューコマース

バリューコマース関連の広告設定です。

バリューコマースのLinkSwitch機能を有効にするか。LinkSwitch IDが入力されている必要があります。


バリューコマースの「便利ツール」メニューの「LinkSwitch」からIDを取得してください。

LinkSwitchタグから取得できるIDを入力してください。 解説ページ

広告除外設定

広告を表示したくないページやカテゴリーの設定です。

広告を非表示にする投稿・固定ページのIDを,（カンマ）区切りで指定してください。

広告を非表示にするカテゴリーを選択してください。

フロントページ設定

フロントページの、タイトル、メタディスクリプション、メタキーワードの設定です。

TOPROP|ブログ |
https://toprop.jp/blog

プレビューはあくまで目安です。表示は検索エンジンによって変更される可能性があります。

自由形式タイトル

フロントページで出力するタイトルタグのフォーマットを選択してください。自由に設定する場合は「自由形式タイトル」ボックスに入力してください。

フロントページで出力するメタディスクリプションタグの内容を入力してください。入力しない場合は、メタタグは出力されません。

フロントページで出力するメタキーワードタグの内容を,（カンマ）区切りで入力してください。入力しない場合は、メタタグは出力されません。※SEO的にはほとんど意味のない設定だと思います。

投稿・固定ページ設定

投稿・固定ページの、タイトル、メタディスクリプション、メタキーワードの設定です。

1分でできた！Googleタグマネージャーのアカウント作成方法 | TOPROP|ブログ
https://toprop.jp/blog/?p=94
SEO設定のメタディスクリプション

ランダムで投稿を取得しています。

プレビューはあくまで目安です。表示は検索エンジンによって変更される可能性があります。

投稿・固定ページで出力するタイトルタグのフォーマットを選択してください。

投稿・固定ページのページのheadタグ内に、メタディスクリプションタグを出力するか。

投稿・固定ページのページのheadタグ内に、メタキーワードタグを出力するか。※SEO的にはほとんど意味のない設定だと思います。

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

カテゴリー・タグページの、タイトル、メタディスクリプション、メタキーワードの設定です。

インタラクティブデモ | TOPROP|ブログ
https://toprop.jp/blog/?cat=3
「インタラクティブデモ」の記事一覧です。

カテゴリーページのランダム表示です。

プレビューはあくまで目安です。表示は検索エンジンによって変更される可能性があります。

カテゴリー・タグページで出力するタイトルタグのフォーマットを選択してください。

カテゴリー・タグページのページのheadタグ内に、メタディスクリプションタグを出力するか。

カテゴリー・タグページのページのheadタグ内に、メタキーワードタグを出力するか。※SEO的にはほとんど意味のない設定だと思います。

タイトル共通設定

タイトルで使用される区切り文字の設定です。


サイト名が長すぎるので簡略化したサイト名をタイトルに含めたい場合は入力してください。入力しない場合は、通常のサイト名が表示されます。この短縮サイト名は投稿・固定・カテゴリー・タグページで適用されます

タイトルの区切りとなる文字を設定してください。

headタグ設定

headタグ内に追加するlinkタグの設定です。

WordPressデフォルトでも投稿・固定ページには、canonicalタグは挿入されます。
この機能を有効にするとトップページやカテゴリーページ等にもcanonicalタグが挿入されます。

検索エンジンに続き物ページの順番を知らせます。無効にした場合はWordPressデフォルトのnext/prev設定になります。

カテゴリーページ全体をnoindex設定にします。

カテゴリーページのトップページ以外はnoindex設定にします。

タグのインデックスページをnoindex設定にします。

タグページのトップページ以外はnoindex設定にします。

カテゴリー・タグ以外のアーカイブページをnoindex設定にします。

画像や動画、ファイルなどの添付ページをnoindex設定にします。

構造化データのJSON-LD情報をヘッダーに出力するかどうか。

日付の設定

表示する日付形式を選択してください。表示する日付によって検索エンジンへの伝わり方が変わります。

OGP設定

OGPとは「Open Graph protocol」の略称です。 FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。

headタグ内にFacebookや外部サイトなどに、ページの概要情報伝えるタグを挿入します。

fb:appidは、FacebookにOGPを表示させるためには必須の設定になります。

Twitterカード設定

Twitter上で利用するOGP情報のようなものです。

headタグ内にTwitterに対して、ページの概要情報伝えるタグを挿入します。

Twitterカードの表示形式の設定です。カードタイプ

ホームイメージ

トップページのOGPやTwitter Cardsで表示する画像の設定です。

選択中の画像

アクセス解析設定

アクセス解析全般に適用される設定です。

サイト管理者に対してアクセス解析タグを出力するかどうかの設定です。サイト管理者を解析したくない場合は無効にしてください。

Googleタグマネージャ設定

Google Tag Managerの解析タグの設定です。

GoogleタグマネージャのトラッキングIDを入力してください。Google AnalyticsトラッキングIDが入っていてもこちらが優先して計測されます。 解説ページ

AMP用のGoogleタグマネージャのトラッキングIDを入力してください。新たにAMP用のコンテナを作成しIDを設定してください。 解説ページ

Google Analytics設定

Google Analyticsの解析タグの設定です。GA4解析とユニバーサルアナリティクス解析の共存は可能です。

Google Analytics 4の測定IDを入力してください。タグマネージャのトラッキングIDが入っている場合はタグマネージャが優先されます。GA4はAMP対応していません。よってGoogle非推奨の方法でAMPページの計測を行なっておりますが動作を保証するものではありません。。

ユニバーサルアナリティクスIDを入力してください。タグマネージャのトラッキングIDが入っている場合はタグマネージャが優先されます。SmartNewsフィードのトラッキングIDとしても利用します。ユニバーサルアナリティクスのサポートは、2023年7月1日をもって終了します。 解説ページ

Google Search Console設定

Google Search Consoleのサイト認証タグの設定です。

Google Search Consoleのサイト認証IDを入力してください。 解説ページ

Clarity設定

ヒートマップ分析ツールClarityの設定です。

ClarityのプロジェクトIDを入力してください。 解説ページ

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

ヘッダーやフッターに、その他サービスのアクセス解析・サイト認証タグをそのまま貼り付けます。

ヘッドタグ（<head></head>）内に挿入する必要のある、その他アクセス解析・認証タグを入力してください。アドセンス認証コードもこちらに貼り付けて、審査を受けるのが最も楽かと思います。

ヘッダー（<body>直後）に挿入する必要のある、その他アクセス解析・認証タグを入力してください。

フッター（</body>直前）に挿入する必要のある、その他アクセス解析・認証タグを入力してください。

メインカラム設定

メインカラムの幅、余白幅、枠線の設定です。 解説ページ

プレビュー

メインカラムのコンテンツ部分の幅を設定します。（最小：600px、最大：1600px）
※カラム幅を変更した場合はサムネイルを再生成することで最適化されます。 解説ページ

メインカラムコンテンツ両サイドの余白幅を設定します。（最小：10px、最大：80px）

メインカラムのボーダー幅を設定します。（最小：0px、最大：10px）

メインカラムのボーダー色を設定します。未入力でデフォルトの透過色になります。

カラム間余白設定

メインカラムとサイドバーの間隔設定です。 解説ページ

メインカラムとサイドバーの間の幅を設定します。（最小：0px、最大：60px）

リスト設定

リスト表示の設定です。

フロントページの表示形式を選択します。

通常の記事インデックスの他に、カテゴリーの記事をタブ化して表示します。「タブ一覧」の際は、3つまで有効。4つ目以降は無視されます。

カテゴリー表示の順番を並び替える場合はこちら

意図通りの順番でカテゴリーを表示する場合は、カテゴリーIDをカンマ区切りで入力してください。こちらの入力がある場合は、チェックボックスのものよりこちらの設定が優先されます。

[未入力]

「カテゴリーごと」表示でカード表示数を変更する場合はこちら


フロントページタイプを「カテゴリーごと」にした際に表示される新着エントリーカード数を設定します。


フロントページのインデックスでカテゴリーごとに表示するエントリーカード数を設定します。

一覧リストを表示する順番を設定します。

一覧リストのカード表示を変更します。カード表示数を変更するには、「設定 → 表示設定 → 1ページに表示する最大投稿数」から変更してください。 解説ページ

縦型カード・タイルカードに設定した場合はサムネイルの再生成を行ってください。 解説ページ

スマホ（480px以下）で表示した際に、カードタイプを「縦型カード」「タイルカード」にしている場合は、1カラムで表示します。※デフォルトは2カラム

投稿エントリーカードの枠となる罫線を表示するか。

「エントリーカード」で、「本文から自動生成される抜粋文」を表示する場合の最大文字数を 設定します。※投稿編集画面の抜粋文ではありません。（最小：0、最大：500）

「自動生成抜粋文字数」を自動抜粋文が超えたときに表示する省略を表す文字を入力してください。


エントリーカードに投稿関連情報を表示するかどうか。

アーカイブ（インデックスリスト・新着関連記事ウィジェット等）に表示させたくないカテゴリーを選択してください。 解説ページ

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

投稿本文下のカテゴリーとタグの表示を設定します。

デモはランダムです。

カテゴリーとタグの表示を制御します。

カテゴリーとタグの表示位置を設定します。

関連記事設定

関連記事の表示に関する設定です。

デモの関連記事はランダムです。

投稿ページの関連記事を表示するか。

関連記事にカテゴリーを関連づけるかタグを関連づけるか。タグに関連付けて、タグがない場合はカテゴリー関連記事が表示されます。逆もしかり。

関連記事の見出しを入力してください。

関連記事の補助となる見出しを入力してください。

関連記事の表示タイプを選択します。

関連記事で表示する投稿数の設定です。（最小：2、最大：30）

関連記事を取得する期間を選択することで新鮮な記事を表示しやすくします。ニュースサイト等で、新しい記事が並んで欲しい時に設定します。頻回にサイトを更新していない場合は利用しないことをおすすめします。

投稿エントリーカードの枠となる罫線を表示するか。

「関連記事エントリーカード」で、「本文から自動生成される抜粋文」を表示する場合の最大文字数を 設定します。※投稿編集画面の抜粋文ではありません。（最小：0、最大：500）

エントリーカードに投稿関連情報を表示するかどうか。

ページ送りナビ設定

[前ページ][次ページ]へと送るナビゲーションの設定です。

デモはランダム表示です。

[前ページ][次ページ]ナビを表示するか。

ページ送りナビの見た目を変更します。

ページ送りナビを表示する位置を変更します。 解説ページ

投稿と同一カテゴリーのページ送りナビを表示するかどうか。複数カテゴリーが設定してある場合は、複数に属するものが表示されます。 解説ページ

ページ送りナビに表示させないカテゴリーを選択してください。 解説ページ

ページ送りナビを囲む枠線を表示するか。

コメント設定

投稿のコメント表示設定です。

投稿ページにコメントを表示するか。

パンくずリスト設定

投稿のパンくずリスト設定です。

投稿のパンくずリスト表示位置を設定します。

投稿ページのパンくずリストに対して、表示されているページのタイトルを含めるか切り替えます。

コメント設定

固定ページのコメント表示設定です。

固定ページにコメントを表示するか。

パンくずリスト設定

固定ページのパンくずリスト設定です。

固定ページのパンくずリスト表示位置を設定します。

固定ページのパンくずリストに対して、表示されているページのタイトルを含めるか切り替えます。

本文行間設定

本文の行の高さや余白の設定です。 解説ページ

1.8 14

line-hightで、行の高さを指定します。1にすると文字列と同等の高さになります。



1.8 0.14

行間の余白の高さを設定します。1emは、フォントサイズ（font-size）と同等の高さになります。フォントサイズが18pxの場合は余白も18pxになります。

フォントプレビュー

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで初めて人間というものを見た。

現在の太さ：400
「文字の太さ」変更でフォントに合った太さに調整しよう。
太さ見本：100, 200, 300, 400, 500, 600, 700, 800, 900

テーブル設定

テーブル動作の設定です。

端末幅より広いテーブルが表示されるときは、テーブルを横スクロールして崩れないようにします。

横スクロールテーブルで1列目となるth、tdを固定します。テーブルの1列目のセルを結合している場合は正常に動作しない場合があります。あらかじめご了承ください。 解説ページ

投稿情報表示設定

投稿・固定ページの関連情報の表示に関する設定です。



投稿・固定ページの関連情報を表示するかどうか。投稿日・更新日が同じ日付の場合は投稿日のみが表示されます。

本文を読むのに必要な所要時間を表示します。時間はあくまで目安です。 解説ページ

目次設定

プラグインのTable of contentsに似た目次設定です。

たまに忘れちゃう。GA4内で自分の測定IDが書いてある場所ってドコ？

GoogleタグマネージャーにGoogleアナリティクス（以降 GA4）を設定する際に、当たり前なのですが測定IDの入力を求められました。
おそらく、今後サイトを運用していく中で、GA4の測定IDは幾度となく求められていくものです。

しかし、毎日意識するIDではないですし、覚えにくい英数字の羅列なので、毎回入力を求められたときにGA4を探しにいき、物覚えが悪い私は、毎回測定IDのありかを探して彷徨ってしまいます。

今回は、そんな彷徨える測定IRリサーチャーの方に、1分ほどのインタラクティブデモで解説いたします。

【体験】GA4内で自分の測定IDが書いてある場所ってドコ
※下記にインタラクティブデモを埋め込んでますが、
画面が小さいと操作感が欠けるため、上記リンクより別タブでご利用頂くことをお勧めします。

デモの記事はランダムです。H2見出しがない本文には目次は表示されません。

投稿・固定ページの内容から目次を自動付加します。※[toc]ショートコードで目次を表示させている場合は一貫して表示されます。




上記のページの目次表示を切り替えることができます。※[toc]ショートコードで目次を表示させている場合は一貫して表示されます。

目次の上にラベル表示されるタイトルを入力してください。

目次内容の表示を切り替えるスイッチング機能を有効にするか。

開：
閉：

目次を「開く」「閉じる」のキャプションを変更します。

ページ読み込み時に内容を表示した状態にするか。
つ以上見出しがあるとき

設定した数以上の見出し数がある時のみ表示されます。

どの見出しの深さまで表示するかを設定します。こちらで表示設定がされていないと、ショートコードで深さを指定していたとしても表示されません。

設定項目手前の数字の表示形式を設定します。

目次の表示位置です。無効にすると左側に表示されます。

広告やウィジェットの手前に目次を表示します。※最初のH2見出し手前に表示されているとき

h2-h6見出し内のHTMLタグをそのまま出力します。

トップシェアボタン

トップシェアボタンの表示に関する設定です。

トップシェアボタンの表示を切り替えます。

個々のシェアボタンの表示切り替え。

表示するシェアボタンを選択してください。

シェアボタンを表示するページの切り替え。

    • シェアボタンを表示するページを選択してください。 解説ページ

トップシェアボタンの配色を選択してください。

トップシェアボタンのカラム数を選択してください。

トップシェアボタンのロゴとキャプションの配置を選択してください。

トップシェアボタンのシェア数表示を切り替えます。

ボトムシェアボタン

ボトムシェアボタンの表示に関する設定です。

ボトムシェアボタンの表示を切り替えます。

訪問者にシェアを促すメッセージを入力してください。

個々のシェアボタンの表示切り替え。

シェアボタンを選択してください。

シェアボタンを表示するページの切り替え。

    • シェアボタンを表示するページを選択してください。 解説ページ

ボトムシェアボタンの配色を選択してください。

ボトムシェアボタンのカラム数を選択してください。

ボトムシェアボタンのロゴとキャプションの配置を選択してください。

ボトムシェアボタンのシェア数表示を切り替えます。

ツイート設定

Twitter上でのツイート動作の設定です。

シェアされたツイートに著者のTwitter IDを含める。

ツイート後に著者のフォローボタンを表示します。

ツイート時に含めるハッシュタグを入力してください。半角スペースで区切って複数入力も可能です。URLやタイトルを含めて140文字を超える場合は正常動作しない可能性もあります。

Facebook設定

Facebookのシェア数に関する設定です。

Facebookのシェア数を取得するのに必要なアクセストークンを入力します。当テーマではリアクションカウントをシェア数として採用しています。 解説ページ

Pinterest設定

Pinterestの「保存」ボタンに関する設定です。

この機能を有効にすると、投稿・固定ページ内の画像にマウスホバーすると「ピン」ボタンが表示されます。

キャッシュ設定

シェア数取得時のキャッシュ利用設定です。キャッシュを利用するとページ表示スピードを多少なりともあげることができます。

SNSシェア数をキャッシュ化することでページ表示スピードの短縮化を図ります。

キャッシュの取得間隔を設定します。間隔が狭いほど更新は増えますがサーバー負担は増えます（主に相手サーバー）。

httpsサイトであれば、httpサイトの頃のシェア数を取得するかどうか（httpの場合はhttps）。SNSサーバーへ倍の負荷をかけるのと取得に時間がかかるので、キャッシュが有効でないと利用できない仕様です。 解説ページ

フォローボタン

フォローボタンの表示に関する設定です。

投稿・固定ページの本文下にあるフォローボタンの表示を切り替えます。

訪問者にフォローを促すメッセージを入力してください。#{author}には、投稿者のそれぞれの表示名が入ります。

Cocoonは、ログインユーザーごとにフォローページを設定できます。

以下のアカウントURLを設定する場合は、プロフィールページから設定してください。(あなたのプロフィール)

  • ウェブサイト
  • Twitter
  • Facebook
  • はてなブックマーク
  • Instagram
  • Pinterest
  • YouTube
  • LinkedIn
  • note
  • Flickr
  • Amazon欲しい物リスト
  • Twitch
  • 楽天ROOM
  • Slack
  • GitHub
  • CodePen

あなたのプロフィールから設定

現ログインユーザーのSNSフォローページを設定します。

フォローボタンを表示するページの切り替え。

フォローボタンを表示するページを選択してください。 解説ページ

feedlyフォローボタンを表示します。

RSS購読用のボタンを表示します。

シェアボタンの配色を選択してください。

投稿・固定ページ以外でフォローボタンを表示するユーザーを選択してください。

本文下やウィジェットなどのフォロー数表示を切り替えます。

feedlyは購読者情報がエラーで取得できない場合があります。その際には、こちらで設定された購読者数が表示されます。

キャッシュ設定

フォロー数取得時のキャッシュ利用設定です。キャッシュを利用するとページ表示スピードを多少なりともあげることができます。

SNSシェア数をキャッシュ化することでページ表示スピードの短縮化を図ります。

キャッシュの取得間隔を設定します。間隔が狭いほど更新は増えますがサーバー負担は増えます（主に相手サーバー）。

httpsサイトであれば、httpサイトの頃のシェア数を取得するかどうか（httpの場合はhttps）。相手サーバーへ倍の負荷をかけるのと取得に時間がかかるので、キャッシュが有効でないと利用できない仕様です。 解説ページ

本文画像設定

投稿・固定ページの本文部分に関する画像の設定です。

デモ画像   デモ画像

投稿・固定ページトップにアイキャッチを表示します。

投稿・固定ページのアイキャッチに表示されるカテゴリーラベルの表示切り替えです。

投稿・固定ページに表示されるアイキャッチをカラムの中央に表示します。

アイキャッチ画像に小さな画像を使っていても、強制的にカラム幅に拡大して表示します。

アイキャッチ画像にキャプションが設定してある場合、表示するかどうか。

記事を保存したり公開したりするときに、本文中に最初に出てくる画像をアイキャッチにします。※プレビューには反映されません。

画像の枠線の設定です。有効にすると白系の画像でも画像と認識しやすくなります。

リンク画像をクリックしたときの拡大効果の設定です。 解説ページ

全体画像設定

全てのページで共通して利用する画像の設定です。

インデックス等で使われるサムネイル画像の縦横比率を変更します。※「インデックスカードタイプ」の「大きなカード」と「タイルカード」には適用されません。 解説ページ

サムネイルをRetinaディスプレイ対応端末で見ても綺麗に表示されるようにします。※「インデックスカードタイプ」の「大きなカード」には適用されません。 解説ページ

これらの設定で変更されるサムネイル部分はこちら。

  1. インデックス、アーカイブ、検索結果ページのエントリーカードのサムネイル。

         インデックスカード

  2. 新着記事ウィジェットのサムネイル。

         新着記事

  3. 人気記事ウィジェットのサムネイル。

         人気記事

  4. 関連記事のエントリーカードのサムネイル。

         関連記事

  5. カルーセルカードのサムネイル。

         カルーセル

  6. ページ送りナビのサムネイル。※デフォルトのみ）

         ページ送りナビ

  7. 内部ブログカード、外部ブログカードのサムネイル。

         ブログカード

NO IMAGE設定

アイキャッチの存在しない投稿のサムネイル画像設定です。

アイキャッチが存在しない投稿・固定ページのサムネイルに利用される画像ファイルを指定してください。 解説ページ

内部ブログカード設定

URLやURLリンクをブログカード形式で表示するための設定です。内部ブログカードは、投稿・固定ページを表示するためのものです。 解説ページ

米Accord社の既存顧客向け事例Tips紹介サイト「PlayBookギャラリー」とは
ワークスペースソリューションを提供するAccord社は、インタラクティブデモソリューションを活用してPlayBookギャラリーを用意したことで、エンドユーザーに気軽にアクセスしてもらうことができるようになりました。
toprop.jp
2023.05.04

ランダムで投稿を取得しています。

本文中のURLやURLリンクをブログカード表示します。

コメント内に書き込まれた独立したURLをブログカード化します。 解説ページ

サムネイルの表示位置を選択してください。

ブログカードに表示する日付を設定します。更新日設定時、更新日がない場合は投稿日が表示されます。

ブログカードクリック時に新規タブを開きます。「内部リンク」が設定されている場合は、そちらが優先されます。

外部ブログカード設定

外部のURLやURLリンクをブログカード形式で表示するための設定です。 解説ページ

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。
wp-simplicity.com

外部リンクのブログカードです。

本文中にある外部サイトのURLやURLリンクをブログカード表示します。

コメント内に書き込まれた独立したURLをブログカード化します。コメント内の外部リンクブログカードの場合rel="nofollow"が入ります。 解説ページ

サムネイルの表示位置を選択してください。

ブログカードクリック時に新規タブを開きます。「外部リンク」が設定されている場合は、そちらが優先されます。

ブログカードキャッシュのリフレッシュ間隔を設定します。1～3650日の間隔を選べます。

キャッシュ更新モードを有効にした状態でページを開くと、ページ上の外部ブログカードキャッシュを新たに取得します。

ブログカード関連ヘルプ

ブログカードに関する記事です。

ソースコード設定

ソースコードのハイライト表示の設定です。ハイライト表示には、highlight.jsを利用しています。 解説ページ 

/* コメント */
  #container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
  }

本文中に表示されているpreタグ中のソースコードをハイライト表示します。


ソースコード左側に行番号を表示します。 解説ページ

ソースコードの対応言語を増やすには「全て」を選択してください。 解説ページ

ソースコードのハイライトテーマです。スタイルについては、highlight.js demoを参照してください。

ソースコードをハイライトするCSSセレクターを細かく設定できます。よくわからない場合は変更しないでください。

コメント設定

コメント一覧や入力欄のみタグに関する設定です。

コメントの表示形式を変更します。

コメント一覧の見出しを入力してください。

コメント一覧の補助となる見出しを入力してください。

ボタン切り換え動作。

コメント入力欄の表示状態を設定します。 解説ページ

コメント入力欄の見出しを入力してください。

コメント入力フォームの上に表示する案内メッセージを入力してください。 解説ページ

ウェブサイト入力欄を表示するか。

コメントの送信ボタンのラベルテキストを入力してください。

通知設定

サイト上部ベルト状に表示される通知メッセージの設定です。 解説ページ

プレビュー

通知メッセージを入力して「通知表示」を有効にすればヘッダー下に通知メッセージが表示されます。

通知エリアに表示するメッセージを入力してください。

通知エリアにリンクを設定する場合はURLを入力してください。

通知エリアのリンクをtarget="_blank"で開くかどうか。

通知の種類を選択してください。背景色も変わり、重要度が変わります。
カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

メッセージに対して独自の背景色を設定したい場合は色を選択してください。デフォルト色を変更したい場合は、こちらの色が優先されます。

メッセージに対して独自のテキスト色を設定したい場合は色を選択してください。デフォルト色を変更したい場合は、こちらの色が優先されます。

アピールエリア設定

ヘッダー下でアピールしたい内容を入力します。

プレビュー

デモの表示は実際の表示と多少変わる可能性があります。

アピールエリアを表示するページを設定します。

アピールエリアの高さをpx数で指定します。モバイル環境では高さは無効になります。（最小：200px、最大：800px）

アピールエリアの背景に表示する画像を設定します。 解説ページ

アピールエリアに設定した背景画像を固定します。上下にスクロールしたときに背景画像が移動しなくなります。※iOSでは動作しません。 解説ページ
カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

アピールエリアの背景色を設定してください。背景画像を設定すると隠れるエリアとなります。ただ、画像読み込み中に表示される部分でもあります。

この設定を無効にすると「タイトル」や「メッセージ」、「ボタン」は表示されず背景画像のみが表示されます。 解説ページ

アピールエリアのタイトルを入力してください。入力しない場合は表示されません。

アピールエリアに表示するメッセージを入力してください。HTMLの入力も可能です。

ボタンに表示する文字を入力してください。

ボタンのリンク先となるURLを入力してください。

アピールエリアボタンのリンクの開き方を設定します。
カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

ボタン全体の色を選択してください。文字は白色となるので濃いめの色を設定することをおすすめします。

トップへ戻るボタン設定

ページトップにスクロール移動するボタンの設定です。

デモは動作しません。

トップへスクロール移動するボタンを表示するかどうか。

トップへ戻るボタンを示すアイコンフォントを選択します。
カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

ボタンの背景色を設定します。

ボタンの文字色を設定します。

トップへ戻るボタンのアイコンフォント代わりに表示する画像を選択します。こちらに画像を設定するとアイコンフォントボタンは表示されません。

モバイル設定

モバイル環境で表示するレイアウトの設定です。

モバイルメニュー等を表示するための設定を行います。1024px未満で表示されます。※「トップボタン」はAMPページでは表示されません。

「モバイルメニュー」で「モバイルボタン」が選択されているときボタンを固定表示するか。無効の場合はスクロールするとモバイルボタンが隠れます。

モバイルでヘッダーロゴを表示するか。

「モバイルメニュー」で「モバイルボタン」が選択されているときメインカラム下に表示されるサイドバーを表示するかどうか。

プレビュー

404ページ設定

ページが見つからなかった場合の404ページの表示設定です。

プレビュー

選択中の画像

404ページで表示する画像を選択してください。

404ページに表示するタイトルを入力します。

404ページに表示するメッセージを入力します。タグ入力可能です。入力されたテキストには自動的に段落が付加されます。

AMP設定

AMP（Accelerated Mobile Pages）に関する設定です。投稿・固定ページをモバイル上で高速表示させるための仕組みです。 解説ページ

有効化することで、AMP機能が有効化され高速表示されます。※AMP対応するページは投稿・固定ページのみです。
選択中の画像

Google検索結果に表示されるAMP用のロゴ画像を設定します。ロゴのサイズは幅600px、高さ60px以下にしてください。構造化データのArticle > publisher > logoでも利用されます。

リンク画像をクリックしたときの拡大効果の設定です。

本文中のインラインスタイルを有効にします（無効推奨）。有効にすると、本文内でもインラインのstyle属性でスタイリングできます。ただし、AMPエラーの原因になったり、AMPのサイズ制限（75000バイト）を超えやすくなるため有効は推奨はしません。

凝ったスタイルのスキンを利用していると、AMPのCSSサイズ上限（75000バイト）を超えてしまう可能性があります。スキンを適用したことにより、AMPエラーが続出した場合は、AMPページでスキンを適用しないことにより、CSSのサイズを減らします。 解説ページ

子テーマのstyle.cssで凝ったカスタマイズをしていると、AMPのCSSサイズ上限（75000バイト）を超えてしまう可能性があります。子テーマのCSSカスタマイズにより、AMPエラーが続出した場合は、AMPページで「子テーマCSS」を適用しないことにより、CSSのサイズを減らします。 解説ページ

AMPページを生成しないカテゴリーを選択してください。

PWA設定（β版）

PWA（Progressive Web Apps）とは、モバイル向けWebサイトをスマートフォン向けアプリのように使える仕組みです。現在β版機能となっています。不具合が起きても対処できる方の利用をおすすめします。 解説ページ

有効化することで、PWA機能が有効化されスマートフォンからサイトがアプリのように利用できます。

ユーザーがログイン時のPWA動作を制御します。

WEBアプリ名として表示される名前を入力してください。


アプリの短縮名を入力してください。ホーム画面に表示される短い名前で利用されます。※最大12文字

13文字以降は自動的に削除されます。

アプリの説明文を入力してください。最大132文字まで。

現在適切なアイコンが設定されています。

PWA用のアイコンは512×512pxのPNG画像が必要です。サイトアイコンから設定できます。 解説ページ
カラーサンプルサイト

良い色を選択するにはカラーサンプルサイトの利用をおすすめします。サイトから好みの色を見つけ出し、カラーコードをカラーピッカーにコピペすると設定できます。
配色の見本帳
日本の伝統色
NIPPON COLORS
Color Hunt

アプリのテーマカラーです。OSによってどこに適用されるかは異なります。

アプリの背景色です。サイトが表示されるまでの間、この色が適用される場合があります。

インターフェースの表示モードの設定です。

画面の縦方向、横方向の向きを設定します。

管理画面設定

管理画面の機能設定です。

管理画面に素早く移動するためのメニューリンクです。

管理者バーに手軽に設定画面にアクセスできるメニューを表示します。

投稿一覧設定

管理画面の投稿一覧ページの設定です。 解説ページ

投稿・固定ページ記事一覧テーブルのカラム操作。








投稿一覧テーブルのカラム表示を切り替えます。

管理者パネル

管理者向けのPV表示や編集リンクの表示です。

管理者用のPV表示エリア、各種チェックツール表示用のパネルです。

管理者パネルの表示形式を選択します。

管理者パネル内のPVエリアを表示します。

インデックスページのエントリーカードごとにPV数を表示します。集計方法がJetpackの場合は、初回アクセス時に情報取得に時間がかかります。 解説ページ

アクセス集計方法

管理者パネルで表示するPVの取得方法を選択します。

管理者パネル内の編集エリアを表示します。

Wordpressのダッシュボードに移動するためのリンクです。

WordPress管理画面で投稿内容を編集するためのリンクです。

Windows Live Writerで投稿内容を編集するためのリンクです。

AMP動作確認・テストリンクなどを表示します。

AMP テスト - Google Search Consoleでチェックするためのリンクの表示。

The AMP Validatorでチェックするためのリンクの表示。

ページを診断するためのチェックツールを表示するエリアを表示します。PageSpeed Insights、構造化データチェック、HTML5チェック、アウトラインチェック、Twitterの反応など。

PageSpeed Insightsリンクの表示。

GTmetrixリンクの表示。

モバイルフレンドリーテストリンクの表示。

構造化データ テストツールリンクの表示。

Nu Html Checkerリンクの表示。

HTML 5 Outlinerリンクの表示。

SEOチェキ! 無料で使えるSEOツールリンクの表示。

投稿・固定ページに対するツイートチェックリンクの表示。

レスポンシブ表示状態を効率的にチェックできるツールエリアの表示を切り替えます。

Responsinatorチェック用リンクの表示。

Sizzyチェック用リンクの表示。

WhatIsMyScreenResolutionチェック用リンクの表示。

ウィジェット表示

使用しないウィジェットを表示しないようにする設定です。 解説ページ

ウィジェットエリア表示

使用しないウィジェットエリアを表示しないようにする設定です。 解説ページ

エディター共通設定

投稿・固定ページ管理画面の設定です。

無効化することで旧ビジュアルエディター形式で投稿画面が表示されます。

無効にするとWordPressデフォルトのエディターになります。

エディターの背景色を指定します。

エディターのテキスト色を指定します。

エディターでチェックリストを選択する形でタグを選択する様に変更します。

ブロックエディター設定

ブロックエディターのみに適用される設定です。

Cocoonの「ルビ」ボタン表示を切り替えます。プラグインのルビ機能を利用していてエラーが出る場合は無効にしてください。

Cocoonの「書式のクリア」表示を切り替えます。プラグインのルビ機能を利用していてエラーが出る場合は無効にしてください。

ツールバーの文字スタイルドロップダウンを表示するか。

ツールバーのマーカースタイルドロップダウンを表示するか。

ツールバーのバッジスタイルドロップダウンを表示するか。

ツールバーの文字サイズスタイルドロップダウンを表示するか。

ツールバーの汎用ショートコードドロップダウンを表示するか。

ツールバーのテンプレートショートコードドロップダウンを表示するか。

ツールバーのアフィリエイトショートコードドロップダウンを表示するか。

ツールバーのランキングショートコードドロップダウンを表示するか。

ブロックエディターのスタイルオプションを表示するか。

任意のカラーパレット色を設定できます。 解説ページ

旧エディター設定

ビジュアルエディター用の設定です。

タイトルや、SEOタイトル、メタディスクリプションの文字数を表示します。※ブロックエディターではタイトル文字数は表示されません。

記事を投稿する前に確認ダイアログを表示します。※旧エディター用の設定

API設定

各種APIやアフィリエイトIDの設定です。 解説ページ

Amazon必須 もしも必須

Amazon APIを使用するためのアクセスキーIDを入力してください。 取得方法

Amazon必須 もしも必須

Amazon APIを使用するためのシークレットキーを入力してください。 取得方法

Amazon必須 もしも必須

AmazonアソシエイトのトラッキングIDを入力してください。 取得方法

サムネイルとは別に商品に関連付けられている「カタログ写真（サンプル画像）」をボタン形式で全て表示します。ボタン状にマウスを乗せると大きな写真で表示されます。 解説ページ

データー取得時点のAmazon販売ページでの値段を表示します。ショートコードでpriceオプションが設定されている場合は、そちらが優先されます。 解説ページ

Amazon側に登録されている説明文を表示します（情報がない場合は表示されません）。descオプションが設定されている場合は、オプション値が優先して表示されます。


レビューページへのリンクを表示します。 解説ページ

Amazon商品リンクのロゴの表示切り替え。

Amazonのキーワード検索ボタンを表示するか。

Amazonの検索ボタンに表示するテキストを入力してください。

Amazon検索ボタンのリンクURLを商品詳細ページにするか。
楽天必須 もしも必須

楽天APIを利用するためのアプリケーションIDを入力してください。 取得方法

楽天必須 もしも必須

楽天アフィリエイト用のIDを入力してください。 取得方法


同一商品番号の商品が複数あった場合の表示優先度です。

データー取得時点の楽天市場販売ページでの値段を表示します。ショートコードでpriceオプションが設定されている場合は、そちらが優先されます。 解説ページ

楽天商品リンクのロゴの表示切り替え。

楽天のキーワード検索ボタンを表示するか。

楽天の検索ボタンに表示するテキストを入力してください。

楽天検索ボタンのリンク先URLを商品詳細ページにするか。



バリューコマースからYahoo!ショッピングに登録しsidとpidを取得してください。 取得方法

Yahoo!のキーワード検索ボタンを表示するか。

Yahoo!ショッピングの検索ボタンに表示するテキストを入力してください。


DMMアフィリエイトの「アフィリエイトID」をを取得してください。 取得方法

DMMのキーワード検索ボタンを表示するか。

DMMの検索ボタンに表示するテキストを入力してください。
もしも必須

もしもアフィリエイト経由でAmazonリンクを掲載し報酬を得ます。【重要】2019年1月23日のPA-APIの仕様変更により、APIが生成するリンクから売上が発生しないとAPIが利用できなくなりました。ですので、もしもアフィリエイト経由の場合は、30日でAPIが利用できなくなる可能性があります。AmazonのAPIを利用したい場合は、この機能は有効にしないことをおすすめします。PA-APIの制限がクリアできない場合は、楽天商品リンクをご利用ください。 解説ページ


もしもアフィリエイトのAmazon IDを入力してください。未入力の場合はデフォルトのリンクが出力されます。 取得方法


もしもアフィリエイトの楽天IDを入力してください。未入力の場合はデフォルトのリンクが出力されます。 取得方法


もしもアフィリエイトのYahoo!ショッピングIDを入力してください。未入力の場合はデフォルトのリンクが出力されます。 取得方法
日

APIキャッシュのリフレッシュ間隔を設定します。1～3650日の間隔を選べます。間隔が短いほどAPIのリクエスト制限にかかる可能性が高くなりますのでご注意ください。アクセス数の多いサイトは長めに設定しておくことをおすすめします。Amazon APIのキャッシュは利用規約により24時間で更新されます。

Amazon.co.jp Product Advertising API ライセンス契約
Product Advertising API (PA-API) の利用ガイドライン
楽天ウェブサービス規約

エラー設定

APIに関するエラー通知の設定です。

APIで商品情報を取得できなかった際に、WordPressに登録されているメール宛にエラーメッセージを送信します。※メール送信は数分遅れる可能性もあります。

その他設定

その他の設定です。よくわからない場合は、変更しないことをおすすめします。

サイトの内部リンクや、非SSLの画像・URLなど、HTTPS化する必要があるURLをSSL対応させて表示させます（※全てのURLに対応しているわけではありません）。 解説ページ

KUSANAGI等のファイルシステム認証が必要なサーバの場合に有効にしてください。 解説ページ

Simplicityから利用可能なPost meta情報を利用します。例えば投稿画面の「SEO設定」「広告除外」「AMP除外」項目とか。※テーマカスタマイザーとかの設定は移行できません。

日本語スラッグを投稿の場合は「post-XXXX」、固定ページの場合は「page-XXXX」のような短縮文字列に変更します。

テーマ設定のリセット

全テーマ設定の内容をリセットします。リセットを行う前にバックアップ機能を用いて設定の保存をしておくことをおすすめします。そうすれば、リストアも可能です。 解説ページ

テーマ設定をデフォルト状態に戻します。チェックをつけて設定の保存を行ってください。

誤って設定を削除するのを防ぐために確認のためもう一度チェックしてください。

環境情報

Cocoon環境に関する情報です。

----------------------------------------------
  サイト名：TOPROP|ブログ
  サイトURL：https://toprop.jp/blog
  ホームURL：https://toprop.jp/blog
  コンテンツURL：/wp-content
  インクルードURL：/wp-includes/
  テンプレートURL：/wp-content/themes/cocoon-master
  スタイルシートURL：/wp-content/themes/cocoon-child-master
  親テーマスタイル：/wp-content/themes/cocoon-master/style.css
  子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
  WordPressバージョン：6.2.2
  PHPバージョン：7.4.33
  ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
  サーバーソフト：Apache
  サーバープロトコル：HTTP/1.1
  言語：ja,en;q=0.9
  ----------------------------------------------
  テーマ名：Cocoon
  バージョン：2.6.0.3
  カテゴリー数：3
  タグ数：7
  ユーザー数：2
  ----------------------------------------------
  子テーマ名：Cocoon Child
  バージョン：1.1.3
  style.cssサイズ：845バイト
  functions.phpサイズ：203バイト
  ----------------------------------------------
  Gutenberg：1
  AMP：0
  PWA：0
  Font Awesome：4
  Auto Post Thumbnail：0
  Retina：0
  ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
  ----------------------------------------------
  ブラウザキャッシュ有効化：0
  HTML縮小化：0
  CSS縮小化：0
  JavaScript縮小化：0
  Lazy Load：0
  ----------------------------------------------
  利用中のプラグイン：
  All in One SEO 4.3.8
  BackWPup 4.0.0
  Head, Footer and Post Injections 3.2.5
  ----------------------------------------------

不具合報告の際には以下の情報を添えてもらうと助かります。