ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

[CSS]font-awesomeが四角になって表示されない時のチェックリスト

September 16 2019

最近はよーく使わせてもらっておりますfont-awesome。
https://fontawesome.com/

メールアイコン、もしくは各SNSのアイコンなんぞいちいち画像で作ってた時代が懐かしい。
古くからWeb制作に携わっている方々なら「アイコンばっかりのaiファイル」とか持ってるはず。
それが今ではこういう便利なモンがあるんですからねえ。
いわゆる昔の「テーブルレイアウト」みたく、若きWeb制作者からは「は?なんスかそれ?」って自嘲気味に言われる日もきっと近い。
そんな事言われたらパワハラ気味にネスケ4.7とIE6.0縛りでサイト作らせちゃったりしそうです。
・・・・環境用意するだけで大変やっちゅうねん。

しかし、このfont-awesome。
CSSで例えば疑似クラスの::beforeなんかに設定した時に表示されねえ、って事があります。
いや、悪いのはワタクシなんですよ。
いつもいつもその場しのぎで表示させて、翌日にはそれを忘却してしまうのが悪いのです。

そこでチェック項目をば。

  1. ヘッダーにちゃんとfont-awesomeのCSSが読み込まれているか?
  2. Free版じゃなくてPRO版のアイコン使おうとしてねえか?
  3. font-familyの指定方法が間違ってねえか?
  4. font-weightを指定してるか?
  5. unicode拾ってきたのはいいが「バックスラッシュ」忘れてねえか?

この5項目のウチ、1はもう論外。アホ。
2は意外とやりがちなミス。特に凝ったアイコン使いたいという気持ちが先走る際にやりがち。落ち着け。
さて、この3であるけどもこれは指定方法がある時期から変わったみたい。

font-family: "Font Awesome 5 Free";

とちゃんと「Free」を付けないとダメになっているのですな。
もちろんPRO版を使う場合は「Pro」にしないとダメなのです。
「あれれ、ちょい前まではちゃんと表示されてたのに何故に表示されない」という場合はほぼこれ。

4のfont-weightに関しても、これをきっちり指定しないとダメみたい。
焦ってる時ってfont-sizeばっかり気にしてしまってこれをすっ飛ばしてる時が多いのだ。
ちなみにFree版の場合は400もしくは900しか指定出来ないので注意。
そして、各アイコンには提供されているfont-weightが種類別にちゃんと用意されております。
Free版なら以下のように分けられてます。

Brands style・・・400
Solid Style・・・・900

なので、Solid Styleのアイコンを使うのなら

font-weight: 900;

を忘れずに記述しましょう。

そして5。これも慌ててる時にやりかねないミス。
各アイコンのページに行くと

と、このように「fla5」と書いてあるのでそれをコピーするなりしてCSSに記述しますが、
この時に「バックスラッシュ」を忘れてしまってハマるというケース。

content: "\fla5";

とちゃんと頭にバックスラッシュ入れたらんかい、という事ですね。

font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\fla5";

この3つ、絶対に忘れんなよってお話でした。

雷鳴 ― Cleanup and Repair Time

September 11 2019

夜までは自由な時間という朝の目覚め。
バタバタと全員送り出してからは色々とお片付けタイム。
洗わなきゃならない物、片づけなきゃならない物、処理してしまわなきゃならない物。
目の前に積まれた物をバッタバッタとなぎ倒していく事を考えつつも実際の作業はとっても地味。

なぜかこういう時いつも聴くのはピンク・フロイドの「原子心母」。

車で走りながらとかなんぞ仕事しながら、じゃなくて掃除などの作業時にやたらマッチする。
・・・・・なんでかは知らん(笑)
牛がジャケットという事もあり、あの70年代初頭の前衛芸術的な感じもしますが
シド・バレット在籍時のフロイドとは違ってかなりわかりやすい。
どちらかというとクラシックにかなり近い感覚で聴く事が出来るアルバムであります。
Old Fat Sun→「デブでよろよろの太陽」という邦題センスもまさに当時の東芝EMI!
もちろんこのセンスは故石坂敬一さんのお仕事であります。
このインタビューは60年代から70年代の日本の空気をとても楽しそうに語っていて、タイムスリップしてみてえって思います。
http://wedge.ismedia.jp/articles/-/1083

洗い物、掃除、洗濯、整理、すべて片付いてからずっと放置してた水槽の水替えを。
かれこれ一ヶ月半ぐらいはなにも出来てなかったんちゃうかな。
さすがにもう死んでるんちゃうか、と懸念してたオトシンクルス(通称:オトちゃん)も無事に生存しておりまして。
濾過フィルターもなんもかんも藻で覆われていてとても大変でしたが綺麗になりました。

後は「首に大きな虫が止まる夢」を見た時に払いのけた際につい引きちぎってしまったネックレスのチェーンの補修作業をば。
緩んでいたエレアコのジャックの増締め、剥がれていたハンダの補修。
鬼の様に届いてたWordpressのアップデートの確認とプラグインのアップデートと動作確認・・

・・・・補修作業ばっかりやないか。

とはいえ、放置していてはならぬものばかり。
日々の暮らしにはきっとこういう日も必要なのだ。
自分自身もどんどん死に向かって身も心も古ぼけていく中で、形ある物を補修する様はなんとなく滑稽なり。

ジョン・レノンの死後に発表された「ダブル・ファンタジー」の中に「Cleanup Time」という曲がある。

この「ダブル・ファンタジー」はジョンが撃たれた1980年に発表されたアルバムですが、
幾分AOR寄りなアレンジの曲が多くて、もしジョンが生きてあの80年代を駆け抜けていたらどんな音楽作ってたんだろな、と大変興味深い。
ただ、このアルバムは半分がオノ・ヨーコ曲が収録されていてそれが個人的にキツいのが難点(笑)

我が家の「Cleanup time」が終わりを告げる頃、外では雷鳴と共に豪雨。

「怖かったーーーー!!」とずぶ濡れで帰って来た子供らを迎えた後、夜の仕事に向け少し寝る。

1時間ほどして起きたらすでに散らかってました。
うん、まあ、しゃーないよね。

乙女 ― パラメータが支配する世界で恋をするという事を学ぶ意義とは

September 10 2019

かつて「好きとか嫌いとか、最初に言い出したのは誰なのかしら」という歌があった。
まだまだ子供だぜ、と思っていたとしても長女がハマっているマンガを見せてもらって「なんじゃこれ」という事もある。

漫画 ― 影響力と舵取りのバランスとは

以前、書いたマンガ「12歳。」のお話である。
小学6年生が第1話からキスするわ、生理は来るわ、「試しに付き合ってみればいいじゃん」というセリフが飛び交うわ、なんかもう読んでて末恐ろしくなってしまう。
が、自分も押し入れ上に隠していた「スコラ」や「デラべっぴん」をオカンに見つけ出されて、わざわざ机の上に置かれた事もあったりしたので、ここは広い心で「まあ、そんなイケメン現実にはおらんで」と現実に沿ったアドバイスをするにとどまっている。

と、そこでふと思った。いや、思い出した。
セガサターンを所時していた頃に寝食忘れて没頭したゲームを。
恋愛シミュレーションゲームの金字塔である「ときめきメモリアル」である。

あのゲームの世界観設定は高校3年間。
「卒業式の日に校舎内にある伝説の樹の下で女の子から告白されるとずっと幸せになれる」というのを目指すのだ。
その世界観の中ではキスはおろか手を繋ぐ描写もない。
完全なるプラトニックなワールドのままエンディングまで過ごすわけである。

という事は・・・・・すでに「12歳。」の世界観でこの倫理観はすでに逆転してると言えよう。
長女はすでに「ときメモ」の世界の倫理観を超えた所でこういう「疑似恋愛」の世界を体験している事になる。

そういえば・・・・ときメモには逆サイドのゲームがあったな。
普通はプレーヤーが男子で、ゲームにはたくさんの女子が出てきてそれぞれを攻略するのですが
これが逆転しているシリーズをコナミはリリースしている。
それが「ときめきメモリアル Girl's Side(通称GS)」シリーズだ。
我が家では未だにPSPが現役機(親父の持ち物として)として稼働しており、長女もいくつかのゲームを楽しんでいる。
そして、PSPにはGSシリーズのナンバリングタイトルとして「3」がリリースされている。

CEROレーティングは「12歳」となっているが、もはやあんな漫画が「ちゃお」で連載されている以上問題なかろう。
これをひっそりとPSPのUMDとして紛れ込ませておく事にした。
あえて「これやってみたら」と勧める事はしない。

娘「お父さん、これなに?やってもいい??」
俺「おー・・・・ええんちゃうか」

前もってこのシリーズの事を調べもせず中古のUMDを入手したのであるが、一応シリーズの伝統は守られている様子である。
というかもう登場人物は「ガリ勉」「チャラ」「体育バカ」「寡黙なヤンキー」「年上の真面目タイプ」「年下のカワイイ系」あたりがきっとズラリと揃っている事は容易に想像出来る。
これに「関西弁」とかそういう属性が加わるぐらいではなかろうか、と予想していたが公式サイトを見ると案の定であった。
lhttps://www.konami.com/games/girls_side/3rd_Story/character/index.html

GSシリーズはどうやら元々のシリーズに加えて
「ファッション」「アルバイト」「女友達」という概念がプラスされている様子。
要するに各キャラには「好みのファッション」が存在し、それに合わせて衣装チェンジする為には金がいる、と。
プラス、女友達も複数人登場して、その女友達と狙いが被ると一気に敵対モードに突入するという要素が組み込まれており、さすがは時代を担ったKONAMIだけの事はある。

とりあえずはゲームを進めて行く長女。
勉強イヤだから運動ばっかりするー!と意気込んでいたもののそれと同時に学力と容姿が下がる、という事を知る。
なんで?と聞かれると「そらお前、外で走り回ってばっかりじゃいつ勉強してオシャレすんのんな」で納得。

「じゃオシャレもみんな頑張る!」で満遍なくこなしていくと次は「ストレス値」があがる。
なんで???との問いに「そらー寝んと死んでまうしな」で納得。
ストレス値が基準を超えると、何の活動も出来なくなるので結局は非効率なのだ。

「服を変えようと思ったらお金が足りない、って言われる」
「そらーお前、そこでバイトするんやがな。狙ってるヤツと同じバイト先選ぶとか」
「なるほど!」

何かを極めるためには何かを捨てないとダメな時もある」という事を乙女ゲーで学ぶ小学3年生。
そして終盤戦になると今まで仲良く男の子情報を教えてくれてた女友達が敵対するという展開に。

「めんどくさいね・・・」「そやで」

ゲーム内のパラメータも現実のパラメータもそう大して変わりはしない。
取得選択の意義とタイミング、そして並外れた意志による努力が必要なのである。
そして、3択のセリフ選択だけで実際の世界は進んでいかない事も同時に学んでくれれば、と願う親父である。

うん。「12歳。」を読むだけよりはよっぽどこっちの方が有意義な気もする。かな?

「好きとか嫌いとか、最初に言い出したのは誰なのかしら」
引用元は「ときめきメモリアル」第1作目の主題歌からなのでありました。

めんどくせーもんですよ実際の所はね。ええ。

« Nov 2019 December 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31