ブログの投稿数が徐々に増えてきましたが、投稿後は毎回iPhoneから記事の内容や見やすさのチェックを行っています。大抵の場合誤字脱字を微修正して再デプロイコースです…
自分でブログを読んでいて、ページの先頭に戻るボタンが欲しいと思ったので実装します。
(astro-notion-blogにはデフォルトで記事最下部に”トップページ”に戻るリンクがありますが、今回は”ページのトップ”に戻るボタンです。)(トップページとページトップでややこしいと思うのは僕だけでしょうか)
ページの先頭に戻るボタンには大きく分けて2種類あるようです。
- HTMLとCSSのみ
- HTMLとCSSとJavaScript(jQuery)の複合
JavaScript(jQuery)を使った方が多機能にしやすいようで、
- ある程度スクロールしたらボタンが表示される
- 滑らかに先頭まで戻る(アニメーション)
というような見たことある感じの例があったんですが、そこまでの機能は求めていませんし、ページが重くなるのも嫌だったので、シンプルにHTMLとCSSのみで実装することにしました。
決してめんどくさそうだとかそういう考えによるものではありません。
参考
ページの先頭に戻るボタンは記事でのみ表示されればいい(記事一覧では必要ない)ので、src\pages\posts\[slug].astroにボタンを設置します。ボタンの見た目を設定するCSSは、src\layouts\Layout.astroとダークモード用にsrc\components\Darkmode.astroに記述します。
⬆ダークモードについてはこの2記事参照
[slug].astroの103行目から
</footer>の下に<a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>を追加。
<div slot="main" class={styles.main}>
<div class={styles.post}>
<PostDate post={post} />
<PostTags post={post} />
<PostTitle post={post} enableLink={false} />
<PostFeaturedImage post={post} enableLink={false} />
<PostBody blocks={blocks} />
<PostTags post={post} />
<footer>
<PostRelativeLink prevPost={prevPost} nextPost={nextPost} />
</footer>
<a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>
</div>
</div> Layout.astroの最下部</style>の前に追加。
.pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 30px;
bottom: 30px;
border: solid 2px var(--fg);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.pagetop__arrow {
height: 10px;
width: 10px;
border-top: 3px solid var(--fg);
border-right: 3px solid var(--fg);
transform: translateY(20%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
.pagetop:hover, .pagetop:hover .pagetop__arrow {
border-color: var(--accents-1);
}
}
</style> Darkmode.astroの275行目あたりの.darkmode .mode-wrap #mode-toggle + label ~~と</style>の間に追加。
.darkmode .pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 30px;
bottom: 30px;
border: solid 2px var(--fg);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.darkmode .pagetop__arrow {
height: 10px;
width: 10px;
border-top: 3px solid var(--fg);
border-right: 3px solid var(--fg);
transform: translateY(20%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
.darkmode .pagetop:hover, .darkmode .pagetop:hover .pagetop__arrow {
border-color: var(--accents-1);
}
}
</style>背景色を無くした点以外の構成はそのままですが、通常モードとダークモードで色が変わるので、変数で定義されている色を当てました。
var(--fg)によって、通常時は黒色のアイコン、ダークモード時は白色のアイコンになります。また、var(--accents-1)によって、ホバー時にはアクセントカラーになるようにしました。
見やすいボタンができました。
これはウィンドウ端から固定距離で表示しているだけなので、もう少しCSSが分かるようになったらコンテンツとの位置関係を考慮して、PCでもスマホでもいい感じに移動できるように書き換えたいです。
アローボタンの矢印部分って文字か何かを表示していると思ってたんですが、矩形(正方形)領域の上辺と右辺に線を付けて45度回転させたものだということを初めて知りました。こんな方法だったんですね。CSSだけで完結できてめちゃくちゃ頭いいなと思いました。