ホーム / フッター /

Bloggerブログ|simplify2|フッターのアイコンを変更！非表示になったアイコンを再表示！

fontawesome simplify2 アイコン タイトル フッター

投稿2019年1月27日 更新

　テンプレートsimplify2で使用されているアイコンはfontawesome4対応のため、fontawesome5用のCDNに変更するとフッターに設置されているアイコンが非表示になってしまいます。
　このページではこの非表示になったフッターのアイコンを再度表示させてみたいと思います。


　関連記事
fontawesome5のアイコンが使えるようにCDNを変更
fontawesoem4のCDNを変更した際に非表示になったアイコンを再表示する方法

もくじ


コードの記述場所の確認


  1. 「テーマ」→「HTMLの編集」をクリック
  2. 検索窓に「Custom Heading Widget」もしくは「.footer-column .footer-menu h3:before」と入力

　以下の赤文字部分を変更するとアイコンを表示することができます。次項で一つ一つ確認していきます。
フッター部分のアイコンを一括で管理しているところ 　
.footer-column .footer-menu h3:before{
content:'\f07c';
font-family:fontawesome;
font-weight:normal;
display:inline-block;
margin:0 5px 0 0;
color:#95a5a6}


左のアイコン（代用できそうなアイコン　f14a　f058） 　
.footer-column .footer-menu:nth-child(1) h3:before{content:'\f046';}


中央のアイコン 　
.footer-column .footer-menu:nth-child(2) h3:before{content:'\f085';}


右のアイコン（代用できそうなアイコン　f0e0） 　
.footer-column .footer-menu:nth-child(3) h3:before{content:'\f003';}

変更点


　中央のアイコンはそのままのユニコード（f085）でも表示されますが、左右のアイコンはfontawesome5になり削除されたため、他の似た形のアイコンで代用するしかありません。
　さらにfontawesome5では、font-weightの値は使用するアイコンのスタイルによって変わるため、フッターの3つのアイコンのスタイルがそれぞれ違う場合は各アイコンごとにfont-weightを指定しなければなりません。
　まずは似た形のアイコンで代用し再表示させてみたいと思います。

font-familyの変更



font-family:fontawesome;
font-family:"Font Awesome 5 Free";

font-weightの変更



font-weight:normal;
font-weight:900;

アイコンのコードの変更



f046
f14a
f085
f085
f003
f0e0

結果




　表示されましたがベタ塗りになってしまいました。

　試しにfont-weightの値を300にしてみます。
font-weight:900;
font-weight:300;


　左右のアイコンは元のデザインに近くなりましたが、今度は中央のアイコンが非表示になってしまいました。
　この非表示になったアイコンを表示するために、font-weightを個別に設定してみます。
.footer-column .footer-menu:nth-child(2) h3:before{content:'\f085';font-weight:900;}



　表示されました。

　このようにスタイルの違うアイコンを表示するには、アイコンごとにfont-weightを設定しなければならないのでfontawesome4のときより手間がかかります。
　ちなみに共通部分に\f07cというアイコンの記述がありますが、これはフッターのアイコンが何らかの理由で非表示になった時に、このアイコンが表示されるように保険として記述されているのだと思います。
.footer-column .footer-menu h3:before{
content:'\f07c';


　これで再表示する方法の説明は終わりです。

参照文字について


　前項まででアイコンを再表示する方法の説明は終わっていますが、fontawesomeの使い方としてネット上でよく紹介されている記述方法とsimplify2で採用されている記述方法が違うので調べてみました。

　simplify2の記述法
　よく見かける記述法
content:'\アイコンのユニコード';

content:'\アイコンのユニコード';

　この両端の'は数値文字参照でシングルクオテーションを表わしています。参考HTML特殊文字コード表
　そして\は\を意味するため見た目の記号が違っていても問題ないようです。
日本語でWindowsを利用している場合、コマンドプロンプトでは、バックススラッシュ（＼）のかわりに、円マーク（￥）が表示されます。 バックスラッシュと円マークは同様の機能を持ちます。
参考富士通Q&A - 記号の「バックスラッシュ（＼）」をキーボードから入力する方法を教えてください。 - FMVサポート : 富士通パソコン

　ではなぜここで数値文字参照を使って記述されているかというと、BloggerブログはHTML形式ではなくxml形式が採用されているからだと思われます。
参考XMLでのエスケープ処理 (テキスト要素の値に""", "\", 改行 を含める場合の処理)

　ちなみに記事上に\（バックスラッシュ）を表示したいのに\（円マーク）に変わってしまうのが困るというときは、\（バックスラッシュ）にfont-familyを指定すると表示できます。
<span style="font-family: Arial;">\</span>

参考
円マークがバックスラッシュで表示される理由: 小粋空間
HTML、円マークとバックスラッシュの表示を使い分ける｜マコトのおもちゃ箱　～ぼへぼへ自営業者の技術メモ～

　なおブログを編集していると&lt;や&gt;といった記号を目にすることがあると思いますが、これは文字実体参照で<と>を表示しています。
　初めのうちは書いた覚えのない記号が勝手にエディターに表示されていて少し混乱しましたが、そのままの形で表示するとコンピューターにとって都合の悪い記号があるようで、そういった記号は数値文字参照や文字実体参照を使いエスケープ処理を行わなければならないんですね。

QooQ