画像はイメージ
WordPressテーマ「LION MEDIA」のTwitterアイコンが青い鳥なのでXに重い腰を上げて改修作業したメモ。
前提条件はLION MEDIAを運用中で、重い腰を上げて上記作業をしたいモチベーションが少しはある人。
phpのコードをバリバリに改修するほどの技術やモチベーションはないけれど、アイコンだけサクッと変更できればいいやって人。
結論言うと、サクッとやろうとしても1時間半くらいはかかるぅ～。
目次
LION MEDIAのSNSアイコンはどうやって表示されているかの解析
他人様が作ったサイトを改修、保守する場合も同じだけど、まずは解析でエネルギーを700kcalほど消費する。
SNSアイコンを表示する方法は色々あると思うけれど、LION MEDIAの場合、元はIcoMoonというWeb上でフォントセットを作れるようなサービスで、svgを含む4種類の独自フォントファイルが生成して表示されているっぽい。
格納されているパスはテーマファイルのfontというディレクトリ。詳しくはデベロッパーツールとかで見ればわかると思う。
じゃあ、IcoMoonで鳥アイコンからXに替えればいいかなと思ったけれど、XのアイコンはIcoMoonに用意されていない(たぶん)ようなので、外部から取り込もうとしたけれど、IcoMoonの操作がよくわからないのと、学習コストが割に合わなくなりそうなので別の方法を採用することにした。
ちなみに、Xのアイコンは単純なベタ打ちの文字で代用できるという説もあったけど、今回の改修においては、それはそれで厄介に思えたのでアイコンの見た目だけ変えることにした。
定番のフォント作成ツール「FontForge」を使う
FontForgeと調べれば出てくるので自分の環境にあったものを使う。
Windows、Macなどで動作するフリーソフトだが、元がLinux用らしく、操作や見た目は相当にクセがある。
元のフォントファイルを読み込ませて、鳥からXに変更できるように頑張って色々やると完成。
eotファイルに変換する
FontForgeではeot形式のフォントは生成できないっぽいので、ttfとかからeotに変換する。
web上に変換できるツールがあるのでそれを使えばOK。
FTPで元のフォントファイルを上書きする
バックアップを取ってミスったら元に戻せるようにしつつ、えいやっと上書きする。
フォントは4種類あるけれど、cssの指定を見るとeotが一番上だからeotだけでいいのかなとも思ったけれど、おそらくブラウザにもよると思うのだけど、ttfまで入れたらFirefoxとChromeで変更が確認できた。
このへんの知識はよくわからんけど、4種類もあるのってブラウザ対応だよね。
最後の仕上げで背景色をグレーっぽくする
ボタンの背景色が水色だと思うので、Xの感じに合わせてCSSをいじってグレーっぽくする。
ふぅー、お疲れちゃんしたー。
余談も余談だけど
企業のWeb担当者とかは鳥ちゃんアイコンから、ショボいばってんマークへの変更を強いられたと思うけれど、元々の作りによっては、特に保守とかで他人様のサイトをいじったりする場合は、まぁまぁなスキルもいるし、重労働だと思うよね、俺は。
それに鳥ちゃんマークはデザイナー的に言うと、黄金比の組み合わせで作られたようなアカデミックなデザインだから、ボタンのデザインによっては閉じるマークに見えてしまうXアイコンはゴミだと思うね。フォントベタ打ちだという話もあるし。
あと、仕方のないことだとしても、更新の止まった無料Wordpressテーマはなかなかに厄介。
無料テーマでも更新され続けるやつもあるから一概に無料は悪いわけではないけど、本業の宣伝とか有料テーマへの誘導用に作られた無料テーマは徹底的に放置され気味なご様子。
有料テーマでもゴミなやつはいっぱいあると思うから俺は買ったことないけど、何事も貧乏クジ引かないように最低限のスキルや判断能力を付けて上手くやっていかないといけないね。
