生き様と空|新卒社員(4月から)の苦闘ブログ

広告業界へ進出した新卒社会人のブログ。業界の荒波に揉まれながら、プロデューサーへの道を歩む成長記録。アドセンス奮闘中

【スポンサーリンク】

続・ブログのカスタマイズを若干したよ!~最上部へスクロールするボタン設置編~

というわけで、(ここから来た人はなんだ?ってなるか笑)

今日行ったカスタマイズの2個目

「はてなブログ内に最上部へスクロールするボタン」の設置方法についての記事になります。

 

↓参考画像 

f:id:etudiants20north14star:20161231204408p:plain

 

一つ読み終えた後に、いちいちフリックやスクロールで戻らずに一気にトップまで上がって他の記事も見たい!なんていうときありませんか??

 

ブログ内の記事を多く読んでもらったり、サイドバーにある情報を見直したいときに、このボタンを押すだけで一気に最上部までスクロールするのですごく便利になりますよ♪(いわゆる回遊率を上げる対策というやつなのかな??)

 

といっても、ずぼらな性格なのでこれもテキストベースで、、、

(良く分からなかったら参考サイトを見て下さい♪)

 

前回の記事「お問合せフォームの設置方法について」はコチラ↓

ikizamasky-14.hatenablog.com

 

 

最上部へスクロールするボタン

さて、今度はフォームと違って少しややこしいですよー。

 

っとその前に、とても大事なことなので先に書いておきます。

この記事を参考にボタンを設置した場合、

 

はてなブログの無料版をご利用中の方はPC版のみ対応していますのでご注意ください。

 

スマホ版の画面のカスタマイズは「はてなブログPro」にアップグレードしてからでないとHTMLを触ることができません。

 

手順(PC編)

  1. ダッシュボード→設定→詳細設定
  2. head→コード①を記載する
  3. デザイン→PC(スパナマーク)→フッター→コード②を記載
  4. デザイン→PC(スパナマーク)→デザインCSS→コード③を記載

 

はいっ!(笑)

手順だけ書くとこんな感じです(笑)(アバウトすぎてやべぇ、、、)

ということで、参考サイトにあるコードを使用したボタンの設置方法でした。

以下、参考サイトを紹介しておきます。

 

記事内中段に、head用のコード①、フッタ用のコード②、CSS用のコード③が順番に記載されています♪コピペして動かせるので、順番を間違えないようにゆっくりやってみてください♪

 

hatebumaru.hatenablog.com

 

もし間違えたら、焦らずに保存せずやり直して下さい♪

 

 

 

作業手順その2(スマホ版)

スマホ版は先ほどのPC版の作業の2番まで。headの設定はそのままに、以下の作業を追加します。

  1. HTMLコードをフッターに記載
  2. デザインCSSのコードをコピー
  3. ヘッダー→ページ下→CSSコードを記載
  4. CSSコードの前後を<style type="text/css">、</style>で囲む

 

これで、プレビュー画面を確認してください♪

スマホ画面でもスクロールボタンがついているはずです♪

 

PC版と違って、デザインCSSという欄がないので一瞬困惑しますが、CSSコードを書くよー!とStyleで宣言してあげれば問題がないようです♪(よくわらないけど)

 

 参考サイトはこちら

www.interest-blog.com

まとめ

  • はてなブログの無料版ではPC画面版しか設置できない
  • 設定→詳細設定→headにコード追加
  • PC版(スパナマーク)→フッター→HTMLコード追加
  • PC版(スパナマーク)→デザインCSS→CSSコード追加
  • スマホ版(スマホマーク)→フッタ―にHTMLコードコピー
  • スマホ版(スマホマーク)→ヘッダー(ページ下)→CSSコード追加
  • <text style="html/css"></style>でCSSコードを囲む

 

さぁ、これで完成!役に立てればうれしい。

 

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

 
世界一やさしい ブログの教科書 1年生

世界一やさしい ブログの教科書 1年生

 

 

 

 

IKEMASKY