詳細設定

デザインカスタマイズ、色・フォント設定、カスタムHTML要素の仕組みなど、Kashiwazaki SEO Published & Last Updated Dates の詳細な設定項目を解説します。

色のカスタマイズ

日付表示の色を細かくカスタマイズできます。テーマのデザインに合わせて調整してください。

フロントエンド表示例

設定項目	説明
テキスト色	日付テキストの色を設定します。デフォルトはテーマの本文テキスト色に準拠します。
背景色	日付表示エリアの背景色を設定します。透明も指定可能です。
アイコン色	カレンダーアイコンの色を設定します（アイコン付きデザイン選択時のみ）。
ラベル色	「公開日」「更新日」ラベルの色を設定します（ラベルデザイン選択時のみ）。

ヒント

色の設定にはカラーピッカーが使用できます。HEX値を直接入力することも可能です。テーマとの調和を意識し、コントラスト比を十分に確保してください。

フォント設定

日付テキストのフォントスタイルをカスタマイズできます。

設定項目	説明
フォントサイズ	日付テキストのフォントサイズを設定します。テーマの本文サイズに合わせて調整してください。
フォントウェイト	太字（bold）または通常（normal）を選択できます。

カスタムHTML要素

本プラグインは <ksplud-date> というカスタムHTML要素を使用して日付を表示します。Web Componentsの技術を活用した軽量な実装です。

仕組み

プラグインはコンテンツの前後に <ksplud-date> カスタム要素を挿入します。

フロントエンドJavaScript（5.4KB）がカスタム要素を定義し、Shadow DOMを使用してスタイルをカプセル化します。

テーマのCSSとの干渉を防ぎながら、設定に基づいたデザインで日付を表示します。

補足

カスタムHTML要素はすべてのモダンブラウザ（Chrome、Firefox、Safari、Edge）でサポートされています。IE11はサポート対象外です。

出力されるHTMLの例

<ksplud-date
  data-published="2024-01-15"
  data-updated="2024-06-20"
  data-design="icon"
  data-color-text="#333333"
  data-color-bg="transparent">
</ksplud-date>

表示内容の設定

日付として表示する内容を細かく設定できます。

設定項目	説明
公開日の表示	公開日を表示するかどうかを設定します。
更新日の表示	更新日を表示するかどうかを設定します。公開日と更新日が同じ場合は非表示にするオプションもあります。
日付フォーマット	WordPressの日付フォーマット設定に準拠します。管理画面の「設定 > 一般」で変更できます。

注意

公開日と更新日の両方を非表示にした場合でも、JSON-LDの出力は継続されます。構造化データのみを出力し、視覚的な日付表示を行わない運用も可能です。

JSON-LDの詳細

本プラグインが出力するJSON-LDスキーマの詳細を説明します。

DigitalDocumentスキーマ

DigitalDocument は Schema.org で定義されたデジタル文書のスキーマです。ブログ記事やWebページのメタデータを構造化するのに適しています。

CreateAction / UpdateAction

CreateAction はコンテンツの作成（公開）イベント、UpdateAction はコンテンツの更新イベントを表します。potentialAction プロパティとして DigitalDocument に関連付けられ、コンテンツのライフサイクルを明確に伝達します。

スキーマ	役割
DigitalDocument	デジタル文書としてのページメタデータ（名前、URL、作成日、更新日）を構造化
CreateAction	コンテンツの作成（公開）日時を構造化データとして伝達
UpdateAction	コンテンツの最終更新日時を構造化データとして伝達

ヒント

CreateAction/UpdateAction のスキーマはGoogleの公式ドキュメントでも推奨されている構造です。コンテンツの鮮度をアピールすることで、検索結果での評価向上が期待できます。