今日は『上に戻るボタン』のお話です。
はてなブログの魅力の一つは色々カスタマイズできることですね。
ただ育児猫はプログラミングスキルがゼロなので
先人たちの知恵をお借りして、コピペコピペの日々です。
うまくいくこともあればうまくいかないこともあります。
- 上に戻るボタン、はてなブログで設置していますか？
- 上に戻るボタン以外でも、カスタマイズって楽しいですよね
- あれ？上に戻るボタンはどこ？
- 上に戻るボタンのコードを確認してみましょう
- はてなブログの先輩たちの方法を片っ端から試してみる
- 上に戻るボタン救世主！デザインも大きさも好きにできます。
- 上に戻るボタンも結局他力本願なんですが
上に戻るボタン、はてなブログで設置していますか？
育児猫はいろいろしています。
特にせっかくブログを訪問してくださった読者の方が読みやすくなるようなカスタマイズは出来るだけ取り入れるようにしています。
その中でも『上に戻るボタン』はかなり初期の段階から設置してました。
育児猫のブログは短くても1000文字。
長い時には3000文字くらいあります。
戻りたいときにすぐに戻れる『上に戻るボタン』は必須だと感じていました。
最初にコピペさせていただいたのが、どなたのどんな記事だったかはわかりません（申し訳ない）
でも最初から使っていた「上に戻るボタン」は見た目も機能も申し分なく、気に入っていました。
上に戻るボタン以外でも、カスタマイズって楽しいですよね
その後も「上に戻るボタン」以外の様々なカスタマイズに手を染めてきました。
ざっくりまとめると
・グローバルナビゲーション
・スマホボトムナビゲーション
・サイドバー固定
といったところです。
本当はヘッダ下にお勧め記事を貼りたいのですが、胸を張ってお勧めできるほどの記事がまだ少ないのでためらっています。
育児猫のカスタマイズは『コピペが基本』の他力本願カスタマイズです。
それでもカスタマイズすると、少しずつ自分のブログが自分の思う形に近づいてくるので、妙な快感がありますね。
あれ？上に戻るボタンはどこ？
育児猫は普段ブログを書くとき、ｐｃを使っています。
ｐｃならそこまで「上に戻るボタン」必要としないんですよね。
育児猫は今年の夏にスマホに変えたばかりで、操作もあまりわかっていませんし、目が疲れるからスマホは苦手です。
ですが先日、出先でブログを確認したところ『あれ？上に戻るボタンがないよ』となったのです。
原因は後からつけたボトムナビゲーション。
これがあることで、スマホの方でも見やすくなるんですが、（あ、全くつぶやけていなツイッターをどうしたらいいかは考え中）これの裏に「上に戻るボタン」が隠れちゃってるんですねぇ。
上に戻るボタンのコードを確認してみましょう
「上に戻るボタン」は
『設定→詳細設定→<head>要素にメタデータを追加』
『デザイン→スパナマーク→フッタ』
『デザイン→スパナマーク→デザインＣＳＳ』
にコードを追加していました。
で、それぞれ見てみるんだけれど、ちんぷんかんぷんです。
多分どれかの数字を増やすことで、「上に戻るボタン」の位置を上にあげれるんだろうけれどという推測をするので精一杯。
あまり適当にいじると何が何だか分からなくなるので、とりあえずバックアップはしっかりとってから、「上に戻るボタン」のコードをすべて消しました。
基本的にアナログな育児猫は、なんでも手当たり次第試してみるのだ。
はてなブログの先輩たちの方法を片っ端から試してみる
いろんな方のサイトを参考に、５回ほど「上に戻るボタン」のコードを貼りなおしてみたのですが、どうにもうまくいきません。
そもそも「上に戻るボタン」が表示されなかったり、スマホにだけ表示されなかったり。
表示されても低すぎて結局見えなかったり。
せめてコードのどの数値が何を意味しているか分かればなんとかなりそうなんだけど。
ほとんどのサイトで、「色や形、大きさを変更するのはココ」と書いて下さっているのですが、育児猫が知りたい「上に戻るボタンの位置を変える方法」がわからないのです。
おそらく皆さん、こんなにアナログな人間がカスタマイズに挑戦することを前提にされていないんだろうなぁ。
申しわけない。
上に戻るボタン救世主！デザインも大きさも好きにできます。
いろいろ試すこと２時間。
ついに育児猫は「上に戻るボタン」の救世主に出会ったのです。
それがこちら
simadzuさんの上に戻るボタン設置法をまとめてある記事です。
何が素晴らしいって、コードの横に説明書きがあること。
どの数値が何を表しているのかわかるんです。
更に、『デザイン→スパナマーク→フッタ』の一か所に貼るだけでＰＣ・スマホどちらにも表示されます。
しかも！ちゃんと「上に戻るボタン」が最初からボトムナビゲーションに隠れない位置に出てる！
おぉ。結局育児猫がいじったのは色だけで済みました。
素晴らしい！
simadzuさんありがとうございました！
ちなみに
↑の記事でも同じくsimadzuさんにお世話になっております。
すごい賢い方なんだろうなぁ。
ひそかに尊敬申し上げております。
上に戻るボタンも結局他力本願なんですが
こうやって他の方のブログに助けられながら、完成させていくのもはてなブログの醍醐味かな？って思います。
それにしてもたくさんの方が、専門知識を惜しげもなく披露してくださっているのには
感謝しかありません。
この場を借りてお礼申し上げます。
今日も最後までお読みいただきありがとうございました。
ランキング参加してます
↓が育児猫のやる気スイッチになっております
