ページトップに戻るボタンを表示させたいけど、他の記事に書かれたやり方だと自分のブログに反映されないんだよね
ページの一番下に設置しないで、右側に固定表示させたい！
今回の記事はそういった悩みを抱えている人におすすめの記事です。
私自身、いろいろな記事を見て試してみましたが自分のブログテーマ（DUDE）に合わないせいか、コピペしてみても上手く反映されませんでした。
そういった経緯から今回は、主に【DUDE】のテーマを使っている人向けにページトップに戻るボタンを紹介したいと思います。
【コピペでOK！】ページトップに戻るボタンを右下に固定表示させる方法
では、さっそくコードについて紹介したいと思います！
下のコードを【デザイン】→【カスタマイズ】→【デザインCSS 】に張り付けてください。
/* テーブル全体 */
.ta02 {
border: solid 2px #ffffff;
margin: auto;
}
/* ボタンリンク下部分 */
.btn000 {
text-decoration: none;
background: #FFA500;
text-align: center;
}
.btn000 a {
text-decoration: none;
background: #FFA500;
color: white;
font-weight:bold;
}
.btn000:hover a {
text-decoration: none;
color: red;
}
/* ボタンリンク上部分 */
.tt00 {
font-size: 90%;
color: black;
text-align:center;
}
/* 上に戻るボタン */
#page_top{
width: 90px;
height: 90px;
position: fixed;
right: 0;
bottom: 0;
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 90px;
height: 90px;
text-decoration: none;
}
#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 400;
content: '\f0a6';
font-size: 25px;
color: black;/*#3f98ef*/
position: absolute;
width: 25px;
height: 25px;
top: -40px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
#page_top a::after{
content: 'PAGE TOP';
font-size: 13px;
position: absolute;
top: 45px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
color: black;/*#3f98ef*/
}
少し長いコードなので、コピー範囲の間違えだけ注意してください。
コードの説明＆カスタマイズ箇所
さて、簡単に上記のコードの説明+ボタンの形のカスタマイズに関して説明したいと思います。
「ボタンリンク」とはーーーのことで、その下にある「テーブルで全体」は、ーーーを指しています。ここでカスタイズする項目は、枠線の色・太さぐらいだと思います。
枠線の色は斜体ボタンに関する記事でも書いたように、カラーコード一覧表で好きな色に変更してください。変更箇所は、#ffffffの部分です。
続いて、7行目にある下部分はーーーのことを指しています。
カスタマイズ箇所は、ーーーのーーー個です。
それぞれ（変更箇所）
次のボタンリンク上部分は、ーーーのことです。
最期に上に戻るボタンの説明です。
DUDEではこれから紹介するコードで上手く反映しましたが、他のテーマに関しては試したことがないため上手く反映されるかは正直分かりません。
自分のブログで上手く反映されなかった場合はブログテーマをコメント欄で教えてもらえると嬉しいです。