diff --git a/site.tmpl b/site.tmpl
index a3d3d41..077ec28 100644
--- a/site.tmpl
+++ b/site.tmpl
@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="author" content="{{ html .Site.Other.Author }}" />
   <meta name="description" content="デジタル自主のロリ神様" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="alternate" type="application/atom+xml" title="{{ html .Site.Other.Title }} feed" href="/blog.atom" />
   <title>{{ .Site.Other.Title }}{{ if .Title }}: {{ .Title }}{{ end }}</title>
   <link rel="stylesheet" type="text/css" href="/static/style.css" />
@@ -18,7 +18,7 @@
 
 {{ define "footer" }}    <hr />
     <a href="https://github.com/piranha/gostatic">gostatic</a>で創作しました。
-    <a href="https://git.076.ne.jp/TechnicalSuwako/StaticSuwako">ページの<span class="icon git-icon">Git</span>リポジトリ</a>
+    <a href="https://git.076.ne.jp/TechnicalSuwako/StaticSuwako">ページの<img class="icon" src="/static/git.png" alt="" />Gitリポジトリ</a>
     <div class="emblems">
       <a href="https://validator.w3.org/check?uri=https%3A%2F%2Ftechnicalsuwako.moe%2F">
         <img src="/static/valid-xhtml11.png" alt="Valid XHTML 1.1" height="31" width="88" />
@@ -39,26 +39,25 @@
 {{ end }}
 
 {{ define "page" }}{{ template "header" . }}    <div class="header-links">
-      <a href="/">トップ</a>
-      <a href="/about/">自己紹介</a>
-      <a href="/contact/">連絡先</a>
-      <a href="/skill/">スキル</a>
-      <a href="/portfolio/">ポートフォリオ</a>
-      <a href="/service/">サービス</a>
-      <a href="/webring/">リング</a>
+      <a href="/">トップ</a> |
+      <a href="/about/">自己紹介</a> |
+      <a href="/contact/">連絡先</a> |
+      <a href="/skill/">スキル</a> |
+      <a href="/portfolio/">ポートフォリオ</a> |
+      <a href="/service/">サービス</a> |
+      <a href="/webring/">リング</a> |
       <a href="/i2pabout/">I2Pについて</a>
     </div>
     <div class="header-links">
-      <a href="/blog.atom"><span class="icon atom-icon">Atom</span>で登録</a>
-      <a href="https://social.076.ne.jp/TechnicalSuwako"><span class="icon mastodon-icon">Mastodon</span> / <span class="icon pleroma-icon">Pleroma</span>でフォロー</a>
-      <a href="https://video.076.ne.jp/c/technicalsuwako"><span class="icon peertube-icon">PeerTube</span>で登録</a>
-      <a href="https://technicalsuwako.moe/"><span class="icon clearnet-icon">一般ネット</span></a>
-      <a href="http://6qiatzlijtqo6giwvuhex5zgg3czzwrq5g6yick3stnn4xekw26zf7qd.onion/"><span class="icon tor-icon">Tor</span></a>
-      <a href="http://technicalsuwako.i2p/"><span class="icon i2p-icon">I2P</span></a>
+      <a href="/blog.atom"><img class="icon" src="/static/rssa.png" alt="" />Atomで登録</a> |
+      <a href="https://social.076.ne.jp/TechnicalSuwako"><img class="icon" src="/static/mastodon.png" alt="" />Mastodon / <img class="icon" src="/static/pleroma.png" alt="" />Pleromaでフォロー</a> |
+      <a href="https://video.076.ne.jp/c/technicalsuwako"><img class="icon" src="/static/peertube.png" alt="" />PeerTubeで登録</a> |
+      <a href="https://technicalsuwako.moe/"><img class="icon" src="/static/clearnet.png" alt="" />一般ネット</a> |
+      <a href="http://6qiatzlijtqo6giwvuhex5zgg3czzwrq5g6yick3stnn4xekw26zf7qd.onion/"><img class="icon" src="/static/tor.png" alt="" />Tor</a> |
+      <a href="http://technicalsuwako.i2p/"><img class="icon" src="/static/i2p.png" alt="" />I2P</a>
     </div>
     <div>
-      支援♡：
-      <a href="/support/monero/"><span class="icon monero-icon">Monero</span></a>
+      支援♡ : <a href="/support/monero/"><img class="icon" src="/static/monero.png" alt="" />Monero</a>
     </div>
     <hr />
 {{ replace "<code>" "<code lang=\"\">" ( replace "<pre style=\"background-color:#f8f8f8;overflow-x: auto\">" "<pre>" .Content ) }}{{ template "footer" . }}{{ end }}
@@ -66,8 +65,8 @@
 {{ define "date" }}{{ .Format "2006年01月02日" }}{{ end }}
 
 {{ define "pagelist" }}{{ range . }}    <div class="mb5{{ if .Date.Year | changed "year" }} mt15{{ end }}">
-      <div>{{ template "date" .Date }}</div>
-      <div><a href="/{{ .Url }}">{{ .Title }}</a></div>
+      <span>{{ template "date" .Date }}</span>
+      <span><a href="/{{ .Url }}">{{ .Title }}</a></span>
     </div>
 {{ end }}{{ end }}
 
diff --git a/src/static/style.css b/src/static/style.css
index 1286e35..cca820e 100644
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -38,6 +38,9 @@ td, th {
 }
 
 @media screen and (max-width: 840px) {
+  body {
+    background-image: none;
+  }
   .container {
     padding: 0;
     border: 0;
@@ -48,6 +51,7 @@ td, th {
 .header-img {
   display: block;
   max-width: 100%;
+  margin-bottom: 0.5em;
 }
 
 a {
@@ -105,73 +109,15 @@ h1 {
   margin-block: 0.5em;
 }
 
-.mb5 > div {
+.mb5 > span {
   display: inline-block;
 }
 
-.header-links {
-  margin-block: 0.25em;
-}
-
-.header-links > a {
-  border-left: 1px solid #fcfcfc;
-  display: inline-block;
-  padding-left: 0.25em;
-}
-
-.header-links > a:first-of-type {
-  border-left: none;
-  padding-left: 0;
-}
-
-.icon::before {
-  content: '';
+.icon {
   height: 1em;
-  width: 1em;
-  display: inline-block;
-  background-size: auto 1em;
-  background-repeat: no-repeat;
   vertical-align: sub;
-  padding-right: 0.25em;
-}
-
-.atom-icon::before {
-  background-image: url('/static/rssa.png');
-}
-
-.mastodon-icon::before {
-  background-image: url('/static/mastodon.png');
-}
-
-.pleroma-icon::before {
-  background-image: url('/static/pleroma.png');
-  width: 0.65em;
-}
-
-.peertube-icon::before {
-  background-image: url('/static/peertube.png');
-}
-
-.clearnet-icon::before {
-  background-image: url('/static/clearnet.png');
-}
-
-.tor-icon::before {
-  background-image: url('/static/tor.png');
-}
-
-.i2p-icon::before {
-  background-image: url('/static/i2p.png');
-}
-
-.monero-icon::before {
-  background-image: url('/static/monero.png');
-}
-
-.git-icon:before {
-  background-image: url('/static/git.png');
 }
 
 .emblems {
-  float: right;
+  display: inline-block;
 }