ぶろぐライフ~パソコン苦手なブログ初心者さんを全力でサポート~

パソコンは苦手だけどブログを始めたい人を全力で応援!15年間パソコン講師を勤めた私が苦手克服のお手伝いをします♪

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

ページトップへ戻るボタン

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

 

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

 

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

コレね ページトップへ戻るボタンのカスタマイズ

 

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

 

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

 

 

- スポンサーリンク -  

 

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

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

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

ページトップへ戻るボタンのカスタマイズコレです。色は変えれるのでご安心を。

 

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

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

 

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

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

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

 

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

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

  • HTMLコード
  • CSSコード

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

STEP
HTMLコード入れよう
ダッシュボード【デザイン】ー【スパナ】ー【フッタ】ページトップへピュッと戻るボタンカスタマイズ

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

STEP
CSSコードを入れよう
ダッシュボード【デザイン】ー【デザインCSS】

ページトップへピュッと戻るボタンカスタマイズ


下記のコードをコピペしましょう。(右上のをクリック)
*背景色:白 文字色:グレーの状態



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

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

STEP
変更を保存
保存をお忘れなく

 

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

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

 

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

 

- スポンサーリンク -  

 

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

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

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

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

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

にほんブログ村 ブログブログ ブログ生活へ 

f:id:maysun:20220106121849g:plain