初心者がブログに「上へ戻るボタン」を付けてみた

ブログを書き始めて約1年半の初心者ハナさんです。

昨日、グローバルメニューとやらをつけた記事を書きましたが、さらに頑張って上へ戻るボタンも付けてみました。

ハナさんアイコンに「TOP」の文字と三角形の矢印。

上へ戻るボタンは2種類作りましたよ。

 

パソコン用

 

スマホ用

です。

分かりやすいかな？

 

もうそろそろ、右下に現れるかな？

 参考にしたサイト

いつも楽しく読ませていただいている、つっちーさん、

www.in-activism.com

が、この記事の中で紹介していたコチラのサイト、

enjoymyblog.hatenablog.jp

です。

ハナさんは5分じゃ出来なかったです。

でも、コピペだけで楽チンでしたよ。

スマホ用はCSSを＜style＞～＜/style＞で囲む

グローバルメニューの時にも書きましたが、ハナさんはレスポンスデザインのテーマを選択していますが、レスポンスデザインとして使っていません。スマホは別のデザインです。だから、スマホ用にも設定しなくちゃいけないんですよね。

 

詳しい人にとっては当たり前のことかもしれませんが、つっちーさんが記事の中で書いているように、スマホ用にコードを書き込むには、CSSを＜style＞～＜/style＞で囲まなければいけません。

 ＜style＞
/* ページトップへ戻るボタン */

※中略※

 

zoom:1;
}
＜/style＞

 こんな感じ。

このCSSをjQueryのコードと一緒に、はてなブログの、

• デザイン設定→スマホ→タイトル下

に書き込みました。

ちなみに、上の「＜」は大文字ですから、コードに書き込む時は半角英数「<」にしてくださいね。

 アイコンを二つ作った理由

アイコンは2つ作りました。

理由は、つっちーさんが、

ユーザビリティにも配慮しないとね！

 と書いていたので、スマホの小さな画面で77×83ピクセルだと、ちょっと邪魔かなぁなんて思ったので、スマホ用はひと回り小さく、49×57にしました。

 スマホ用のはちょっとスリムになってますね。GINPで小さくした時、少し横幅を縮めたからなんですよ。

 

スポンサーリンク

 

 その他にやったこと

スマホ画面には、標準で一番下のところに「上へ」というボタンが有るのですが、コレを消しました。

参考にしたのはこのサイト。

tamasaburo.com

他にも、スマホヘッダー説明文の部分を左寄せにしたり、

はてなブログのスマホサイトのブログ説明文を左寄せにしてキレイに文章を読めるように工夫する設定方法 - tamasaburo

フッダーの「パワードバイはてなブログ」を非表示にしたり、

はてなブログのスマホサイトでフッターに表示される「ブログタイトル」「Powered by Hatena Blog」を非表示・削除して少しでも表示を速くする設定方法 - tamasaburo

しました。

みなさん、スゴイですね。コピペだけでカスタマイズが出来ました。

ありがとうございました。