トップページへ戻るボタン追加

Raspberry Pi (Linux)

早起きは暇の元(笑)
土日は相変わらず暇だし・・・ということで、またhugoネタ。

分割ビューやアーカイブリストなど、順次下の方を閲覧したところでトップページに戻る場合、上にスクロールしてサイトタイトルをクリックする必要があった。
これはかなり不便なので、フッターに「トップページへ戻る」ボタン追加。

下記はその忘備録。
1). layouts\partials\footer.html

<footer class="footer">
	<div class="container footer__container flex">
		{{ partial "footer_links.html" . }}
		<div class="footer__copyright">
			&copy; {{ now.Format "2006" }} {{ .Site.Params.copyright | default .Site.Title }}.
			<span class="footer__copyright-credits">{{ T "footer_credits" | safeHTML }}</span>
		</div>
		/* 以下を追加 */
		<div class="footer-home-nav">
			<a href="/" class="home-button">トップページへ戻る</a>
		</div>
		
	</div>
</footer>

2). static\css\custom.css

以下を末尾に追加

/* ===== Home Button Style ===== */
.footer-home-nav {
  text-align: center;      /* 中央寄せ */
  margin: 5px 0 5px;     /* 上下に余白をとる */
  padding: 0px;
}

.home-button {
  display: inline-block !important;
  background-color: #333 !important; /* ボタンの色（白ベースなら赤 #e22d30 もおすすめ） */
  color: #ffffff !important;         /* 文字色（白） */
  padding: 10px 20px !important;    /* 押しやすいように大きめに */
  text-decoration: none !important;  /* 下線を消す */
  border-radius: 50px !important;    /* 角を丸くしてボタンらしく */
  font-weight: bold !important;
  font-size: 1.1rem !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* 少し浮かせて「押せる感」を出す */
  transition: transform 0.2s, background-color 0.2s;
}

.home-button:hover {
  background-color: #7aa2ff !important; /* ホバー時は青系に */
  transform: translateY(-2px);           /* 軽く浮き上がる演出 */
  color: #ffffff !important;
}