【重要】テンプレートのアップデートについて, Font Awesomeについて

2018年12月12日
割と重要なお知らせ
4
Information

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては

  • Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加
  • Font Awesomeのアップグレード (注: SVGへの切り替えは無し)
  • サイドメニュー部のinput要素のCSS調整
  • 管理人コメントにプロフィールアイコンを自動出力

今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以降で。すみません。

原則としてアップデートはできるだけ適用して頂きたいところではありますが、Font Awesome を旧バージョンのままで使いまくっている、という方がいらっしゃるかもしれない(笑)
その場合にはアップデートを迂闊に勧められませんので、記事内容をよく読まれまして、納得できる・対処ができる という方のみを対象にしたいと思います。
できない場合には無理にアップデートせずにテンプレートも旧バージョンのままご利用ください。つっても本来は切り替えるのがベストですが。

今回のアップデートでは CSSからSVGへの切り替えは行いません。
現段階でFont AwesomeをCSS表示しているテンプレートについては JS + SVG への以降は避けようと思います。これを念頭に置いて読み進めてください。

新Font Awesome(バージョン5)移行時の問題点

現時点で最新バージョンが 5.5.0 です。バージョン4までは webフォント として CSS での表示でしたが、バージョン5からは SVG として JavaScript の表示の方がメインというか推奨になっています。

世の中がもう既に「webフォントよりSVG!」という感じに傾いていますのでこれは予測し得る結果だとして、webフォント(CSS)での提供も継続して行われているにはいます。懸念材料及び問題点は以下の通り。

  • webフォントでの提供がいつまで行われるか不明
  • クラス名が変わってしまった

一番の問題は クラス名が変わってしまったこと なんですね。クラス名はスタイリングの対象を特定するために使うわけですから、一字でも異なれば使えません。

旧 Facebookアイコン

<i class="fa fa-facebook" aria-hidden="true"></i>

新 Facebookアイコン

<i class="fab fa-facebook-f"></i>

旧 コメントアイコン

<i class="fa fa-comment" aria-hidden="true"></i>

新 コメントアイコン

<i class="fas fa-comment"></i>

こんな風にクラス名が変更されてしまいました、これ一番やって欲しくないというかやっちゃいけないことだろうと思うんですが(笑)
クラス名が変わったということは、これまでの共通クラス名 .fa に何らかのスタイリングを指定している場合には全て無効になります。そしてその 共通クラス名が無い というのも地味に厄介。現在のFAでは fab fas far の3つに分類されており、この3グループに共通するクラス名というのは無いんですね。自分で追加したら良いだけの話しだけど(笑)

で、一応救済処置というか旧バージョン用フォールバックなんかも用意されていはいるのですが、「それをずっと引き継ぐのですか?」という問題も出てきます。そしてスピードの問題もありますよね。CSSファイルが増えればそれだけ表示スピード(ローディング及びレンダリングスピード)は落ちるわけですから、そういうのはなるべく無い方が良いに決まっています。

総合的に考えると 旧バージョンの書式はきっぱり捨てた方が良い ですね。過去記事内にFAがたくさん使われているとしても、です。その場合は地道に書き換える(笑)

何故書き換えを勧めるのか

「何故今ここでテンプレート内FAのバージョンを上げるのか」という理由でもあります。「古いバージョンのままにすれば何も苦労しないで済むじゃないか」というご意見があるのも承知の上で。
というのはですね、半ば強制的にやらないと進んで書き換える人など居ない ということです。

テンプレートで旧バージョンが使える、あるいは旧バージョンしか使えない、ということになると、当然ユーザーさんは旧式のまま記事を書き続けることになります。それを何年も続けていざバージョン4の提供が終了したらどうします?数年書き溜めたとなると修正数はかなりの数になりますね。
GoogleによるSSL化促進でもそうなんですが、ペナルティを課すなど明らかな不利益を与えてお尻叩かないとなかなかみなさん慣習を変えようとはしないんですね。
「そのまま使えますよ。ご心配なく〜(はぁと)」というのは一見親切のように思えますが、いざという時が訪れてもその人は責任取ってくれませんからね (´・ω・`)
それはただの「親切風味の人気取り」でしかないと思うのよ?「IE8対応してます!(ドヤ顔)」とかもそうよ?え?違う?(笑)

とはいえCSSからSVGではキツいと思う。やっぱり。なので段階的にとりあえずバージョンを上げます。上げたら旧書式(htmlのi要素)はクラス名が違うから表示されなくなるよ、ということですね。キビシーね! ←
文句はFAに直接どうぞ(笑)

ここでお詫びですが、やっぱり第三サービスに依存するようなコード書いちゃいかんわ。ごめんなさい。FAをデフォルトで導入するべきではなかった、とここでお詫びしたいと思います。
現在では依存コードは極力避けています。NO jQuery, NO FontAwesome でございます。
今回以降にアップデートをする際には Font Awesomeは排除します と予告しておきますね。もちろん必要ならばご自身で追加すれば使えますよ。いっそ排除した方が過去に残してある旧FAのi要素へのスタイル指定が寧ろ容易だと思います。バージョン別を共存させるとなると大変。

Font Awesomeについては以上です。

Google Adsense用にCSS追加

adsenseだけですよA8がどうとかは知らないよ ←
基本的に 第三サービスの利用を想定したデザインはしていません。アフィリエイト広告も同様です。もっと狭い範囲で言えば「共有プラグイン」とかもそうです(公式プラグインには一部配慮しています)

なので「adsenseを簡単に利用できますよ!」とは言いません。自分の責任を増やすような愚行は避ける(笑)
ただ、テンプレートCSSの特性で「自分で気づけ・自分でなんとかしろ」が酷ではないかなぁ、と思う部分がありますので、そこを少し調整したいと思います。ほんの少しだけね。かといって「adsenseの掲載の仕方教えます。どしどし質問してね」という意味ではありません。原則として自己責任・自力でお願いします。

adsense用の調整を入れたので少し触れておきたいと思います。adsenseは 追尾型の掲載不可 という規約があるはずなので、stickyやスクロールアンカーに注意してください。でないとBANされてしまいます。
stickyは一番上、あるいは下に有るコンテンツが画面内にピタっと留まるもので、sticky対象部位(大抵はサイドメニューの一番下のコンテンツ)への掲載は避けてください。
スクロールアンカーの方はメインコンテンツ全体、あるいはサイドメニュー全体が対象になりますので 解除 してください。解除方法はhtml内にガイダンスをつけてあります。ガイダンスは 注) で検索することで探し出せるようになっています。

今回は告知だけです。対象テンプレート及び作業終了テンプレートについては改めてお知らせ致します。よろしくお願いします。

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 4

There are no comments yet.

hige  

2018/12/12 (Wed) 22:50

Font Awesomeは

 Font Awesome のv5へのバージョンアップには殆ど怒りを覚えました。
 おいおい!そこを変えてはいかんぜよと。
 あれ以来できるだけ使わない様にしてます。
 で、他のアイコンをいくつか たまに 探してみますが、Font Awesomeのデザインって結構使いたくなるんですよねぇ。
 アイコンの量も圧倒的やし。
 では、旧のv4を使用し続けるという方法もなくはない。
 でも数年後にはv4なくなるかもしれないという危機感。
 となれば、アイコンデーターを全てダウンロードしてとかで可決できないんかなー とか。
 もう信用度の問題と思ってます。

 フリーのアイコンって探せばあるのですが、基本、画像なので使い勝手が悪いんです。
って、慣れればそれなりにやれるのかもしれないんですが。自分のところへダウンロードして貼り付けるという手法。

 世の中のブログをやってる方の殆どが、HTMLやCSSなんて知らないと思われるので、優しい方法があればと。

 理想論を言ってしまいました。ごめんなさい。

 Akira氏は自分の作られたテンプレートにこだわりを持って、ずっとメンテナンス記事を書かれていることに感動を覚えてます。
 Akira氏って私の基準の本当の技術屋さんとずっと思ってます。
 今回の記事はAkira氏の面目躍如とした記事と思いました。

 で、Akira氏がアップされているテンプレ内の、scriptや画像のソースはDLして自アカウントで再UPするのがいいのかもしれません。Akira氏がFC2から撤退するかもしれないという不安からです。
 で私はAkira氏よりはるかに年寄りなんですが、Akira氏が私より先にFC2から撤退しているかもしれない。



Akira  

2018/12/12 (Wed) 23:00
vanillaice (Akira)

To higeさん

higeさん、こんばんは (●'0'●)/

そうですよね。一番やってほしくないことを堂々とやってのけたFont Awesome(笑)
なんで今さらメンテかというと、もうFAのページでhtmlを取得する時にすぐに選べるバージョンが5以上だけということに気づいたもので(旧バージョンへの切り替えはあります)
もうずいぶん前からなのかもしれない ^^;
となると当然そこから選ぶ → 基本CSSファイルが5以前だと使えない → テンプレ内のFAバージョンを上げる → テンプレ内のSNSアイコンなどが豆腐化する → 放心
「あ、これアカンやつやわ」と(笑)
旧htmlの取得の仕方なんてわかんないですよね (´・ω・`) というよりもう取得されたくないんでしょうね。

FAの変換に頼らずにインラインSVGで利用するのが安全だと思います。SVGはテキストデータですからFAと切り離してしまえばバージョンに左右されません。そして変換処理やファイル参照が不要になりますので軽量化にも貢献します。

参考記事: 脱Font Awesomeを目指す方へ修正方法や提案など
https://vanillaice000.blog.fc2.com/blog-entry-759.html

ちょっと難しいかもしれないなぁ、とは思います。特にSVGはhtmlではなくxmlですから終了タグ省略時にclosing slashが要る、とか(html5は不要)
あとは文字数が大変多いので可読性の問題があるかもですね。

とりあえずリリースしたテンプレートについてはメンテの義務というか、義務とかそういう御大層な概念でもなく私としては「当たり前」という感じなんですね。なので放置するなら取り下げるというスタンスです。
実際「もうこのテンプレいじりたくない」というのは下げてます(笑)

---- 追記
えっと。higeさん。今日からバージョンが5.6.0になってますよ。どんなタイミングなんだよ。ワザとかっつーの ( ̄∀ ̄;)

hige  

2018/12/13 (Thu) 22:14

もう一つバージョンが上がってますよ

Font Awesomeのサイトを、今見に行ったら、5.6.1 でした!!!。
これ、HTMLのscriptの部分のバージョンを 5.6.1 と書き換えるだけではダメなんですね。
SVGというメニューから辿って全文を拾ってきました。

Akira氏がおっしゃってるSVG、目を通してるんですが、めんどくさ!って感じでスルーしてました。
SVGのことってよく解ってないのですが、画像をユーザーが取得して、それを再アップするという様な感覚でなんでしょうか。
あっ、回答はいいです。もうすでにAkira氏は書いておられるので、勉強します。

Akira  

2018/12/14 (Fri) 00:16
vanillaice (Akira)

To higeさん

マジですかー ( ̄∀ ̄;)
アップデート直後に日をおかず再アップデートが入る場合は「何か不備があった」と見るのが妥当なんだけど(笑)
とりあえずまだ1件しか修正していないのでそれは様子見で置いておこうと思います。

htmlやCSSは「めんどくさい」のと「難しい」のとが有って似て非なるものなんですが、SVGの方は若干「難しい」寄りですね。

> 画像をユーザーが取得して、それを再アップする〜

そういうことではないです。数学的に数値に置き換えている、という意味なのでめちゃくちゃ長い数字とアルファベットの羅列です。複雑なものほど文字数が多くなります。あくまでもテキストデータですからアップロードという概念は無いですね。
アイコンだけでなく例えばhigeさんがスマホなどで撮影した画像なんかもテキストデータに変換できますよ。長大な文字列になるとしても(笑)

コメント投稿

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)