ブログデザイン備忘録～ アイコンの変更
本ブログではサイドバーのリファレンスと上に戻るボタンの矢印にFontAwesomeのアイコンを使用していたが、自分のchrome環境では読み込みができなくなっていたため、今回ははてなのblogiconに統一することにした。 ちなみにFirefoxやSafariでは表示できていたので、chromeの証明書エラーに起因するものと思われる。
以前アイコンを変更した際は、リファレンスを除いてblogiconにしていた。(blogiconについても以下参照)
今回はリファレンス部分もblogiconにして以下のようにデザインCSSを変更した。
/*----HTML----*/ .hatena-module-html .hatena-module-title:before { font-family: "blogicon"; content: '\f019'; position: relative; left : -0.1em; }
上に戻るボタンについては、以下の記事のように設定している。
本ブログではフッタ部に上に戻るボタンのHTMLを記述しているので、その部分をblogicon用に以下のように書き換える。
<div id="page-top" title="トップへ"> <a id="move-page-top"><i class="blogicon-chevron-up lg"></i></a> </div>
ヘッダ部に記述していたFontAwesomeのロードするためのHTMLコードは削除する。また、jQueryは利用するので以下の部分はそのまま残す。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
なおjQueryの読み込み先は、以下の記事のように当初のものから変更している。
次にblogiconの矢印のサイズが小さいため、大きく表示するため以下のようにデザインCSSのfont-sizeで指定する。
#page-top a{ color: #3f98ef; /*色設定*/ font-size:300%; /*サイズ設定*/ }
FontAwesomeを読み込まないだけ、少しページの読み込みが早くなることを期待したがPageSpeed Insightsの評価ではあまり変わらなかった。（はてなブログのデフォルトの読み込み時間の割合が大きい）
