ワードプレスでページの先頭に戻るボタンをプラグインなしで設置する方法

この記事は 2 分くらいで読めます
 

こんにちは。豆太です。

ワードプレスのページの右下でよく見かける「ページの先頭に戻るボタン」を設置してみました。記事のボリュームが大きくなると先頭まで戻るのって意外と手間になるんですよね。ある方が読者さんに親切なのは間違いないです。

この記事は備忘録として当ブログの目次関連部分のコードを記録しておくものです。コピペと微調整をして、ぜひ導入してみて下さい。

ちなみに、このブログはWordPressの公式テーマ「Twenty Twelve」をベースにカスタマイズしています。他のテーマにも応用可能です。

それでは、さっそく説明していきます。

スポンサーリンク

footer.phpに記述するコード

忘れずにバックアップを取った上で以下のコードを記述します。

これは基本形です。<p>○○○</p> の部分を自由に変更できます。

ちなみに当ブログではウェブフォント「IcoMoon」を利用して次のように記述しています。

あえて文字は使わずに記号だけのデザインにしています。(ウェブフォントの導入方法はこちら

当ブログの実際のCSSコード

次にCSSで見た目を整えます。以下は実際に当ブログで使っているコードです。

ここではPCとモバイル端末でそれぞれに合った表示をしています。

これは画面幅が600px以上の場合(つまりPCやタブレット)

これは画面幅が599px以下の場合(スマートフォン)

をそれぞれ意味しています。これはかなり使えるので、覚えておくことをおすすめします。ブログを始めるまでCSSのことを何も知らなかった僕でも今では自由に使いこなしています。

(ブラウザのウィンドウ幅やiPhoneやiPadの画面幅を参照できる便利なサイトをこちらの記事で紹介しています。→ ワードプレスのカスタマイズに役立つサイト3.5個

スポンサーリンク

ワードプレスでページの先頭に戻るボタンをプラグインなしで設置する方法」への1件のフィードバック

.コメントをどうぞ