カスタマイズ第二弾。上に戻るボタンをつけてみました。ここで学んだのは、Webアイコンの使い方です。以前書いた記事を少し訂正して以下にまとめてみました。
ページ上に戻るボタン
次は、PCやスマホの画面右下にあるボタンを付けてみようと思いました。参考にしたのは、やっぱりMinimal Green さん。デザインは、すでにCSSで記述されていました。
ページ上部へ戻るボタンの設置するには、書いてある「JavaScriptコード」をデザイン→カスタマイズ→フッターの部分に貼り付けるだけでした。
アイコンWebフォント①
そのままの形でも可愛いのですが、せっかくなので、FontAwesome を使って中の形だけ大好きな飛行機に変えてみることにしました。ここからは「サルワカ」さんにお世話になりました。
「CDNを使う」という方法で、アイコンを使える準備ができました。あとは、コピーしたコードを、HTML内のアイコンを表示させたい位置に貼り付けます。
アイコンWebフォント②
はてなブログで使えるWebフォントもありました。FontAwesome の無料バージョンで見つからなかったアイコンは、こちらのコードを使わせていただきました。
初心者のつまづき
上の①も②も、説明通りに行えば使えるはずでしたが、両方ともアイコンが表示されません。HTML編集画面にコードを張り付けても、張り付けても、プレビューで確認した後に消えてしまうのです（泣）。
でも、大丈夫！
サルワカさんが、この問題を解決してくれています‼︎ それは、iタグの中に を入れることです。
<i class="far fa-hand-point-down"></i> これをiタグといいます。
「iタグの中に を入れる」とは、
そうすると、勝手に消えるのを防ぐことができるそうです。
確認方法
このWebアイコンは、編集画面では見ることができませんので、プレビュー画面で確認しながら操作しました。
（私にとって）なぞ⁉
水色の線で示したコードが上のWebフォントのアイコン です。
HTML編集で、オリジナルコード <i class="fas fa-plane"></i> の iタグの中に をいれます。
でも、コードが読み込まれると
きちんと反映されているのですが、< i >（iタグ）は、< p >（pタグ）に変わってしました。サルワカさんも書かれていましたので、そのまま受け入れます（笑）。
便利な方法
いろいろ試してみる時に便利なのが「テストブログ」。はてなブログは無料でも複数ブログを持つことができますので、主のブログの他にもう一つ非公開のブログを作って、そこでまず試してみるといいですね。
さらに、その非公開ブログによく使うWebアイコンのコードを張っておくと、コピペするだけで使えて便利です。
表示角度を変える
ボタンができる準備が整ったと思いましたが、もう一つ問題がありました。
Webアイコンの飛行機は横向きなのです。これを縦にしなくてはなりません。再度、サルワカさんに頼ることで問題が解決しました。
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
さあ、いよいよ終盤です。フッターには、Minimal Green さんのコードをコピペさせてもらい、アイコンを表示するための一番上のコードを、以下のようにカスタマイズしました。
<p class="pagetop"><a href="#"><i class="fas fa-plane fa-rotate-270"></i></a></p>
完成です！
長い道のりでしたが、Minimal Greenさんと、サルワカさんのお蔭で無事ボタンが完成しました。パチパチパチ(^^♪ うれしくて、何回も押して遊んでみました。
色のアレンジ
多くの方が紹介されている、色の名前とカラーコードの見本です。この表を見ているだけで楽しいです。シンプルだけどちょっとガーリーを目指したので、スモーキーな感じの緑・青をベースにピンクをアクセントにしました。
色の設定
先人の方の知恵をお借りして、ブログでよく使う色を、デザインCSSに設定しておきました。これで、いちいち色のコードを調べなくていいので楽です。
ダッシュボード → デザイン → カスタマイズ → デザインCSS
.my-pink {color: #D496A5}
.my-orange {color: #fecb81}
まとめ
最初に行ったカスタマイズはこちらです
カスタマイズすると、自分のブログにさらに愛着がもてるようになりました。少しずつカスタマイズして、育てていきたいと思います。