旅とアロマ

旅とアロマ

五感で楽しむ旅とアロマテラピー

はてなブログ初心者向けのカスタマイズ ~上に戻るボタン~

カスタマイズ第二弾。上に戻るボタンをつけてみました。ここで学んだのは、Webアイコンの使い方です。以前書いた記事を少し訂正して以下にまとめてみました。

f:id:monteverde-aroma:20180609075430p:plain

ページ上に戻るボタン

f:id:monteverde-aroma:20180609072301j:plain

次は、PCやスマホの画面右下にあるボタンを付けてみようと思いました。参考にしたのは、やっぱりMinimal Green さん。デザインは、すでにCSSで記述されていました。

ページ上部へ戻るボタンの設置するには、書いてある「JavaScriptコード」をデザイン→カスタマイズ→フッターの部分に貼り付けるだけでした。

blog.minimal-green.com

 

アイコンWebフォント①

そのままの形でも可愛いのですが、せっかくなので、FontAwesome を使って中の形だけ大好きな飛行機に変えてみることにしました。ここからは「サルワカ」さんにお世話になりました。

saruwakakun.com

「CDNを使う」という方法で、アイコンを使える準備ができました。あとは、コピーしたコードを、HTML内のアイコンを表示させたい位置に貼り付けます。

アイコンWebフォント②

はてなブログで使えるWebフォントもありました。FontAwesome の無料バージョンで見つからなかったアイコンは、こちらのコードを使わせていただきました。

www.foxism.jp

 

初心者のつまづき

上の①も②も、説明通りに行えば使えるはずでしたが、両方ともアイコンが表示されません。HTML編集画面にコードを張り付けても、張り付けても、プレビューで確認した後に消えてしまうのです(泣)。

 

でも、大丈夫!

 

サルワカさんが、この問題を解決してくれています‼︎ それは、iタグの中に を入れることです。

 

<i class="far fa-hand-point-down"></i>  これをiタグといいます。

 

「iタグの中に&nbsp;を入れる」とは、

f:id:monteverde-aroma:20180509005344p:plain

そうすると、勝手に消えるのを防ぐことができるそうです。

 

 はてなブログでFontAwesomeが使えないときの対処法

 

確認方法

このWebアイコンは、編集画面では見ることができませんので、プレビュー画面で確認しながら操作しました。

 

(私にとって)なぞ⁉

 

f:id:monteverde-aroma:20180508220449p:plain

水色の線で示したコードが上のWebフォントのアイコン  です。

 

HTML編集で、オリジナルコード <i class="fas fa-plane"></i> の iタグの中に&nbsp; をいれます。

 

 

でも、コードが読み込まれると       

 

f:id:monteverde-aroma:20180509005545p:plain

きちんと反映されているのですが、< i >(iタグ)は、< p >(pタグ)に変わってしました。サルワカさんも書かれていましたので、そのまま受け入れます(笑)。

 

便利な方法

いろいろ試してみる時に便利なのが「テストブログ」。はてなブログは無料でも複数ブログを持つことができますので、主のブログの他にもう一つ非公開のブログを作って、そこでまず試してみるといいですね。

さらに、その非公開ブログによく使うWebアイコンのコードを張っておくと、コピペするだけで使えて便利です。

表示角度を変える

ボタンができる準備が整ったと思いましたが、もう一つ問題がありました。

f:id:monteverde-aroma:20180508174648p:plain

Webアイコンの飛行機は横向きなのです。これを縦にしなくてはなりません。再度、サルワカさんに頼ることで問題が解決しました。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

 

さあ、いよいよ終盤です。フッターには、Minimal Green さんのコードをコピペさせてもらい、アイコンを表示するための一番上のコードを、以下のようにカスタマイズしました。

 

<p class="pagetop"><a href="#"><i class="fas fa-plane fa-rotate-270"></i></a></p>

 

f:id:monteverde-aroma:20180508175108p:plain

完成です!

長い道のりでしたが、Minimal Greenさんと、サルワカさんのお蔭で無事ボタンが完成しました。パチパチパチ(^^♪ うれしくて、何回も押して遊んでみました。 

色のアレンジ

多くの方が紹介されている、色の名前とカラーコードの見本です。この表を見ているだけで楽しいです。シンプルだけどちょっとガーリーを目指したので、スモーキーな感じの緑・青をベースにピンクをアクセントにしました。

www.colordic.org 

色の設定

先人の方の知恵をお借りして、ブログでよく使う色を、デザインCSSに設定しておきました。これで、いちいち色のコードを調べなくていいので楽です。

 ダッシュボード →  デザイン →  カスタマイズ →  デザインCSS

 

.my-pink {color: #D496A5}
.my-orange {color: #fecb81}

 

まとめ

最初に行ったカスタマイズはこちらです 

 

www.monteverde-aroma.com

カスタマイズすると、自分のブログにさらに愛着がもてるようになりました。少しずつカスタマイズして、育てていきたいと思います。