【超簡単】はてなブログに「TOPへ戻るボタン」を「オリジナル画像」で実装してみた。

本ブログはアフィリエイト広告を利用しています

WEB / アプリ
WEB / アプリ
この記事は約5分で読めます。

こんにちは、とっちゃん@nyanco! です。

今回は、はてなブログに「TOPへ戻るボタン」を「オリジナル画像」で実装する方法をご紹介いたします。

オリジナル画像ではなく、お手軽にアイコンで実装する場合はこちらの記事をご覧ください。
【超簡単】はてなブログに「TOPへ戻るボタン」を実装してみた – 八百万-やおよろず-雑記。

オリジナル画像で実装するのは少し手間がかかりますが、その分自分のページのオリジナリティが出て他のブログと差別化できます。

分かりやすく解説していきますので、良ければチャレンジしてくださいね。

スポンサーリンク

実際どんな感じになるのかというと

こちらのブログでは、TOPへ戻るボタンを画像にしております。

f:id:nyanco696:20170521200936p:plain:w400

こんなやつですね。
今も右下に現れていると思います^^
ツヨキンという、nyanco! オリジナルキャラクターですが、このように画像を用意できればオリジナルのボタンに変更できます。

では早速実装方法です!

【1】まずは各種設定から

【超簡単】はてなブログに「TOPへ戻るボタン」を実装してみた – 八百万-やおよろず-雑記。
↑こちらの記事で、まずは「TOPへ戻るボタン」の設定を済ませて、ボタンが表示されているのを確認してください。

【2】続いて画像を登録

  1. 使用する画像をはてなフォトライフに登録するため、はてなフォトライフへ移動します。
    • はてなフォトライフは、ダッシュボードの上部黒帯の右側にある の中に入り口があります
  2. はてなフォトライフの画面右上にあるアップロードからボタンにしたい画像をアップロード。
    • アップロードする画像は、背景が透明になっているpngデータがベター。
  3. アップロードが完了すると画像が表示されるので、画像にマウスカーソルを載せると出てくる□選択をクリック。
  4. 画像の少し上にあるブログに貼り付けるというボタンをクリックすると、HTMLタグというものが表示されるので、そのコードを丸々コピー。
  5. そのコードを一旦メモ帳やテキストエディタなどにペースト。
  6. <img src="http://img.f.hatena.ne.jp/images/fotolife/n/xx/xx/xx.png">をコピーしておきます。※xxの部分は各ブログによって異なります。

【3】登録した画像を実装!

ダッシュボード > デザイン > カスタマイズ [左上部のレンチのアイコン] > フッタ の記述欄に以下のコードがあるはずなので探してください。
※【1】で記述しているコードです。

//トップに戻るボタンの設定
<div id="page-top">
<a id="move-page-top"><i class="fa fa-arrow-up fa-5x"></i></a>
</div>

上記コードの、

<i class="fa fa-arrow-up fa-5x"></i>

の部分を、【2】-6. でコピーした

<img src="http://img.f.hatena.ne.jp/images/fotolife/n/xx/xx/xx.png">

に差し替えてください。

これで、「TOPへ戻るボタン」が画像に変わっているはずです!

プレビューにて確認できましたでしょうか?
ただ、今のままでは画像のサイズが大きすぎるかもしれません。
画像のサイズを指定しましょう。

先程、コピーペーストした下記のコードの後ろに少し追加記述します。

<img src="http://img.f.hatena.ne.jp/images/fotolife/n/xx/xx/xx.png">

<img src="http://img.f.hatena.ne.jp/images/fotolife/n/xx/xx/xx.png" alt="ページTOPへ" width="90px">

alt="ページTOPへ"は、画像の説明文です。念のため入れておきましょう。
width="90px"は、画像サイズです。この数字を変えるとお好みの大きさに調整できます。

いかがでしたでしょうか?
うまく実装できましたか?
何か不明点などありましたらお気軽にコメントくださいね^^

それでは!

コメント