2024年10月

ご無沙汰しております。 テックアカデミーの卒業プレゼントのバナー案件保証に挑戦したり、 クラウドワークスに応募をかけたりと色々していてブログが滞ってしまいました； 今回はファビコン(favicon)を作成し、設置しました。 ブログはワードプレスのファビコンのままになってるのもよくなかったし、 オリジナルのデザインに変えたいと思っていたので、早めに作成し変更しました。 ファビコンがあると大分オリジナリティのあるサイトの感じがして 気分がアガりますね(^^* ファビコンとは知らない人に説明すると、タブの横に表示されるアイコンのことです。 お気に入り（favorite）に登録したときに表示されるアイコン（icon）を 略してファビコン（favicon）と呼ばれるそうです。 ファビコンのデザイン案 デザインはPhotoshopで簡単に作成しました。 苗字のkayamaは全てア行でaが付くので、「K」「Y」「M」を一文字ずつ４マスの濃緑に並べて、 「A」だけを白色に入れることで「KAYAMA」と読むというロゴにしてみました。 フォントを並べただけなのでかなりシンプルです。 フォントはフリーフォントの「装甲明朝」を使わせていただきました。 なんか美容院のロゴみたいでお洒落でかっこいいです。 ファビコンは画像が小さく、細かいデザインは良く見えなくなってしまうので、 シンプルで良いと思いあっさりめにしました。 HTMLでのファビコン設定 ファビコンの設定はHTMLの&lt;head&gt;にコードを入れることで設定することができます。 &lt;link rel="icon" href="指定したいファイル"&gt; 相対パス(./images/~みたいな感じの)で入れました。 複数ページあるとトップだけ設定して他のページの設定を忘れてしまう可能性あるので 忘れぬうちに他のページの&lt;head&gt;内にもコピペして入れました。 PCのファビコンだけならこれでOKなのですが、今はスマホ・タブレットの時代なので、 スマホなどでホームにブクマした時にもアイコンとしてファビコンが表示されるように設定します。 &lt;link rel="apple-touch-icon" href="指定したいファイル"&gt; このコードを入れるとスマホのブクマアイコンにもファビコンが表示されます。 ↓がスクショした画像。 こうやって自分が作ったものが身近なスマホで表示されるとちょっと嬉しいですね(*^^*) ファビコンというのはタグに表示されるだけじゃなくて、 今やスマホなどのアイコンにも使われているんですね。 注意としてはそれぞれサイズが違うので、 タグのファビコンは16px × 16px apple-touch-iconは256px × 256pxです。 Wordpressでのファビコン設定 Wordpressではテーマによって違うと思いますが、カスタマイズから 設定することが出来ました。 自分が使わせていただいている「yStandard」ではファビコンのサイズは、 512px × 512pxと、かなりでかめでした。 ものによってサイズが違うものがあるのでファビコンを作る時にはあらかじめ大きめに 作成した方が良いですね。 今の所ポートフォリオサイトとブログで同じファビコンを使いまわしていますが、 並べた時に同じだと区別がつかなくなるのでそのうちこれもデザインを分けたいところですね。 一旦は色を変えるだけでもいいかも？ ではでは。

月	火	水	木	金	土	日
	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

2024年10月

Figmaの勉強

ファビコンを設置しました

Categories