ブログなど、第一声に挨拶があるサイトってありますよね。今回は、JavaScriptを使って時間ごとに異なるメッセージを表示する方法を紹介します。朝は「おはようございます！」、昼は「こんにちは！」夜は「こんばんは！」と表示させます。早速ワードプレス本文にも反映させてみました（下記）。
JavaScriptで本文に挨拶文を表示させてみました
ここにあいさつを表示します
このブログへの訪問ありがとうございます！
ブログ閲覧時の時間に合う「あいさつ」が表示されましたか？
ワードプレス本文で簡単に表示する方法
ブログのカスタマイズって難しそう。下手に触ってしまって、ブログやサイトの大切なデータが消えないの！？
それは心配だよね。とりあえず今から紹介するのは上級者レベルじゃなく、初心者用だから安心してね。テスト用に新規記事をコピペで作ってやってみよう。
現在のワードプレス最新バージョンで動作確認ができたのでご紹介します。
ソースコードの削除や修正が簡単なので、JavaScript初心者やWordPressカスタマイズに慣れていない人におすすめです。
▼カスタムHTMLの使い方
ワードプレスを使っている人は、テスト用の記事を新規作成し、青い正方形の「＋」のマークで新規ブロックを作成→メニューから「カスタムHTML」を選びます。
▼挨拶文を入れたいところに挿入するhtml
<p><span id="greeting">ここにあいさつを表示します</span><br> このブログへの訪問ありがとうございます！</p>
<br>で改行していますが、<p id="greeting">あいさつ</p>タグだけでもOK（その場合、次の文が1行空きます）。文章は自分なりにアレンジしてもOKです！
▼上のメッセージより下の<body内＞に挿入するJavaScriptコード
<script>
const hour = new Date().getHours();
if(hour >= 4 && hour < 11){
document.getElementById('greeting').textContent ="おはようございます！";
}else if(hour >=11 && hour <17){
document.getElementById('greeting').textContent ="こんにちは！";
}else{
document.getElementById('greeting').textContent ="こんばんは！";
}
</script>
ブログ以外のサイトでは<script>タグは</body>タグ（終了タグ）の直前に入れると表示スピードに影響がないよ！ 確認したところ、<p>（あいさつを表示する）</p> タグの後に続けて上記の<script>~</script>タグを入れても動作するよ。
表示するあいさつの時間と言葉の設定
解説記事で詳細を書きますが、挨拶文の時間帯はこのように設定しました。
朝4時〜10時台(10:59)ならば「おはようございます！」
昼11時〜17時台（17:59）ならば「こんにちは！」
夜18時〜３時台（3：59）ならば「こんばんは！」
上記３つの条件で分けて、簡単なコードを書いています。詳細は別の解説記事で紹介しています。
ブラウザプレビューで挨拶文を確認
編集画面では、このように表示されます。
ここにあいさつを表示します
このブログへの訪問ありがとうございます！
下書きを保存して、ブラウザでプレビューを確認してみましょう。
ワードプレスでは本文中に「カスタムHTML」を使ってコードを追加するとできました。私は使ったことがないのですが、もしワードプレス以外のブログで直接HTMLを編集（追加）する機能がある場合は、同じようにコピー＆ペーストで試してみてください（ワードプレス以外では起動確認していないので、データの保持に気をつけてテスト記事で実験してみてください）。
if文、&&演算子、getElementById、textContentなどのJavaScriptの解説はこちらの記事に書きました。頑張って書いたので、JavaScripts初学者の人はぜひご覧ください。
【関連記事】
【初心者向け解説】JavaScriptで時間ごとに異なるメッセージを表示する方法
