ファビコンの作成とプロフィール画像管理プラグイン

投稿日:2018年4月11日

さて、先月中のサイト完成を目指していた『ガンプラ気分(仮)』でしたが、まー全然間に合いませんでしたね(;´ェ`)
『ビルドダイバーズ』も始まってしまいましたし、今さら焦ってもしゃーないので、サイトをキッチリ完成させて、それからガンプラ作りに専念するとしましょう。

 

では今回のサイトカスタマイズなんですが、「ファビコン」を作成してみようと思います。

ファビコン(favicon)ってのは favorite icon の略で、お気に入り(ブックマーク)に入れた時なんかに表示される小っちゃいアイコンですね。
表示ページの頭にも付いてたりするので、ブラウザの左上の方を見れば(ファビコンを設定してあるサイトなら)大体何かのアイコンが付いてるんじゃないでしょうか。

別に無いなら無いで特に問題はないのでしょうが、あった方がオリジナリティも出るし印象に残りやすいですよね?
私なんか今数えてみたらブックマークに500件ほど入っていましたし(ほとんどサイト作成関連ですが)、たまにしか見ないページなんてそもそも何のサイトだったのかも分からなくなってますし。

そういう時にファビコンが設定してあれば他の多くのお気に入りの中に埋もれてしまうことも少なくなるんじゃないかな~なんて思ってます。
まぁやらないよりはやった方が良いのは間違いないでしょう。
 

ファビコンの作成

まずはファビコンのデザインを決めないとですね。
決まりとしては正方形であること、ぐらいでしょうか。

せっかくいっぱいブックマークしてあるので、他のサイトのファビコンがどんな物なのか見ていきましょうか。(主にプラモ関係)
 

個人サイトも含めてザッと見てみますと、一番多いのはやはり「文字」ですね。
サイトの頭文字1文字だけの非常~にシンプルなやつ。

ガンプラ関係だと「ガ」か「G」ですね(笑)
有名どころだとコトブキヤのファビコンも「K」1文字とシンプル。

我がガンプラ気分もこの形式でいくと「ガ」か「G」となってしまいますね。 確実にカブります。
気分の「気」って手もありますが、この1文字でこのサイトを連想はしないでしょう…。
 

1文字が駄目なら2文字で考えてみますか。 これも多いですよね。

有名なのはプレミアムバンダイの「PB」でしょうね。 ファビコンだけでなくサイトのシンボルアイコンとして各所に使われていますので、ガンプラレビューサイトに張られたアフィリエイト用のバナー画像とかでもきっと一度は目にしていると思います。

たった2文字のアイコンですが、「シンボル」としてみればかなり効果的でしょうね。
でもこれはメーカー公式サイトとしての知名度とか認知度みたいのも強く影響しているので、一個人のサイトであるこのガンプラ気分が「GK」とかをシンボルにしたところで、「GK? …ゴールキーパー??」とか思われるだけでしょうねぇ。

「ガ気」だとなんか気持ち悪いし、「気分」ならまーこのサイト名は出るのかもしれませんが、模型サイト感は無いですよね。
 

さーどーしましょ。
ファビコンをシンボルマークとして考えた場合、ファビコンとしてだけではなく、サイト内にもちょいちょい使用していって、「このマークはあのサイトだ」みたいに覚えてもらえるのがきっと一番。

そう考えると「文字」は選択肢から外れますね。
文字の利点は「作りやすい」、これが全てでしょうから。
まさに「無いよりはあった方が」。くらいの感覚で作られた物なんだと思います。

理想的なのはガイアノーツやハイキューパーツのですね。 商品ラベルによく使われてるマスコットキャラ(?)をそのままファビコンに採用しています。
 

では具体的に何のマークを使うかという話になってくるんですが…。

やっぱガンプラのサイトであるならガンダムにちなんだ物にするのが見た人の記憶に一番残るでしょう。

シンボルという言葉からまず連想するのは、連邦軍やジオン軍の紋章(エンブレム)かなぁ、私の場合。
…だがこれは有名な某ガンプラブログで採用されているので却下。

で、私が一番いいんじゃないかと考えていたのが、ずばりガンダムの「V字アンテナ」!
今回用意するファビコンは版権画像は使えないので自作するつもりなんですが、さすがにこれくらいなら描けるだろう、ってのも決め手ですね。

…ほんで練習がてらノートに書いてみたんですが、V字アンテナってけっこう横に長いのね…。 正方形に収めようとすると上下スカスカになってイマイチですね(^^;
ほんとに「V」の角度になってるのはVガンダムっくらい? サイトのシンボルがVガンダムのアンテナってのはどうなんでしょ? いや、Vガンかなり好きですけどね?私は。
 

さて、実はV字アンテナはサイトを作る前からこれだと決めていたとっておきだったので、今頭真っ白になっちゃってるんですが…、何か他の案を考えねばなりませんね。

さっき書きましたが、理想はガイアノーツやハイキューパーツの様なマスコットキャラをそのまま使えればいいのですが…
ウチのサイトにマスコットなんて…

いや! ガンダム作品にならいるじゃぁないか! マスコットキャラが!!
そう、「ハロ」ですよ、ハロ!!

しかもハロならまん丸なので正方形にもぴったり収まる!
私のブクマの中にもハロをファビコンにしている人はいないので、カブってもいない!

さらにハロならキャラクターでもあるので、そのまま「プロフィール画像」のアイコンとしても使える!
…ジオンのエンブレムやV字アンテナが「これはおすすめのプラモです!」とかしゃべってるってのはちょっと違和感ありますしね(^^;

ファビコンの条件としてはこれ以上ないというぐらい完璧なんじゃないでしょうか。
 

ちょっと気がかりなのは、今後ハロをプロフ画像にする人が増えてくるんじゃないかと予想しているんですよね。

ほら、今月『ハロプラ』っての出るじゃないですか。 ありそうでなかったハロのプラモデル。

あれをカメラで撮るだけで良いプロフ画になると思うんですよね、カラバリもどんどん出るみたいだし。

なんかいつからかツイッターのプロフ画像って四角から丸になったじゃないですか?
それで今まで使ってた画像がちょぎれてしまっている人ってまだけっこういると思うんですよね。
そんな人にはもうもってこいじゃないですか、まん丸のハロなんてものは。

なのでハロでオリジナリティが出せるのはあと少しの間だけなんじゃないかなぁーなんて思ったりもしますが、今はこれ以上の案が出ないので、当サイトのマスコット兼シンボルとしてハロを採用することに決めました。

 

マルチアイコンを制作

さーて、やーーっとデザインが決まったので、いよいよファビコン作成に入りましょう。

いつも通り最初は情報収集からですね。 ファビコンに関する知識が何もありませんので。

私が使用しているWordPressテーマは『AFFINGER4』。
ファビコンの細かい理屈だなんだは置いといて、このAFFINGER4が推奨している物で揃えておけばとりあえず大丈夫なんじゃないでしょうか。

んで、AFFINGERの公式サイト(の一つ)によりますと、

ファビコン画像16×16px 、32×32pxマルチアイコン

apple-touch-icon画像152px以上のpng

と書いてありました。
 

どうやらファビコン画像とは別に「apple-touch-icon」画像というのを用意する必要があるようです。

これはアップル用のタッチアイコン、iOSに対応させるための物らしいです。 まぁ言葉通りですね。
 

よく分からんのが「マルチアイコン」という物です。 聞いたことが無い。

結局AFFINGER公式からの情報だけでは理解しきれなかったのでファビコンの解説サイトを読んでみると、マルチアイコンというのは、複数の画像ファイルを格納した「.icoファイル」という物のことだそうです。

つまり、AFFINGER推奨のファビコンとしては、16×16 と 32×32 の2つの画像ファイルを格納した icoファイルを作れってことですね。
 

しかし、解説サイトを読むと、ファビコンはスマホやらなんやらかんやらの登場により、その全てに合わせようとすると現在20以上のサイズが必要になってくる「マルチデバイス時代」となってしまっているようです。

ただ、大きなサイズを1つ用意しておけばブラウザが適宜縮小してくれるとの事なので、私は解説サイトで勧められていた通りに、16px 、32px に加えて 152×152px の画像も icoファイルに格納しておこうと思います。

 

やっとこれで画像ファイルの制作に入れます。 まだ作業自体はなんにも手を付けていませんからね(-∀-`;)

まずはハロの絵を描かなくてはいけないわけなんですが、デジタル作画なぞできるはずもないアナログ人間なので、前作ったロゴ画像みたく紙に描いてスキャン、ですね。

今回用意する一番大きい画像で152pxなので、そのサイズに合うように描いておいて後々の苦手なデジタル作業の手間を減らしたいところなんですが…

152ピクセルって何センチよ??

さっぱり検討もつかないので、さっきのファビコンのサイトに載っていた152px四方のアイコンにPCモニターの上から定規を当て測ってみたところ、およそ3.9cmということがわかりました。 …我ながらなんてナンセンスな方法でしょう
 

あとはネットでハロの画像を拾ってそれを模写。

ガンプラ気分のロゴ画像を作った時、文字の枠線がしっかり描けていなかったせいで塗りつぶしでの着色作業が大変だったのを思い出したので、今回はハロの輪郭をかなり太めに描いておきました。 アニメっぽい表現にもなるので相性は良いはず。

悩むのは色ですね。 デフォルトでは緑に赤い目ですが…
SEEDや00ではいろんな色のハロが出てくるんですよね。
ハロプラのカラバリを見るにおそらくビルドダイバーズでもいろいろと出てくるのでしょう。

ならば必ずしもハロ=緑とはならない時代なので、ここは私も好きな色にしてしまいましょうかね。
前回このサイトのテーマカラーを決めたのですが、SEEDのイメージで青にしたので、このサイトのシンボルとなるハロにも青に染まってもらいましょう。
 

今後色を変えたくなることもあるかもしれませんので、テキトーにレイヤー分けしといて、はみ出てた線とか消して、汚れとかも消して、手探りで背景を透過に頑張ってみたりして…

完成したのがコチラよ!!

ハロ

どーよ? 見事な丸さじゃね!?
10分くらいかけて描いたからね! 渾身の丸さよ。

 

あとはこの画像を152px、32px、16pxの3種類用意するだけ。

152pxの実寸である3.9cmで絵を描きましたが、結局400dpiでスキャンしたのでバカでかい画像になってしまっているので、Photoshopで縮小して保存。

これでほぼ完成だと思ったんですが、なんか16pxの画像がすごく粗い…
色を青に変えてしまったせいもあるのかもしれませんが、パッと見でハロとは判らないくらいです。
 

そこでAFFINGER公式にて勧められていたファビコンのサイトのリンクを辿り、「Favicon Generator」という海外サイトで16×16pxのドットアイコンを自動生成してもらうことにしました。

やり方は簡単で、先ほどのハロの元画像をアップロードするとそれが16pxのドット絵になるというもの。
その場で自分でドットを打って微調整もできるようです。

私はドット打ちの経験なんて無いので、生成されたドット絵に普通に絵を描く要領で描き足していきましたが、なんかガビガビのやたらカクカクしたアイコンになってしまいました…

青、黒、赤の3色しか使ってない元のハロの絵でしたが、ドット絵になると1つの色に対し10色以上の濃淡で色分けされるんですよね。 これで丸い部分のカーブを表現してるんでしょうね。 私にはちんぷんかんぷんです。
 

とりあえずハロの目と口(?)だけでも目立たせれば遠目にでもハロと判別できると思うので、ひたすら手探りでドット打ってみました。 けっこう楽しかった

何度もやり直してどうにか画像編集で16pxに縮小しただけの最初のヤツよりかはマシと思える物が出来上がったので、「Make Favicon!」ボタンで生成された物をダウンロード。 これはすでにicoファイルになってるんですね。

 

続いてはサイトにアップロードするためのicoファイルを作ります。 いよいよ最後の作業ですね。

こちらもAFFINGER公式からのリンク巡りにより、「半透過マルチアイコンfavicon.icoを作ろう!」というサイトで簡単に作れるようです。

日本語のサイトなんで、書いてある通りに進めればいいだけですね。
格納したい複数のpng画像をアップロードするだけ。

んで、152px、32px、16pxの3サイズでicoファイルを作ろうとしたんですが、エラーが出て作れませんでした。
さっき作った16pxのドットアイコンがicoファイルで生成されていたせいみたいです。
icoファイルはicoファイルに格納できないっぽい。
 

仕方がないので、ドット絵にする前の縮小しただけの16pxのpng画像を使ってicoファイルを作りました。 無駄な時間を使ってしまった…

ところが完成品を確認すると、背景が透過になっていませんでした。 ただの白背景。
Photoshop上では透過させていたはずだったんですが…

psdファイルを確認してもやはり背景は透過になっている。
いろいろ試してみたところ、レイヤーをまとめる際に「統合」ではなく「結合」を選択したら上手くいきました。 何がどう違うのかサッパリだがまぁできたからいいや。
 

無事透過背景になったpngファイルを改めて3つ用意し、再びicoジェネレーターでicoファイルを作成。

今度はちゃんとできていました。

 

あとはもう[AFFINGER4管理]画面からアップロードするだけ。
152pxのpngをアップルタッチ用に別途上げるのも忘れずに。

これで『ガンプラ気分』のファビコンは青いハロのイラストになってくれました。
ブックマークにも、左上のページタブにも表示されています。

良いですね~、自分オリジナルのサイトって感じ。
 

んじゃ、ファビコン作成はこれで完了。

あー時間かかった。

ここには書きませんでしたが、16pxのアイコンをもっと綺麗に作るために、画像の圧縮法?みたいのも調べたりしたんですよね。

「バイキュービック法」だとか「アンチエイリアス」だとか。

…結局よく分かりませんでしたが( ´△`;)

 

プロフィール画像管理プラグインの導入

さてさて、ここでちょうど6000字。
当初の予定ではもう終わりだったんですが、ファビコン画像を初期案のV字アンテナからハロに変更したおかげでそのままキャラクターとして使えるので、プロフィール画像とも兼用してしまおうと思います。

プロフィール画像としての設定機能はWordPressに備わっているので、[ユーザー] > [あなたのプロフィール]から設定できるみたいですが、そのアップロード方法がちょっと厄介なんですよね。

WordPressをやってる人ならきっと聞いたことのある「Gravatar」(グラバター)という海外サイトを利用しなくちゃいけないんですよ。

プロフィール画像の変更なんてメディアにアップした画像からちょちょっと選ぶだけで良いはず。
わざわざ外部サイトに画像1枚を登録しにいくのは面倒すぎる。

しかもGravatarはキャッシュを活用できないだとかで、サイトの表示スピードの面からも良くないらしいです。

…なんか最近Google先生のサイト表示速度の優先度合が今まで以上に高くなってきてるとか聞きますね。
 

というわけでGravatarに頼らずにプロフィール画像をアップする機能を探してみます。 ま、プラグインを使えば一発でしょう。

一つ目の候補は「WP User Avatar」
画像をWordPress上にアップするだけでプロフ画像として使えるプラグイン。

別にこれでも良かったんですが、AFFINGER公式(の一つ)によると、「Simple Local Avatars」というプラグインを使うのがおすすめされていたので、テーマとの競合を危惧しコチラを使うことにしました。
 

Simple Local Avatars は最終更新が5年前とか出ていましたが、特に最新機能が欲しいようなモンでも無いので、私は気にせず使わせてもらうことにします。

使い方はいたってシンプル。
[ユーザー] > [あなたのプロフィール](または右上のユーザー名をクリック)から、追加された「Avatar」の項目から設定したい画像をアップロード、またはメディアライブラリから選択するだけ。

アップされた画像が何故か縦長に潰れてますが、AFFINGER公式でも同じようになっていたのできっと仕様でしょう。

設定が完了すると、右上のユーザー名が表示されていたところにもプロフィール画像が表示され、管理画面がちょっと華やかになりました((´∀`*))

それと過去に自分がコメントした物にもこの画像が表示されていました。
これで投稿者コメントと管理者コメントとの差別化もできるので素直にやって良かったと思えますね。

 

サイドバーに簡易プロフィールを表示

ここで7100字。 ぶっちゃけもう記事終わりにしたいんですが、もう1つだけ。

せっかくプロフィール画像を設定したので、管理画面とコメント欄だけではもったいないかなと。

なので、他の多くのブロガーさんがやっているように、サイドバーの上の方に簡易的なプロフィールを表示させてみようと思います。
 

AFFINGER4ならこの辺の機能はウィジェットとして用意されているので、たぶん簡単に実装できるんじゃないでしょうか。 …たぶん。

いろいろとウィジェットを試してみて、実際にプロフィール欄として使えそうだったのは3つ。
「テキスト」と「STINGERフリーボックス」と「STINGERサイト管理者紹介」。

名前の通り、STINGERサイト管理者紹介を使うのがベストでしょうね、きっと。
AFFINGER製サイトを見てもこれの採用率が一番高かった気がします。
デザイン的にも私好みですし、これでいきましょう。
 

それではST管理者紹介を使ってプロフを作りたいのですが、ウィジェット画面からは設定できる項目が「タイトル」だけなんですよね。

ここはWordPressで設定しておいたプロフィールがそのまま表示されるようなので、またまた[ユーザー] > [あなたのプロフィール]画面より、「プロフィール情報」の欄に表示させたい自己紹介文をあらかじめ書いておく必要があります。

…私自己PRとか大の苦手なんですよねぇ…
長所とか1っつもない人間なので(´-ω-`)

ま、今はサイドバーにプロフ欄さえちゃんと出てればあとは中の文なんて思い付いた時にでも書き直せばいいだけなんで、とりあえず正常に表示させることだけを考えていきましょう。
 

で、WordPressのプロフ欄に入力した文で表示させてみたのですが、改行が効いていません

…なんか前にもこんなことあったなぁ。

そうだ、「キャッチフレーズ」だ。 あれも改行ができなかったので、このサイトではキャッチフレーズ無しにしたんですよね。
かなーり悩んだなぁ…、ここ。

確認のためAFFINGER製サイトを改めて見て回りましたが、全て改行されていませんでした。
今までは特に気になりませんでしたが、一度気にしだすとどんどんおかしく見えてきますね。
3、4個の文が改行無しでバーッと書かれている。見れば見るほど変。

ついでに言うと、このST管理人紹介ウィジェット、タイトルのところがクリックできるようになってる(リンク先は無し)のが地味に気になりますね。

 

デザイン的に気に入ってたこともあり、かなり残念ですがSTINGERサイト管理人紹介ウィジェットは見送ることにしました。

となると残り2つの候補、テキストかSTINGERフリーボックスということになるんですが、使い比べてみたところ、どうやらテキストウィジェットはSTフリーボックスの下位互換っぽいので候補から外しました。

なのでサイドバーのプロフ欄にはSTINGERフリーボックスを使用することに決めました。
公式を見ても、これをサイドバーのプロフィール欄として使用していたので、用途しても正しいみたいですし。
 

ほんじゃテキトーにテキストを入れ、改行も含めて表示の確認。

うん、ちゃんと改行できてる。

ただ改行の仕方がWordPressのエディタとは違ってますね。
普通にエンターキーで改行できるやつ。
こっちが一般的なはずなんですが、WordPressでブログ書いてると逆に違和感がありますね(笑)
 

あとは肝心のプロフィール画像を入れないとですね。

公式には「htmlが使用できる」と書いてありました。
よく分かりませんが、テキストエディタで使用されてるタグってやつですよね? たぶん。

他の場所でテキストウィジェットを使った時も、別タブで開いたページでビジュアルエディタに書いて、それをテキストエディタに切り替えて表示させたコードみたいのをコピペして使っていたので、今回もその方法でいきましょう。
 

どうせビジュアルエディタを使うのなら、他の装飾等も一緒にやってしまいますかね。

んでまー左右分け表示だったりリンク張ったりしたんですが、なんか表示がおかしい…

文字のサイズが違っていたり、上下に無駄な余白が入っていたりする。

このままでも一応は読めるので気にしないって手もあるんですが…
 

なんだか気持ち悪いので、htmlとか分かんないけどコードを見て原因を探ってみる。

この間けっこー時間かかってしまいましたが、どうにか原因らしいのを特定しました。

<pタグ>です。

さっき書きましたが、このエディタでは改行はエンターで行なえるので、ここではそもそもpタグは使われていないんですよね。 brタグも。

ところが記事執筆用のエディタからコピペしてきたコードにはこれらpタグ・brタグが付いているので、二重に改行されてしまい、余計に空白が入ってしまっていた、ということみたいです。 たぶん。
 

原因が分かったので、ウィジェットのエディタから<p></p>を取り除いて表示を再確認したところ、文字崩れや意図しない余白がきれいに消えていました!

そういえば昔(というほどでもないけど)、テキストウィジェットに「自動で段落分けをする」みたいな機能ありましたよね?

現バージョンではこれが無くなったせいで、広告を入れると余計な空白が入るだとかの記事を読みましたね。 AFFINGER公式だったかな?

確か「カスタムHTML」ウィジェットを使えば解消できるとかだった気がしますが…
うろ覚え(-_-;)

自分にゃ関係無い話だと思ってましたが、たぶんこれそういうことですよね? 違うかな??

 

まっいいや。 上手くいったわけだしね。
すっっごい時間かかってしまいましたが、結果的にはちゃんとできたのでね。

あっ、そうだ。 備忘録にもう1つ。

今回サイドバーに使った「STINGERフリーボックス」
これはカスタマイザーの[フリーボックスウィジェット]からカラー変更が可能なんですが、ここはタグの「見出し付きフリーボックス」のデフォルトカラーにも反映されてるみたいですね。

今まで私は記事内で見出し付きフリーボックスを使ってきましたが、今回のカスタマイズでSTINGERフリーボックスにカスタマイザーから色を付けてしまったため、過去記事で使用していた見出し付きフリーボックスの色がおかしくなっていました

対応策としては、記事内で使用する方にはショートコードが使えるので、これからは毎回ここにカラーコードを入力して使うようにしました…。 め、めんどくせー(ll゚д゚)
 

おわりに

良いことばかりとはいきませんでしたが、今回のカスタマイズは見映えに大きく(はないかもしれないけど)影響したと思うので、頑張った甲斐はあったかなー、と。

さて、ではこれからのブログカスタマイズなんですが、あと2、3回かな? 順調にいけば。

次回はカテゴリーページのカスタマイズを予定しています。

全てのカテゴリーアーカイブにメタディスクリプションを書き、プラグインで並び替えて整理、って感じかな。
合わせてサイトマップの整理にもなるはず。 …たぶん。

おっと、ほぼ1万字だ。マジ卍。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.