Diviでの日付と時刻のフォーマットに関するガイド

あなたのウェブサイトに日付と時刻を表示することは、ほとんどの人が実際には考えていないことの1つです。 投稿メタデータの公開日のデフォルトのフォーマットを使用する傾向があります。 また、時間があれば、著作権テキストの横のフッターバーに現在の年を動的に追加します。

ただし、日付と時刻のフォーマット方法を理解しておくと便利です。 これにより、ユーザーが日付を読みやすくする自由が得られます。 たとえば、「2020年5月23日月曜日」は、「5.23.20」のような最小限の日付表示よりも少し暖かく（そして人間味があります）です。 後者はその場所を持っていますが。 Webサイトの現在時刻のフォーマットについても同じことが言えます。 「午後8時30分」のような12時間の表示の恩恵を受けるサイトもあれば、「20:30」のような24時間の表示を好むサイトもあります（軍事サイトや医療サイトなど）。

DiviとWordPressを使用すると、PHPで利用できる日付と時刻のフォーマットを驚くほど細かく制御できます。 このチュートリアルでは、Diviで日付と時刻を表示、書式設定、およびスタイル設定する方法を理解するのに役立ちます。 ブログ投稿に公開日のカスタム形式を指定したり、行動を促すフレーズに動的な要素を追加して、より個人的なタッチを加えることができます（つまり、「ハッピーマンデー！新しい取引を確認してください」）。

始めましょう！

日付と時刻のフォーマットガイドDiviレイアウトを無料でダウンロード

Diviで日付と時刻の書式設定をすぐに実行できるようにするには、この便利な日付と時刻の書式設定ガイドのレイアウトをダウンロードしてください。 これには、Diviテキストモジュールで動的コンテンツとして使用されている各日付/時刻形式の例が含まれているため、ライブページでそれぞれがどのように機能するかを直接確認できます。

日付と時刻のフォーマットガイドを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

日付と時刻を表示するために使用可能なフォーマット文字

前述のように、DiviはWordPressの組み込みの日付と時刻のフォーマットを利用しています。 ただし、Diviで日付と時刻をフォーマットする方法に入る前に、使用可能なフォーマット文字を理解しておくと役立ちます。

以下は、カスタムの日付と時刻の形式を作成するために一緒に（または組み合わせて）使用できる使用可能な形式文字のリストです。 これは、Diviサイトで日付と時刻の一意の形式を試すときに役立ちます。

日付の書式設定

DAY形式の文字

• d =曜日、先行ゼロ付きの2桁（「02」、「22」）
• D = 3文字の月の日（「6月」、「7月」）
• l （小文字の「L」）=曜日、フルワード（「月曜日」、「火曜日」）
• N = ISO-8601数値曜日（月曜日は「1」、日曜日は「7」）
• S =月の日の接尾辞。 jとともに使用（「nd」、「st」、「rd」）
• w =曜日の数値（日曜日は「0」、土曜日は「6」）
• z = 0から始まる1年の日（つまり、「173」または「これは1年の173日目です」）

WEEK形式の文字

• W = 26（年の週数、月曜日から始まる週、つまり「これはその年の26週目です」）

MONTH形式の文字

• F =月の完全なテキスト表現（「1月」または「3月」）
• m =先行ゼロ付きの数値月（6月は「06」と表示されます）
• M = 3文字の月（3月は「3月」と表示されます）
• n =先行ゼロなしの数値月（6月は「6」と表示されます）
• t =指定された月の日数（6月の場合は「30」と表示されます）

YEAR形式の文字

• Y = 2020（4桁の数値年、つまり「2020」）
• y = 20（2桁の数値年。つまり「20」）

日付形式の文字列の例

• M j、Y = 2020年6月22日
• F d、Y = 2020年6月22日
• m / d / Y = 2020年6月22日
• mdY = 06.22.2020
• j M、Y = 2020年6月22日
• l、M d = 6月22日月曜日
• l、F jS、Y = 2020年6月22日月曜日
• m・d・y = 06・22・20

時間フォーマット

TIME形式の文字

• a =（小文字の「am」または「pm」）
• A = PM（大文字の「AM」または「PM」）
• g =時間、12時間、先行ゼロなし（“ 1-12”）
• h =時間、12時間、先行ゼロ（“ 01-12”）
• G =時間、24時間、先行ゼロなし（“ 0-23”）
• H =時間、24時間、先行ゼロ（“ 00-23”）
• i = 10（分、先行ゼロ（“ 00-59”）
• s = 52（秒、先行ゼロ（“ 00-59”）
• T =タイムゾーン（「CDT」、「EST」）

時間形式の文字列の例

• g：ia = 4:10 pm
• g：i：sa = 4:10:52 pm

日付+時刻形式の文字列

• Y / m / dg：i：s A = 2020/06/22 4:10:52 PM
• M j、Y @ G：i = 2020年6月22日@ 16：10

追加のテキスト/文字を組み込むための「\」を含むフォーマット文字列のエスケープ

これは、日付と時刻の表示をカスタマイズするのに非常に役立つトリックです。 フォーマット文字列に含める各文字/文字の前に「\」を追加するだけで、その文字は通常どおりにレンダリングされます（文字列の外側）。 したがって、「/ T / h / e」は、タイムゾーン（「T」）や時間（「h」）などの実際の日付/時刻要素ではなく、フォーマット文字列で「The」という単語をレンダリングします。

• D \ a \ t ga =月曜日の午後4時
• \ T \ h \ e dS \ d \ a \ y \ o \ f F = 6月22日

Diviで日付と時刻をフォーマットする

サイト全体のデフォルトの日付形式の変更

サイト全体でデフォルトの日付と時刻の形式を変更する場合、WordPressにはこのための組み込みオプションがあります。 WordPressダッシュボードから、[設定]> [一般]に移動します。 そこに、デフォルトのタイムゾーン、日付形式、および時間形式を変更するオプションが表示されます。

Divi Builderで動的コンテンツを使用して日付または時刻を追加する場合（公開後の日付や現在の日付など）、Diviは実際にはこれらの同じデフォルト形式を使用します。

Diviのデフォルトのブログ投稿レイアウト（Divi Builderで作成されたカスタムレイアウトではない）を使用している場合は、サイト全体のすべてのブログ投稿に使用されるカスタムの日付形式の文字列を入力できます。 [Divi]> [Theme Options]に移動し、[General]タブの下のページを下にスクロールすると、日付形式のオプションを見つけることができます。

興味深いことに、時間形式の文字を入力して、投稿が公開された時刻を表示することもできます。

Diviの動的コンテンツを使用して日付と時刻をフォーマットおよび表示する

Divi Builderを使用する場合、現在の日付または公開後の日付を動的コンテンツとして任意のモジュールに追加するオプションがあります。 これは、ケースバイケースでデフォルトの日付と時刻の形式を上書きしたり、日付/時刻のテキストにカスタムスタイルを追加したりするための優れた方法です。

公開後の日付または現在の日付を動的コンテンツとしてDiviのページに追加するには、ページにテキストモジュールを追加するだけです。

次に、コンテンツボックスにカーソルを合わせて、動的コンテンツアイコンを選択します。

モジュールのコンテンツに動的日付が追加されたら、クリックして動的日付を編集し、さらにカスタマイズすることができます。 これらの追加設定には、日付表示に前後のコンテンツを追加するオプションと、日付の形式をカスタマイズするオプションが含まれます。

Diviの組み込みの日付形式

日付形式のドロップダウンの下に、選択できる次の既成の日付形式があります。

• M j、Y = 2020年6月22日
• F d、Y = 2020年6月22日
• m / d / Y = 2020年6月22日
• mdY = 06.22.2020
• j M、Y = 2020年6月22日
• l、M d = 6月22日月曜日

カスタムの日付/時刻形式の追加

カスタムの日付/時刻形式を作成するには、ドロップダウンからカスタムオプションを選択します。 カスタムオプションを選択すると、使用可能なフォーマット文字の任意の組み合わせを追加して、日付、時刻、またはその両方に最適なフォーマット文字列を作成することにより、魔法を働かせることができる入力ボックスが利用可能になります。

これと同じプロセスを使用して、現在の時刻または公開後の時刻を追加できます。 [カスタム日付形式]ボックス内に時間形式の文字を追加するだけです。

コンテンツを配置したら、テキストモジュールの[デザイン]タブにあるDiviの組み込みのデザイン設定を使用して、本文を好きなようにカスタマイズできます。 動的な日付/時刻形式は、本文のスタイルを採用します。

より役立つ例

著作権年

日付と時刻のフォーマットは、Diviサイトのグローバルフッターの動的な著作権年を作成するのに役立ちます。 これは、動的な年の著作権情報を単一のテキストモジュールで表示するために使用できるカスタム形式です。

現在の日付を動的コンテンツとしてテキストモジュールに追加します。 次に、次のように動的コンテンツを編集します。

• 以前：©
• 後：会社| 全著作権所有。
• カスタム日付形式： Y

動的な召喚

また、Divi Webサイトの召喚状または見出しに、動的な日付または時刻の形式（インライン）を追加することもできます。 これを行うには、現在の日付を動的コンテンツとしてテキストモジュールに追加します。 次に、以下を更新します。

• 前：

  <h1>It's

• 後：

  ... <br>Time to Design!</h1>

• カスタム日付形式： l…\ a \ f \ t \ e \ rga

前後の入力でhtmlタグを使用してh1ヘッダーが要素に追加されていることに注意してください。 「火曜日」という単語は、カスタム日付フォーマットボックスの「l」で表示され、その後に「\」を使用してフォーマット文字列をエスケープする「after」という単語が表示されます。 次に、「g」と「a」を使用して「午後6時」を表示します。

次に、[デザイン]タブでh1の見出しスタイルをカスタマイズできます。

最終的な考え

うまくいけば、この投稿には、Diviで日付と時刻をフォーマットする方法についての役立つガイドがあります（そしてこれからもそうなり続けます）。 あなたが私のようであるならば、あなたの目はあなたがプラグインなしでそしてカスタムコードで達成することができるいくつかの驚くべきフォーマットオプションに開かれました！

コメントでお返事をお待ちしております。

乾杯！