続・ブログのカスタマイズを若干したよ！～最上部へスクロールするボタン設置編～
というわけで、（ここから来た人はなんだ？ってなるか笑）
今日行ったカスタマイズの2個目
「はてなブログ内に最上部へスクロールするボタン」の設置方法についての記事になります。
↓参考画像
一つ読み終えた後に、いちいちフリックやスクロールで戻らずに一気にトップまで上がって他の記事も見たい！なんていうときありませんか？？
ブログ内の記事を多く読んでもらったり、サイドバーにある情報を見直したいときに、このボタンを押すだけで一気に最上部までスクロールするのですごく便利になりますよ♪（いわゆる回遊率を上げる対策というやつなのかな？？）
といっても、ずぼらな性格なのでこれもテキストベースで、、、
（良く分からなかったら参考サイトを見て下さい♪）
前回の記事「お問合せフォームの設置方法について」はコチラ↓
最上部へスクロールするボタン
さて、今度はフォームと違って少しややこしいですよー。
っとその前に、とても大事なことなので先に書いておきます。
この記事を参考にボタンを設置した場合、
はてなブログの無料版をご利用中の方はPC版のみ対応していますのでご注意ください。
スマホ版の画面のカスタマイズは「はてなブログPro」にアップグレードしてからでないとHTMLを触ることができません。
手順（PC編）
- ダッシュボード→設定→詳細設定
- head→コード①を記載する
- デザイン→PC（スパナマーク）→フッター→コード②を記載
- デザイン→PC（スパナマーク）→デザインCSS→コード③を記載
はいっ！（笑）
手順だけ書くとこんな感じです（笑）（アバウトすぎてやべぇ、、、）
ということで、参考サイトにあるコードを使用したボタンの設置方法でした。
以下、参考サイトを紹介しておきます。
記事内中段に、head用のコード①、フッタ用のコード②、CSS用のコード③が順番に記載されています♪コピペして動かせるので、順番を間違えないようにゆっくりやってみてください♪
もし間違えたら、焦らずに保存せずやり直して下さい♪
作業手順その２（スマホ版）
スマホ版は先ほどのPC版の作業の2番まで。headの設定はそのままに、以下の作業を追加します。
- HTMLコードをフッターに記載
- デザインCSSのコードをコピー
- ヘッダー→ページ下→CSSコードを記載
- CSSコードの前後を<style type="text/css">、</style>で囲む
これで、プレビュー画面を確認してください♪
スマホ画面でもスクロールボタンがついているはずです♪
PC版と違って、デザインCSSという欄がないので一瞬困惑しますが、CSSコードを書くよー！とStyleで宣言してあげれば問題がないようです♪（よくわらないけど）
参考サイトはこちら
まとめ
- はてなブログの無料版ではPC画面版しか設置できない
- 設定→詳細設定→headにコード追加
- PC版（スパナマーク）→フッター→HTMLコード追加
- PC版（スパナマーク）→デザインCSS→CSSコード追加
- スマホ版（スマホマーク）→フッタ―にHTMLコードコピー
- スマホ版（スマホマーク）→ヘッダー（ページ下）→CSSコード追加
- <text style="html/css"></style>でCSSコードを囲む
さぁ、これで完成！役に立てればうれしい。
IKEMASKY
