何だっけ?ブログ

「あれって何だっけ?」と思ったことを詰め込んでおります。

はてなブログに『ページTOPへ戻る』ボタンをつけてみた

ブログ初心者のナンが、このはてなブログをちょこちょこカスタマイズしているのですが、今日は『ページTOPへ戻る』ボタンを追加してみます。

 

『ページTOPへ戻る』ボタンとは?

ウェブページによくある右下にあるアレです。

トップページに戻るのではなく、そのページの一番上に戻る機能です。

 

記事を読み進めていくと、もう一度上のほうに戻って読み直したい時ってありますよね。カスタマイズ記事を読んでるときなんてしょっちゅうです。

 偉大な先輩方のブログには大抵『ページTOPへ戻る』ボタンがついています。(さすが!)

見る人のために考えられた機能なのでつけておいて損はないと思いました。

 

早速マネしてみよう

はいはい私は超初心者ですよ、HTMLとかCSSとかコードって言われてもちんぷんかんぷんですやん。

 そんな時に偉大なパイセン達が「コピペOK」の記事をいろいろ書いてくださっています。ほんとありがたいですね(#^^#)

 ナンが参考にさせていただいたのはこちらです

nohack-nolife.hatenablog.com

とてもわかりやすく説明されているので簡単にできましたよ。

読み進める通りにやっていくと大丈夫だと思います。

その後私は文字の文章、色を自分のブログに合うように変更しました。

↓↓

f:id:Rmade:20180525103516p:plain

 私のフッタの変更箇所

●文字の文章の変更

元「 ページTOPへ ▲ 」

     ↓↓

私「 TOP▲ 」

文字数を少なくすることで横幅が自動的に短くなってくれました。

 

私の{}デザインCSSの変更箇所

●フォントサイズの変更

元「 font-size:20px; 」

     ↓↓

私「 font-size:10px; 」

 PCで見るにはそのまま20pxでいいのですが、スマホで見た場合ちょっと大きすぎるので10pxくらいで落ち着きました。

( 私はレスポンシブデザインモード≪スマートフォンでもPCと同じデザインになる≫)

●四角い部分の色の変更

元「 background:#000; 」

     ↓↓

私「  background:#7cc9ca; 」

色見本は上記の紹介ブログにものっているこちらのサイト

www.colordic.org

 でもいっぱいありますが、ナンはAdobe illustratorCC をよくつかっているのでそっちのソフト内で選んでいます(^^♪

 

 カラーコードでちょっと覚えておいたほうがいいのが

黒 #000 (または #000000)

白 #fff (または #ffffff)

の二つです。

CSSとかHTMLとかよくわからないけどコピペで結構カスタマイズできます。

でも、「色だけは変更したいんだよな~」って時にこの二つを知っていたら作業がはかどるかも。

デフォルトで黒や白がよく使われているので、色を変更したい時にCSSの中に「あっ、ここ黒なんだ」って気づきやすい(^^♪

 

さいごに

コピペのコードでもちょっと色だけイジるだけでガラッと印象が変わります!

初心者がコードを触って取り返しのつかない事になったら怖い!と不安な方もいるかもしれませんが、そういう場合はもともと自分のブログにあるCSSコードをコピーしてメモ帳にでも張り付けて保存しておくと安心ですよ。

それにはてなブログのカスタマイズ画面はプレビュー画面を見ながらできますし、「変更を保存する」ボタンを押すまでは変更されないので安心です。

(逆にCSSにペーストしたあとボタン押し忘れが多い私…)