本題に入る前に、３つ目のブログを立ち上げたことを
報告いたします。こっちでスピリチュアル系の内容を
ずっと書いておりましたが、一層のこと特化した内容を
（現在は閉鎖しております）
上に戻るボタン。
本題です。以前、こちらで上に戻るボタンの装着法を掲載しましたが
あれは、もう古い上に難しいので
新しいブログを立ち上げたのをきっかけに、新しくやりやすい
方法を見つけました。
こちらの方の方法が、一番分かりやすかったな。
HTMLとCSSで最近は上手く出来るのかと、目から鱗でした。
前はjQueryを使っていましたけど、こっちの方が大分簡単です。
なので、前の記事はこの記事更新後に削除しました。
ここの上に戻るボタンは、そのjQueryを使っていたものです。
新たに2018年当時の方法でやっても、現在は動きませんのでね（；^ω^）
あれから、はてなブログも大分変ってきてますしね。
３つ目のブログの見出しラインを設定して、上に戻るボタンとか
色々設定しまくってました。
コード貼るのも２か所でOK
まず、ダッシュボードに辿り着いたら
パレットマークを、クリックしましょう。
次に↓青い丸で囲っているスパナマークをクリックすると
以下の項目が出てきます。
↑の赤い丸で囲っているフッタと、下の画像の赤い丸で囲っている
デザインCSSに、今回タグを貼り付けます。
デザインCSSはフッタの下なので、スクロールしましょう。
３つ目のブログにて使用しているのは、追従するボタンです。
ちょっと見づらいかな（；^ω^）右下に黒の→を
つけたけどこれです。
以下のHTMLコードは、フッタに貼り付けてください。
<a href="#" id="page-top"><i class="blogicon-chevron-up"></i></a>
他にも色など変えられるようなので、色のコードが分からない方は
こちらを参考にしましょう。
以下のCSSコードは、CSSデザインの項目に貼り付けてください
/***追従するトップへ戻るボタン***/
#page-top {
position: fixed;
right: 10px;
bottom: 10px;
font-size: 1.2rem;
line-height: 1.2rem;
background: #fff;
color: #737373;
padding: 10px;
border: solid 1px;
border-radius: 50%;
box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2);
}
/***トップへ戻るボタンここまで***/
色を変更する箇所は、↑青文字のところです。ここを例えば
バイオレットに変更したいなと思った場合は、#ee82eeがカラーコードです。
【重要】忘れてはいけない！保存しましょう
コード貼り付けた～と、安心しきってこれをやり忘れては
何もなりませんｗ
変更を保存して、戻りましょう。
実は、筆者はやらかしたことあるからねぇ（；^ω^）
見出しラインは、ここを参考
デザインテーマによっては、見出しのラインが無い場合があります。
このブログに使用しているデザインテーマは、見出しのライン付き
だったので、いじる必要が無かったけどね。
見だしのラインが無いと分かりにくいので、分かりやすくする
ためにも、見出しラインが無い場合は付け加える必要があります。
↑のブログ記事は、CSSのコピペだけで済みますので非常に判りやすかった。
ただ、付け加えるとしたら…
中見出しと小見出しのタグはh1ではありません。
（例）
h1 {
/*線の種類（実線） 太さ 色*/
border-bottom: solid 3px black;
}
赤い文字のところを、変更しないといけません。
中見出しはh4に変更して、小見出しはh5に変更しておきましょう。
↑因みに、色はblackをblueにしたりredにしたりもできます。
締め。
ここのブログは、現在はまだ検討中なのですが
ひょっとしたら、閉鎖する可能性があるとだけ伝えておきます。
このはてなブログは、色々カスタマイズしたら面白いです。
そういう意味では、デザインスクールでHTMLやらCSSは勿論だけど
色々習ったのは正解だったけど…私は向いてないですｗ
もっといじり倒したい方は、wordpressだといじり倒せますｗ
では、またです。
