ブログとメルマガでかせぐ初心者のアフィリエイト戦略と情報レビュー

大切なデザインを崩さない画像のaltテキストの作り方

外出先とかモバイル環境でいろんなサイトを見るときに

どうしても通信速度が遅いので画像表示をＯＦＦにしちゃうときってありませんか？

そんなときに本来画像が表示される場所に画像の説明テキストが表示されているのを

見たことがあると思います

ぶっちゃけ通信速度が遅いと画像が表示される前に強制的にテキストが

表示されることの方が多いか(^^;)

このテキストは【altテキスト】と言って、imgタグで画像の簡単な説明をテキストで

記述したものです

これをしないと画像が表示されないときには、そこになにがあるんだかわからん！

ということはもちろん、検索エンジンにもわからないのでとくに気をつけたいところです

たとえばロゴなんかそうですよね

これってデザインされた文字の画像ですよね

もし青いロゴ画像の説明文が青で書かれていたら・・

だから「文字色は指定するべし」なのです

しかもロゴはデザインされているわけですから

ただのフツーのテキストじゃいくらロゴが表示されないとはいえ

サイトの雰囲気にもあわなくなってしまうでしょう

じゃあ、どうするか

こういうロゴ画像のaltテキストのようにデザインを大切にしたいときは、ロゴに近いフォントや太字にして

背景色にもロゴの色と同様の色を指定しておくわけ。

そうすればできるだけ雰囲気を損なわずに訪問者に見てもらうことができる

ＣＳＳの指定の例としてこのロゴ画像を

#logo img{
background-color: #EC6089;
color: #ffffff;
font-weight: bold;
font-size: 2em;
}

にすると

これは背景をラベンダー色に、文字色はホワイト、フォントを大きく指定しています

画像の話になったので追加しておくと、サイトの画像を乗せるときは

必ずwidth属性とheight属性でサイズを指定すること。

つまり高さと幅を指定してやる

これをしなくてもブラウザは適切に処理してくれるけど

画像を読み込んでからＨＴＭＬの処理をすることになり

表示に余分な時間がかかってしまいます

googleではサイトの表示スピードも評価の一部になっているので

気を遣いたいところです

商材を購入する際は、必ず相談してください

あなたにとって本当に必要な商材をおすすめします

正しい方法で一歩踏み出せば必ず稼ぐことができるからです




こんなこと聞いて笑われないかな？とメール送信ボタンを
なかなか押せない、あなた・・

一緒に前に進んでいきましょう

⇒さくにメールする