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

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

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

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

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

footer.phpに記述するコード

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

<div id="scroll-top"><p>先頭に戻る</p></div>

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

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

<div id="scroll-top"><p><span class="icon-circle-up"></span></p></div>

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

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

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

/*--------------------------------------
　　先頭に戻る
--------------------------------------*/
#scroll-top{ /* PCモバイル共通 */
background-color:#55acee;
background-color:#696969;
color:#fff;
font-size:40px;
text-align:center;
position:fixed;
display:none;
margin:0;
border-radius: 40px;
-webkit-border-radius: 40px; /* Safari,Google Chrome用 */
-moz-border-radius: 40px; 
cursor:pointer;
opacity:0.7;
}

@media screen and (min-width: 600px) { /* PC用 */
#scroll-top{
width:80px;
height:80px;
right:20px;
bottom:20px;

}
#scroll-top p{ /* テキスト部分 */
line-height: 87px;
}
}

@media screen and (max-width: 599px) { /* スマホ用 */
#scroll-top{
width:60px;
height:60px;
right:10px;
bottom:10px;
}
 
#scroll-top p{ /* テキスト部分 */
line-height: 67px;
}
}

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