よくよく考えたら、すぐわかりそうなものなのに、
いまさらながらわかったことがあります。
このスマホ版のホームページです。
このマル印のロゴが・・・
今までずっと、
ちょっと、大きいのが気になっていました。
もう、何年も・・・
かねてより、どうやったらええのか
チャレンジしては失敗を繰り返してきました。
そもそもの仕組みをちょっと説明しておきましょう。
このホームページはレスポンシブデザインといいます。
作成方法は、ひとつのホームページを作って
みる側の端末サイズにあわせて
表示方法を変えています。
PC画面とスマホ画面じゃ、横幅が
全然違いますよね。
その横幅にあわせて、見やすいように
表示方法を分岐させています。
ですから、PC用、タブレット用、スマホ用など
１個１個ホームページを作っているわけではなく、
表示だけを変えています。
このサイズの端末で見ている時は
文字はこの大きさで、画像はこの大きさで
表示してくださいねぇっていう
指示をいれています。
分岐して表示さすのは、
文字サイズや、画像サイズを変更さすのが
一般的で、時には、
メニューバーのように形そのものを変えてしまうことも可能です。
この時は、PCサイズではこのメニューバーを
表示して、
スマホサイズの時は、PC用メニューバーは
表示しないように指示し、
新たに、別のスマホ用メニューバーを
表示するように指示をいれます。
そして、問題のロゴですが、
CSSで、background表示する方法もありますが、
やっぱり、ロゴにはリンクを貼りたいので、
htmlに<a>(リンク)を入れたいわけですわっ
それで、ふと舞い降りてきました。
じゃ、できました。
PC版では、103pxですが、
スマホ版では、80px
約20％ほど小さく表示できました。
ようやく、しっくりときました。
そもそもこの手法は、このブログでも
よく使っていたことなんですけどね。
全然頭の中でリンクしてなかったんですよ。
imgタグ自体を必至で何とかしようと思っていたんですが、
結局、親要素の中のimgやったので、
親要素ごと 〇〇 imgでCSS処理すれば簡単にできました。
な～んで、今までこんなに手こずってたのか？？？
不思議ぃ～
ぜひ、プチリニューアルしたホームページをご覧ください。
果たして、20％小さくなっただけのロゴわかりますかねぇ