flashからhtml5対応へ

WordpressロゴタブレットPCなどではこのサイトのタイトルロゴがFlashで作ったものなので表示されませんでした。
一応気にはなっていたけれど,そろそろデザインも変えた方が…なんて考えると,新しいアイデアはでてこないまま,ズルズルとほったらかしにしてしまいました。

ANDROID JBにて ANDROID JBにて

iPhoneでの表示iPhoneなどはWPtouchを利用しているので,現在のところロゴの問題はありません。

とりあえずデザインは据え置き,SVGで作成することを考えてみました。

コードふい字HG丸ゴシックM-PROメイリオMS明朝
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	width="150" height="100" viewbox="0 0 150 100" preserveAspectRatio="xMinYMin slice">

	<g id="su">
		<rect x="100" y="0" width="50" height="50" rx="5" ry="5" stroke="gray" stroke-width="1" fill="yellow" />
		<text x="102" y="43" font-weight="bold" font-size="48" fill="black">す</text>
	</g>
	<g id="a">
		<rect x="0" y="50" width="50" height="50" rx="5" ry="5" stroke="gray" stroke-width="1" fill="yellow" />
		<text x="2" y="93" font-weight="bold" font-size="48" fill="black">あ</text>
	</g>
	<g id="xtu">
		<rect x="50" y="50" width="50" height="50" rx="5" ry="5" stroke="gray" stroke-width="1" fill="yellow" />
		<text x="55" y="93" font-weight="bold" font-size="48" fill="black">っ</text>
	</g>
	<g id="pu">
		<rect x="100" y="50" width="50" height="50" rx="5" ry="5" stroke="gray" stroke-width="1" fill="orange" />
		<text x="100" y="93" font-weight="bold" font-size="48" fill="black">ぷ</text>
	</g>
</svg>

あっぷすロゴ

あっぷすロゴ
※WindowsPC以外では,別の書体で表示されます

あっぷすロゴ
※WindowsPC以外では,別の書体で表示されます

あっぷすロゴ
※WindowsPC以外では,別の書体で表示されます

しかしSVGは今でも一部では未対応のブラウザもあるし,この場合閲覧環境によって表示されるフォントが変わってしまうので,文字は画像にしなければなどと考えていたところ,SWFファイルをHTML5形式に変換してくれるGoogle Swiffyであっけなく解決。今回はこれで行くことにしました。

ちなみにロゴ文字あっぷすの事はこちらをご覧いただけるとありがたいのですが,開業してから今年で12年とは早いです。
サイトもはじめの頃はホームページ・ビルダーを使ったり,小回りきかないところは直接書いたり…その後CMSをセットアップして,そこにブログモジュールのせて公開していたこともありました。
今のWordpressに変えたのは2012年から。
ロゴはずっと同じものを使ってきた訳だけれど,もう少し頑張ってもらおう。

[amjsc] \[amazonjs asin=4839952221\] [/amjsc]