【はてなブログ】ページトップへピュッと戻るボタンを設置しよう

色々なブログで見かける【ページトップへ一瞬で飛べる矢印】を設置したいって思っていませんか？

ページ途中や一番下までいってマウス真ん中ころころで上まで戻るのって結構めんどうなんですよね。

このブログでは右下に【背景茶色で矢印白色】の固定型のアイコンを設置しています。

コレね　

はてなブログではカスタマイズして設置しないといけない部分もあるので初心者さんにはハードルが高く感じちゃいますよね。

しかし読み手にとって便利になるので設置していない人は、この記事通り進めるてサクッと設置しちゃいましょう。

- スポンサーリンク -

【はてなブログ】ページトップへピュッと戻るボタン設置

ページトップへピュッと戻るボタンのデザインは色々あります。

ココではシンプルに丸にへって文字みたいなのでいきます（笑）

コレです。色は変えれるのでご安心を。

トップへ戻る固定ボタン設置

ここで紹介するアイコンは常に出ている固定状態になります。

【レスポンシブ化】設定しているとスマホでも同じ表示になります。

やってないかも！って人はこちらの記事を参考にどうぞ。

【はてなブログ】パソコンとスマホが同じ画面になる設定方法 

 はてなブログカスタマイズ 

はてなブログカスタマイズのほとんどは

• HTMLコード
• CSSコード

をそれぞれの指定場所に記載しますよ

STEP

HTMLコード入れよう

ダッシュボード【デザイン】ー【スパナ】ー【フッタ】

下記のコードをコピペしましょう。（右上のをクリック）

STEP

CSSコードを入れよう

ダッシュボード【デザイン】ー【デザインCSS】

下記のコードをコピペしましょう。（右上のをクリック）
＊背景色：白　文字色：グレーの状態



背景色３桁と文字色6桁のコード一覧はこちらからどうぞ

【カラーコード】WinとMacで共通に存在する216色

STEP

変更を保存

保存をお忘れなく

これにてページトップへピュッと戻るボタンの設定はサクッと完了です。

ご自身のページカラーに合わせて上手く設置できましたか？

ドンドン読み手さんに優しいサイトに育っていきますね。

- スポンサーリンク -

【はてなブログ】ページトップへ戻るボタン設置まとめ

ページトップへ戻るボタンのカスタマイズは色々あります。

初心者さんにとってそれほど難しくなく且つシンプルだけど有ると無いとでは大違いのボタンのご紹介をしました。

はてなブログでのカスタマイズのほとんどが＜HTML＞と＜CSS＞コードになります。

脱初心者さんの1歩になれば嬉しいです。

　

Follow @maysun_53