-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
113 lines (94 loc) · 3.68 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="ja">
<!-- サイトに関する設定事項を記述します -->
<head>
<!-- 文字コードの指定 -->
<meta charset="utf-8">
<!-- ページのタイトル -->
<title>WAVE</title>
<!-- ビューポート(視点)の指定 -->
<meta name="viewport" content="width=device-width">
<!-- ファビコンの指定 https://ao-system.net/favicongenerator/ -->
<link rel="icon"
href="images/favicon.ico"
type="image/ico">
<link rel="apple-touch-icon"
href="images/apple-touch-icon-180x180.png"
type="image/png"
sizes="180x180">
<!-- 検索時に表示される、ウェブサイトの要約文 -->
<meta name="description" content="概ね80文字前後のサイトの
紹介文が、検索時に表示されます。">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Yuji+Boku&display=swap">
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v6.6.0/css/all.css">
<!-- Reset CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@acab/reset.css@0.10.0/index.min.css">
<!-- 自分で作ったスタイルシート -->
<link rel="stylesheet" href="stylesheets/master.css">
<!-- 先頭へ戻るボタンの為のJavaScript -->
<script src="javascripts/page_top.js" defer></script>
<!-- 部分ファイルを読み込む -->
<script src="include.js"></script>
<!-- 暦の為の CSS & JS 読み込み -->
<link rel="stylesheet" href="calendar.css">
<script type="module" defer src="calendar.js"></script>
</head>
<!-- 表示したい内容・出し物・コンテンツを記述します -->
<body class="post">
<!-- ヘッダー(サイト名) -->
<header id="header"></header>
<script>include("header")</script>
<!-- ナビゲーションメニュー -->
<nav id="navigation"></nav>
<script>include("navigation")</script>
<!-- 主要なコンテンツ -->
<main>
<!-- 投稿記事 -->
<!-- title, h1, span, img, pタグの内容は JavaScript により書き換わる。 -->
<article>
<h1 id="title">元旦</h1>
<time>
<i class="fa-regular fa-clock fa-lg fa-fw"></i>
<span id="hiduke">一月一日</span>
</time>
<figure class="sepia rotate-3 frame" id="image">
<img src="images/aozora_to_sakura.webp" alt="青空と櫻">
</figure>
<p id="paragraph">
令和六年元旦。新しい年の始まりです。<br>
初日の出を拝み、良い年であるようにと祈ります。<br>
お節料理にお屠蘇、お雑煮をいただきます。
</p>
</article>
</main>
<!-- サイドバー -->
<div class="sidebar">
<!-- プロフィール -->
<aside class="profile">
<h2>PROFILE</h2>
<figure>
<img src="images/profile.webp" alt="WAVEの管理人" class="circular">
</figure>
<p>
部屋の掃除は好きだけれど、お皿洗いは苦手。毎日そこら辺をお散歩しています。
</p>
</aside>
<!-- ピックアップ記事 -->
<aside class="pickup">
<!-- JavaScript により 暦要素を生成 -->
<div id="wallpaper">
<div id="calendar"></div>
</div>
</aside>
</div>
<!-- フッター -->
<footer id="footer"></footer>
<script>include("footer")</script>
</body>
</html>