人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

テキストリンク 文字背景/反転背景 の高さ調整(1)

2016年 02月 04日
私のスキンのブログタイトル部には、テキストリンクを幾つか並べています。 それらは私自身や訪れた人に便利な案内スイッチとして機能するものです。

このリンク文字のデザインで気になっていたのが、マウスが上に来た時(fover時)の白背景の高さのバランスです。 使用フォントにより微妙に違う様ですが、たいてい白背景に対して文字が上寄りになってしまいます。 リンク文字のひとつを拡大すると、思った以上に上下余白の差がありました。
テキストリンク 文字背景/反転背景 の高さ調整(1)_b0174191_13260416.png
このバランスの悪さで、リンク文字の配置も上寄りになって残念です。 今回は、これを調節しました。



この部分の従来のHtmlです。
   <div id="HEADER_R">
<a href="#toollink">□</a> /* リンク① */
<a href="/i0/">Recent Update Page</a> /* リンク② */
<$adminmenu type=2$>   /* リンク③ */
</div>
①②③の3個のスイッチが並んでます。
関連する従来のCSSは
#HEADER_R {
display: table-cell; /* ④ 内包した要素の縦位置調整 */
font-size: 16px; /* 固定サイズで背景とのズレを防ぐ */
font-weight: normal;
color: #c1e2fa;
white-space: nowrap;
vertical-align: middle; /* ⑤ 内包した要素の縦位置調整 */
padding: 6px 0px 0px; /* ⑥ 内包した要素の縦位置調整 */
text-align: left; }

#HEADER_R a {
padding: 0px 4px 0px; /* ⑦ リンク背景の横幅調整 */
margin: 0px 6px 0px; } /* ⑧ リンク間の横間隔の調整 */

このCSSで、リンク文字の高さ配置の要点は、
④「display: table-cell;」⑤「vertical-align: middle;」により親ブロックの高さ中央に内包する「a要素」を配置させ、⑥「padding: 6px 0px 0px;」で高さ位置の微調整をしています。
注意が要るのは、⑦⑧の「padding」「margin」では、「a要素」(リンク文字)の高さ位置は全く調節できないことです。



テキストリンクの反転背景の高さ調整は、その「a要素」に「inline-block属性」を与えることで可能になります。

これは、今回の調整の最も肝心な部分です。 この指定がないと、⑦⑧の縦調整は一向に効かないのです。 (これは「a要素」の本来の規定に拠る様です)
単に「block属性」を与えることも出来ますが、それではリンク文字どうしが縦並びになろうとします。 横並びにさせるために「inline-block属性」が必要です。 この属性指定で、リンク文字は自在に配置や背景の高さを調節可能になります。

先のCSSの上側の項の⑥は、親ブロックの内包域の全体をズラし、中の要素の高さ位置を調節するものです。 「a要素」自体で調節可能になるので、この⑥は削除しました。 そして、下側の項でリンク文字の微調整を全て行ったものが、下のCSSです。

#HEADER_R {
display: table-cell;
font-size: 16px;
font-weight: normal;
color: #c1e2fa;
white-space: nowrap;
vertical-align: middle;
text-align: left; }

#HEADER_R a {
display: inline-block; /* a要素に inline-block を指定 */
padding: 2px 4px 0px; /* リンク文字背景の周囲の余白を調整 */
margin: 8px 6px 0px; /* 配置の高さ位置の調整 */
line-height: 20px; } /* リンク文字背景の基本高さを指定 */

CSSの下側の項の調整開始時、「display: inline-block;」「line-height: 10px;」の指定だけでは、上側の項で⑥を削除したので、ずいぶん上に寄ります。 また、背景(白)の高さが足らず、下の様になりました。
テキストリンク 文字背景/反転背景 の高さ調整(1)_b0174191_15152206.png
「line-hight: 20px;」と改めると、背景の下側の納まりは適度です。
テキストリンク 文字背景/反転背景 の高さ調整(1)_b0174191_15192596.png
しかし、背景の上側と下側のバランスが悪く、これを上padding値(2px)で調整。 つまり「padding: 2px 4px 0px;」と指定して、下の様に改善しました。
テキストリンク 文字背景/反転背景 の高さ調整(1)_b0174191_15213999.png
最後に、全体の高さ位置を 上margin値(8px)で調整。 つまり「margin: 8px 6px 0px;」を指定して下の様に仕上がりました。
テキストリンク 文字背景/反転背景 の高さ調整(1)_b0174191_15263485.png
以上の様に、「inline-block」を指定したことで、反転背景の大きさや文字配置が完璧に調整できたわけです。



ついでに、「マイデータ」を表示するテキストリンクを追加しました。「マイデータ」のアドレスは「http://www.exblog.jp/mydata/favorite/new/」です。 ログインしているエキサイトユーザーは自分のマイデータ、それ以外はエキサイトブログのトップページに飛ぶリンクになります。

従来のHtmlに、一行追加しています。
   <div id="HEADER_R">
<a href="#toollink">□</a>
<a href="/i0/">Recent Update</a>
<$adminmenu type=2$>
<a href="http://www.exblog.jp/mydata/favorite/new/">My Data</a> /* 追加 */
</div>

リンクが増えたので「Recent Update Page」は「Recent Update」と簡略化しました。



by Ataron | 2016-02-04 15:56 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。