年末年始になると日めくりカレンダーをいろいろ探す人もいることでしょう。そこで、サイトに表示することができないかいろいろとためしてみましたので、ご紹介しましょう♪
その① シンプル日めくりカレンダー
手順1 サイトのJavascriptファイルに下記を記入します。
window.onload = function()の中に記入します。
window.onload = function(){
// 【日めくりカレンダーシンプル】
// 月、日、曜日表示部分
let month = document.getElementById("hmmonth");
let date = document.getElementById("hmdate");
let day = document.getElementById("hmday");
// 今日の月・日・曜日を設定
let today = new Date();
const youbi = ["日", "月", "火", "水", "木", "金", "土"];
const [myMonth, myDate, myDay] = [today.getMonth()+1, today.getDate(), youbi[today.getDay()]];
// 表示
month.textContent = myMonth + "月";
// 土曜と日曜は日付の文字色変更
if(myDay === "日") date.style.color = "red";
else if(myDay === "土") date.style.color = "blue";
date.textContent = myDate;
day.textContent = myDay + "曜";
};手順2 サイトのCSSファイルに下記を記入します
/*【日めくりカレンダー】*/
#hmwrapper{ /* 日めくりカレンダー全体 */
background-color: #eee;
background-size: cover;
margin: 1em auto;
width: 100%;
box-shadow: 7px 7px 10px #555;
}
#hmborder{ /* 上の枠線部分 */
background-color: orange;
width: 100%;
height: 3em;
}
#hmmonth{ /* 月 */
padding: 0.2em 0.5em 0 0.5em;
font-size: 3em;
text-align: right;
color: #777;
}
#hmdate{ /* 日 */
margin: -0.5em 0em -0.5em 0em;
font-size: 10em;
font-weight: 900;
text-align: center;
color: #333;
}
#hmday{ /* 曜日 */
padding: 0 0 0.2em 0;
font-size: 4em;
font-weight: 900;
text-align: center;
color: #777;
}手順3 日めくりを表示したい場所に下記を記入します
記事の中に置いたり、HTMLを書き込めるヴィジットに記入してサイドバーにのせたりなどできます。ワードプレスの記事の場合は、ビジュアルエディタではなくコードエディタにすると記入できます。
<div id="hmwrapper">
<div id="hmborder"></div>
<div id="hmmonth"></div>
<div id="hmdate"></div>
<div id="hmday"></div>
</div>その② 日めくり写真カレンダー
手順1 サイトのJavascriptファイルに下記を記入します。
window.onload = function()の中に記入します。
window.onload = function(){
// 【日めくり写真カレンダー】
// 月、日、曜日表示部分
let month2 = document.getElementById("hmmonth2");
let date2 = document.getElementById("hmdate2");
// 今日の月・日・曜日を設定
let today2 = new Date();
const youbi2 = ["日", "月", "火", "水", "木", "金", "土"];
const [myYear2, myMonth2, myDate2, myDay2] = [today2.getFullYear(), today2.getMonth()+1, today2.getDate(), youbi2[today2.getDay()]];
// 表示
month2.textContent = myYear2 + "年 " + myMonth2 + "月";
// 土曜と日曜は日付の文字色変更
if(myDay2 === "日") date2.style.color = "red";
else if(myDay2 === "土") date2.style.color = "blue";
date2.textContent = myDate2 + "日 " + myDay2 + "曜";
//今日の日付データを変数hidukeに格納
var hiduke2=new Date();
//年・月・日・曜日を取得する
var yearb2 = hiduke2.getFullYear();
var monthb2 = hiduke2.getMonth()+1;
var weekb2 = hiduke2.getDay();
var dayb2 = hiduke2.getDate();
var hmimgb2 = document.getElementById("hmimg2");
//今年に入って何日目かを取得する
const yb2 = `${new Date().getFullYear()}/1/1`
const ntb2 = new Date(yb2).getTime();
const tb2 = Date.now() - ntb2;
const xb2 = `${Math.floor(tb2 / 1000 / 60 / 60 / 24) + 1}`
//注意！イメージの場所はご自分の環境に合わせて書き換える必要があります。
hmimgb2.innerHTML ="<img src='https://******.biz/wp-content/uploads/img_" + xb2 + ".jpg' alt='' width=100% />";
};手順2 サイトのCSSファイルに下記を記入します
/*【日めくり写真カレンダー】*/
#hmwrapper2{ /* 日めくりカレンダー全体 */
background-color: #eee;
margin: 1em auto;
width: 100%;
box-shadow: 7px 7px 10px #555;
}
#hmmonth2{ /* 年月 */
background-color: #333;
padding: 0;
font-size: 2em;
font-weight: 900;
text-align: center;
color: #fff;
}
#hmdate2{ /* 日・曜日 */
margin: -0.2em 0em -0.2em 0em;
font-size: 3em;
font-weight: 900;
text-align: center;
color: #777;
}
#hmimg2{ /* 画像 */
text-align: center;
background-color: #777;
}手順3 画像を366枚アップします。
これが一番大変かもしれませんが、日めくりカレンダーに表示する画像を作成してアップします。名前は「img_1」、「img_2」・・・というように「img_」に数字を付けます。これにより、今年の一月一日から何日目かにより、その数字の画像が表示されます。
画像をアップしたフォルダーをJavascriptの「hmimgb2.innerHTML =」の部分に正確に記入します。
手順4 日めくりを表示したい場所に下記を記入します
<div id="hmwrapper2">
<div id="hmmonth2"></div>
<div id="hmdate2"></div>
<div id="hmimg2"></div>
</div>★もっと簡単にできないかと考えて、ワードプレスのプラグイン化してみました↓(^.^)↓
