ぷれこ描きました

誰よ?

と思われがちですが、
最初のWEBサイトを立ち上げてから、サイト(サークル)のマスコットキャラという事になっている娘さんです・3・
作ったゲームのアイコン画像とかになっています。
(たまにゲームにもチョイ役で出ています)

ゲームのアイコンに使われていました

スポンサードリンク
↓ 記事の続きはこちらから

スマホのゲームを作りまくる予定に対して、何かサイト(サークル)のシンボルになるような画像が欲しいという事で制作しました。
不本意ながら、おっさん達が怒り合ってばっかりなサイトなので少しは華やかさもできたでしょう・3・;

サイト名の隣でお出迎えします

そういう訳で今回は今風にSVG画像を作りました。
ベクタ画像でまともにお絵かきしたのは初めてですが、結構楽しいですね。
ベクタ画像だからいくらでも大きくできるぜ!!
画像ファイル自体は左上の小さいのと同じデータですが、画面サイズやブラウザの横幅にあわせて下の画像も大きくなりますよ。
うーん、レスポンシブ。

SVGで描いたぷれこ

よく見たらリボンが交差しているが私は気にしない事にする。
だから君たちも気にするな!

気にするな!

見え方をエンジン側で調整しているのか、iOS実機のブラウザで見たら左上の小さい画像もやたらハッキリクッキリ映ってちょっと感動しました。
(iOSではSafariの機能を基にしたブラウザしか作れない規約だった気がするので、根っこの部分は全部同じはず?)
反面、IE11では今のCSSだとちゃんと表示されないみたい・3・;

ie11だとcssが効かない

1つのAタグで画像とh1要素のテキストにリンクをつけたかったのですが・・・
気合があるときになんとかしよう。

Edgeならちゃんと見えます・・だったならもう今のままでもいいや・3・;

今回の画像作成にあわせて、スマホで見たりホーム画面にリンクを追加した時の画像も専用のものになっています。

スマホ用アイコンも設定しました

最初は背景が透明色指定だったのですが、iOSで壁紙を無視して真っ黒になったので(Androidは不明)無難そうな白色にしつつ、
「うちは青系が中心のサイトなので、そういう色でもよかったかもね」と思ったりしました。
ところがAndroid版Chromeのブックマーク画面で、
ただでさえ小さくなりすぎてしまったのと、白色だとまわりに埋もれている感がすごかったので、背景色だけで「ああ、あそこね」と連想できるように暗い青にしました。

白色ではまわりに埋もれてしまった

画像の通り、faviconもそっちはそっちで読み込んでいるらしいので、faviconを表示してくれたらいいのになあとは思います・3・;

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください