mitopi はてなブログ版

肩こりのお悩み中心にアラサー女子の興味あることまとめます。

はてなブログPro「Topに戻る(上に戻る)」ボタンをコピペで設置してみた

スポンサードリンク

ブログの文章が長いとき、

下の方にスクロールした後、

パッと画面の一番上に戻りたい

と思うことがあります。

 

ワードプレスでは、

もともと

「ページトップに戻る」ボタンが

実装されているテーマもあるのですが、

 

はてなブログの場合、

自分で「デザイン」のところを

編集する必要があります。

 

調べたところ、

ブログの画面上で

「ページトップに戻る」ボタンを

表示するには、

 

他の方が作成された

ブログ記事にあるコードを

そのままコピペしたらいいことがわかりました。



しかし、素人の私には

原因がわからないのですが、

コピペするだけでは残念ながら

うまく反映されないものもありました。

 

そんな中、本当にコピペするだけで

ボタンが表示されたブログ記事を紹介します。

「トップに戻る」ボタンを実装するのに参考にしたブログ

今回、

私は「トップに戻る(上に戻る)」ボタンを

はてなブログ上に表示する設定をしました。

 

そのとき、このサイトを参考に設定したら、うまくいきました↓

blog.mshimfujin.net

 

本当に上記のブログ記事の通りに

コピペしたらできたので、

 

特にこちらには書くことがなくなったのですが、

 

ついでだったので、

スマホの方も一緒に設定しました。

スマホで「トップに戻る」ボタンを設置するときの注意

注意点1 スマホのデザイン設定にはCSSの項目がない

デザイン>スマートフォン

と選択したとき、

PCとは違い

スマホにはCSSを編集する箇所がありません。

 

なので、スマホでパソコンと同じような

「トップに戻る」ボタンを実装したければ、

 

デザイン>スマートフォン>ヘッダ>タイトル下

こちらにCSS用コードを

張り付ける必要があります。

 

しかし、貼り付けるだけでは

CSSコードであることが認識されないので、

CSSコードをタイトル下の

HTMLの箇所に貼り付けた後、

<style></style>でCSSコードをはさみ込む必要があります。

 

注意点2 スマホはスマホで「fontawesome」を呼び出す必要がある

リンク先の記事の冒頭に「fontawesome」を呼び出すためのコードの記載があります。

パソコンのヘッダのタイトル下に貼り付けて満足せず、

スマホの設定がしたいときは、

 

デザイン>スマートフォン>ヘッダ>タイトル下

こちらにも「<link rel ~」で始まるコードをコピペしておく必要があります。

 

そうしないと、

こんな風に〇だけが表示されて、

「トップに戻る」ボタンなのかどうか

目で見て分からないです。

f:id:EnjoyFreeApp:20170722235931p:plain

 

デザイン>スマートフォン>ヘッダ>タイトル下

 に「fontawesome」を呼び出すためのコードを記載した後、

設定を保存したらきちんとこのように表示されました。

f:id:EnjoyFreeApp:20170723000126p:plain

 

なので、スマートフォンで「トップに戻る」ボタンを表示させたければ、

パソコンとまったく同じ手順を踏むのですが、

 

パソコンでいうCSSは、スマートフォンのヘッダ>タイトル下に代わりに記述

スマホのヘッダにCSSコードを書くときは<style></style>ではさみ込む

 

以上2点がパソコンとスマホで違う点でした。