読者です 読者をやめる 読者になる 読者になる

テキストの組み合わせでデザインする際のポイント

文字を画像にせず、なるべくテキストで表示させたい(seo的な観点から)ということがあるかと思います。

例えば

↓のようなデザインであれば

f:id:kojiokano:20161212170615j:plain

 

↓のようにほとんどデザインを崩さずテキスト化が可能です(ブラウザによって見え方は多少かわります)

f:id:kojiokano:20161212170626j:plain

 

この例のように漢字とひらがなで文字サイズなどを変更する際はspanクラスでそれぞれの文字を選択し適応するcssを変えます。そのとき隣り合うspanクラスの間に大きな隙間が空きます。通常文字間のスペースの変更にはletter-spacingを使いますが、隣り合うspanクラスの間の隙間には適応されません。そこで左に表示されているspanクラスのmargin-rightにネガティブマージンを設定してやることで右に来るspanクラスの位置を調節できます。

調節は細かく面倒ですが、ページの関連度が上がれば検索をかけたときにより上位に表示されますし、リスティング広告などの料金も下げられる可能性があります。その他にも画像が無いことでページの読み込みが早くなったりといいこと尽くめですので、時間があるときはなるべくテキスト化をしてみてはいかがでしょうか。