はてなブログで "上に戻るボタン" のアイコンを好きな画像に変える方法

こないだ、ブログデザインをいじいじしておりまして。というのも「上に戻るボタン」のアイコンを好きな画像に変えたいなと思って試行錯誤してました。

 

上に戻るボタン、たいていのブログにありますよね。ページをある程度下にスクロールしたらスッと右下に出てくる奴。ぽちっとクリックするとページの一番上までギューンて戻る。

 

試行錯誤の末、うまくいったので、備忘録として記事書くことにしました。同じようにしたくて困ってる誰かの役にも立ったらいいな。

 

 もくじ~

 

 

ではいきます!

 

上に戻るボタンを設置する

僕は えむしとえむふじん さんのブログ記事を参考にしました。htmlとCSSの記述に「ボタンの色」とか説明書きが多くあって、とてもわかりやすかったです。ありがとうございます。

 

blog.mshimfujin.net

 

まずはえむしさんの言う通りに、コードをコピペしていきます。

 

そして自分のブログの右下に、上に戻るボタンがちゃんと出るか確認してください。

…出ました?なら次。

 

使いたい画像のURLをコピーする

①上に戻るボタンで使いたい画像を、「記事を書く」画面の「+写真を投稿」で、投稿する

 

f:id:kotoba2kai:20171009222941j:plain

 

②新たにウィンドウを開いて、「はてなフォトライフ http://f.hatena.ne.jp/」のページへ。

 

マイフォト→Hatena Blog→さっき投稿した写真 の順にクリック

 

f:id:kotoba2kai:20171009224240j:plain

       ↓

f:id:kotoba2kai:20171009224305j:plain

       ↓

f:id:kotoba2kai:20171009224334j:plain

 

 

画像の上にマウスのポインターをもってきて、右クリック

「画像アドレスをコピー(C)」をクリック

 

f:id:kotoba2kai:20171011034404j:plain

 

 

これで、使いたい画像のURLをコピーできました。メモ帳とかにペーストしておいてください。

 

 

フッタのhtmlを一部変える

次です。フッタのhtmlの一部を変えるので、その画面までいってください

ユーザー名→デザイン→カスタマイズ(スパナマーク)→フッタ→白い枠

 

f:id:kotoba2kai:20171009225628j:plain

       ↓

f:id:kotoba2kai:20171009225659j:plain

 

htmlの記述が出てきたら、最終列のやつ、見て下さい

 

<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-up fa-3x" aria-hidden="true"></i></a>

 

これ見つかりました?これの、次の赤字の部分を変えます。

 

<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-up fa-3x" aria-hidden="true"></i></a>

 

以下の記述に変えて下さい↓

<img src="画像のURL" aria-hidden="true"/>

  んでさっきメモ帳にコピペしておいた画像のURLを、赤字の部分にコピペ。

 

aria-hidden="true" の部分は消しても問題なかったのですが、あっても問題ないのでつけときました僕は。ネットで意味を調べてもよくわからなかったんですよね。

 

 

デザインCSSを一部変える

最後ですよ~

まずデザインCSSの記述画面までいってください。カスタマイズ(スパナマーク)のデザインCSS→白い枠 の順にクリック

 

f:id:kotoba2kai:20171010111953j:plain

 

 

えむしさんのコード出てきますよね。変える所赤字にしますね。

 

/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:7px;
right:7px;
padding:10px 12px;
color: #353535; /* 文字色 */
font-size:16px;
text-decoration:none;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 4px 4px;
border: 3px solid #c9c19f; /* ボーダーの色 */
border-radius: 50%; */ボタンの丸み */
opacity: 0.6; /* ボタンの透明度 */
z-index: 99;
}

/* ページトップへ戻るボタン:ホバー時 */
#pagetop:hover {
color: #ffffff; /* 文字色 */
background:#c9c19f; /* 背景色 */
}

 

3ヶ所あります。

 

・padding: 10px 12px; → 消す(余白が消える)

・16px → 0px に変更(画像下の枠線が消える)

・border: 3px solid #c9c19f; /*ボーダーの色*/ →消す(枠線消える。枠線残したかったら消さないでいいですよ。黒の枠線がよかったら#c9c19f → #000000 に変えてね)

 

できました?今多分、画像が画面いっぱいに出てると思うんですけど、サイズを変更します。えむしさんのコードの続きに、以下をつけ足してください。

 

#pagetop img {
width:100px;
height:100px;
}

すると、画像のサイズがちっちゃくなります。widthは横幅、heightは縦幅。もう少し大きくとか小さくとかしたかったら、「100px」を200pxとか70pxとかに変えてみてください。

 

以上でございます!!いけました?わからないとかあったら記事下の「コメントを書く」からお願いします。

ではではまた!