力技の行間調節の方法

アイコンでリンクの間隔を微調整

前のページでは、説明がながくなっちゃって、
ほんと、ごめんなさい^^;

前置きが長いね、文章力に自信の無い証拠ですよ(笑)

でも今回は、シンプルに手短に解説するので、ご安心を☆

今回のアイデアは、アイコンで(こんなの→)で、リンクの幅を微調整しようじゃないか、
というものです。

ふだん、「line-height」属性で、行の幅をある程度あけてると思うけど、
ふつうのテキストならOKでも、
リンクをタテに並べると、ちょっと窮屈な感じがしません?

こんな感じに。

リンク1
リンク2
リンク3
リンク4

下線がついちゃうからねー。
下線を消せば、解決するじゃんって思う人もいるかもしれないけど、
わたし的には、こういった設定は、あんまりいじりたくないっす。

メインメニューとか、見せるメニュー以外ではね。

やっぱりデフォルトのままのほうが、見るひとは見やすいだろうし。

それなら、そこだけ、「line-height」属性いじっちゃえば?

・・・・はい、まったくもってそのとおりっす(笑)

でもー、あんまり「line-height」属性のような、基本的な属性を、
部分的にいじることは、したくないんですよね。(なんかわがままに聞こえるなぁ)

だから、こういった、アイコンをつかって、リンクの感覚を微調整する方法を提案したいっす☆

この方法は、アイコン画像の縦幅をテキストサイズよりちょっと大きく設定しておく、というものです。

うちのは、高さが18px。 テキストサイズは12px。

これをつかうと、

リンク1
リンク2
リンク3
リンク4

ほら、さっきより間隔が広くなってるでしょっ。

アイコンがアイキャッチしてくれて、一石二鳥!
これで、リンクが並ぶところだけ、
その間隔を調節できるようになるので、「line-height」属性いじるより、わたしは好きだな♪

ちょっと、力技って感じもするけど(笑)

アイコン画像には、
align="absmiddle"を入れるのを忘れずにねっ!(わかんなかったらソース見てね、きたないけども)
管理人ビクトリーのホームページ制作サービス!

企業サイトからネットショップ、店舗紹介サイトや個人サイトまで、幅広くホームページ作りのお手伝いをさせていただいてます。
ちょっぴり個性的なホームページやイラストで、お客様の活動をアピールしませんか?。 お問い合わせなどはお気軽にどうぞ。

WEBデザイン アイデアロゴデザイン アイデア写真加工のアイデアカラーテクニック講座WEBデザイン コラム
Webデザイン通信講座アフィリエイトでサイト運営WEBデザイン ブックスHP作成ソフトグラフィックソフト
WEBデザイン関連のリンクわたくし的なレンタルサーバーの選び方ホームページ制作ランキング