好奇心の赴くままに。気になったことを、気ままに深掘り

HTMLブロック1つで「トップへ戻る」ボタン｜WordPress 7.0の3つの引き出し

記事が長くなると、読み終えた読者が「もう一度上に戻りたい」と思う場面が出てきます。そんなときに便利なのが、画面の隅にちょこんと現れる「トップへ戻る」ボタン。

プラグインを入れれば一発ですが、実はこれ、HTMLブロックひとつで自分で作れます。しかもWordPress 7.0になって、その作り方がぐっと整理されました。今回は、その新しくなったHTMLブロックの中身をのぞきながら、ボタンを組み立てていきます。

⤴︎ WordPressのここが好き

そもそも「トップへ戻るボタン」には何が要る？

作りはじめる前に、このボタンが何でできているかを分解してみましょう。必要なものは、大きく2つです。

  • ひとつは見た目。画面の右下あたりに、丸いボタンがぽつんと置いてある。あの姿かたちです。
  • もうひとつは動き。ページを下までスクロールしたときだけ現れて、押すとスーッと上まで戻る。この振る舞いです。

「見た目」と「動き」。この2つを用意できれば、トップへ戻るボタンは完成します。そして、この2つをどこに書くのか——そこが今回のいちばんの見どころです。

AD – 読み進める前のひとやすみ

WordPress 7.0で、HTMLブロックが変わった

これまでのHTMLブロックは、いわば仕切りのない、大きな箱ひとつでした。ボタンの形（HTML）も、見た目（CSS）も、動き（JavaScript）も、ぜんぶその箱の中に一緒くたに放り込む。動くには動くのですが、あとから見返すと「どれがどれやら」と、ごちゃごちゃしがちでした。

ところがWordPress 7.0から、このHTMLブロックが生まれ変わりました。ひとつのブロックの中に、HTML・CSS・JavaScriptの3つの編集パネルが、別々に用意されたのです。

イメージとしては、ひとつの引き出し付きの道具箱です。

  • HTMLの引き出し … 「モノ」を入れる（ボタンそのもの）
  • CSSの引き出し … 「見た目」を入れる（丸い形、置く位置、色）
  • JavaScriptの引き出し … 「動き」を入れる（現れる、戻る）

同じひとつの道具箱なのに、中身が用途ごとにきちんと仕切られている。だから、あとで「色だけ変えたいな」というときも、CSSの引き出しを開けばいい。動きを直したければJavaScriptの引き出し。迷子になりません。

「HTMLブロックひとつで作る」という手軽さはそのままに、中身は3段にすっきり整理された——これが7.0の新しいHTMLブロックです。

なお、CSSとJavaScriptのパネルは、サイトの管理者だけに表示される仕様になっています。もし編集画面にパネルが見当たらないときは、権限まわりを確認してみてください。

では、さきほど分解した「見た目」と「動き」を、この3つの引き出しに振り分けていきましょう。

3つの引き出しに、順に入れていく

AD – 読み進める前のひとやすみ

HTMLの引き出し：ボタンそのもの

まずはボタンの本体。これはとてもシンプルです。

<button id="to-top" class="to-top" aria-label="ページの先頭へ戻る">↑</button>

「↑」の矢印がひとつだけの、小さなボタンです。aria-label は、目で見えない読み上げソフトのための説明書き。「これはページの先頭へ戻るボタンですよ」と教えてあげる、ちょっとした気配りです。

AD – 読み進める前のひとやすみ

CSSの引き出し：右下に置いて、ふだんは隠す

次に見た目。ここでボタンを「右下の定位置」に置き、丸く整え、そしてふだんは隠しておく設定をします。

.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: #557A5E;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

ポイントは後半です。ふだんは opacity: 0（透明）で姿を消しておき、is-visible という目印がついたときだけ opacity: 1（見える）に切り替わる。pointer-events: none は「透明なあいだは押せないようにする」おまじない。見えないボタンをうっかり押してしまう事故を防いでいます。transition は、「なめらかに変化させる係」。スッと現れ、スッと消えます。

では、この is-visible という目印は、いつ、誰がつけるのか。それが最後の引き出しの仕事です。

AD – 読み進める前のひとやすみ

JavaScriptの引き出し：スクロールで現れ、押すと戻る

いよいよ動き。JavaScriptは「見た目」ではなく「振る舞い」を書く場所です。

const btn = document.getElementById('to-top');

window.addEventListener('scroll', function () {
	if (window.scrollY > 300) {
		btn.classList.add('is-visible');
	} else {
		btn.classList.remove('is-visible');
	}
});

btn.addEventListener('click', function () {
	window.scrollTo(0, 0);
});

やっていることは2つだけです。

ひとつめは「300ピクセルより下にスクロールしたら、is-visible の目印をつける」。逆に上まで戻ったら目印を外す。さきほどCSSで用意した「見えるスイッチ」を、スクロール量に応じてパチパチ切り替えているわけです。

ふたつめは「押されたら、window.scrollTo(0, 0) で先頭に戻る」。ページのいちばん上（位置ゼロ）へ移動しなさい、という命令です。

AD – 読み進める前のひとやすみ

ボタンは、どこに置く？

さて、3つの引き出しにコードを入れて、ボタンは完成しました。でも、ひとつ問題があります。

記事の途中にこのHTMLブロックを置くと、そのボタンはその記事にしか現れません。「トップへ戻る」は、どのページを読んでいても使えてこそ便利なもの。できれば、サイトのすべてのページに出したいですよね。

そこで登場するのが、サイトエディタのフッター編集です。

WordPressの管理画面から「外観 → エディター」を開き、パターンの中のフッター（ページ下部の共通パーツ）を選びます。ここにさきほどのHTMLブロックを置けば、そのボタンは全ページの下部に共通で表示されるようになります。

考え方はシンプルです。1ページだけに出したいものは記事の中へ。すべてのページに出したいものは、共通パーツであるフッターへ。今回のボタンは後者なので、フッターが定位置というわけです。

※ position: fixed を指定してあるので、フッターに置いても、ボタンは画面の右下に貼りついたまま。読者がどこまでスクロールしても、いつでも押せる場所に待機してくれます。

AD – 読み進める前のひとやすみ

仕上げは、あのCSSが効いてくる

ここで、ひとつ疑問が浮かびませんか。

JavaScriptには window.scrollTo(0, 0)、つまり「先頭に戻れ」としか書いていません。「スーッとなめらかに戻れ」とは、どこにも書いていないのです。

その「なめらかさ」は、以前べつの記事で仕込んでいたひと言が担当ます。

html {
	scroll-behavior: smooth;
}

これは「style.css は最後の切り札」の記事で紹介した、ページ全体のスクロールをなめらかにする設定です。この一文がサイト全体に効いているおかげで、JavaScriptは「先頭に戻れ」と場所を指示するだけでよく、戻り方（なめらかさ）はCSSが受け持ってくれるのです。

scroll-behavior について詳しくは、「style.css は最後の切り札」の記事をどうぞ。

style.css は「最後の切り札」｜ブロックテーマでほとんど使わない理由WordPressのテーマを触りはじめると、必ず出会うのが style.css というファイルです。名前からして「デザインの中心はこれでしょ？」と思いますよね。…

まとめ：HTMLブロックは、コードへの入口

トップへ戻るボタンを、HTMLブロックひとつで作ってみました。

かつては仕切りのない箱にぜんぶ詰め込んでいたものが、WordPress 7.0では、HTML・CSS・JavaScriptという3つの引き出しにすっきり分かれました。「モノ」を入れるHTML、「見た目」を入れるCSS、「動き」を入れるJavaScript。同じひとつのブロックでも、中身が仕切られていると、作るときも直すときも迷いません。

そして、ここがいちばん伝えたいことなのですが——このHTMLブロックは、コードをそのまま書き込める場所です。

ボタンひとつを置く道具にも見えますが、その正体は「自分のアイデアを、コードとして直接サイトに埋め込める窓口」。ここが、あらかじめ用意された部品を並べるだけのノーコードツールとの、大きな分かれ道です。用意された機能の範囲でととのえるのがノーコードなら、HTMLブロックは、その枠の外へ一歩踏み出せる扉なのです。

今は、AIという心強い相棒がいます。「トップへ戻るボタンを作りたい」と相談すれば、3つの引き出しに入れるコードを、一緒に考えてくれます。作りたいものを言葉にできれば、それをコードにする道は、もう開けている。そう考えると、このHTMLブロックひとつでできることは、ぐんと広がって見えてきませんか。

このHTMLブロックを使った、遊び——LINE風の背景エフェクトもよかったらどうぞ😊

【WordPress】HTMLブロック1つで、LINE風の背景エフェクトを実装（季節の演出）プラグインは不要。WordPressの『カスタムHTMLブロック』1つで完結。LINEのトーク画面の背景エフェクトのような、桜や紅葉が舞う演出を自分のブログで再…
最後まで読んでいただき、ありがとうございました🍵