Twenty Seventeen CSS リンクの下線

Twenty Seventeenの基本的なカスタムについて気になるところが残ったのでやっぱ書いときます。CSSの見た目、リンクの下線についてです。

広告

Twenty Seventeenはこれまでの複雑怪奇なテーマに比べてシンプルで筋が良いと褒めてきましたが、いくつかの部分で例外もあります。フロントページやheaderに仕込んだ巨大画像なんかそうですね。もうひとつ、リンクの下線も少々厄介です。

リンクを示すのはアンダーラインじゃなくて影

一般にリンクであることを示すのは青い文字と下線で、下線は text-decoration: underline だと思うのですがTwenty-Seventeenでは 文字色を変えずに下線として黒のbox-shadow を使ってます。

これですね。ボックスの底に1pxの黒っぽい影を作ってます。hoverのときは3pxの黒になります。

確かにtext-decoration: underline は私も嫌いなので使わない傾向にあります。線が文字とくっつきすぎているし本文の中が線だらけだと読みにくくって仕方ないからです。

リンク、hover時の太い黒線
hoverでは太い黒線

でもこの真っ黒けが気に入らない人は多くおられるんじゃないでしょうか。私も真っ黒はどうかとおもいます。

リンク下線の色を変える

親styleではRGBAで指定されているので慣れない人にはややこしいかも知れませんが「rgba(0, 0, 0, 0)」の数字は最初の三つがRGB、四つ目が透明度ですので、透明度を含めた素敵な色を設置できます。アニメーションの設定もされているからふわっとやさしく出てきますね(時間かけすぎやろと私はちょっと思う)

box-shadowを使ったギミックは悪くないように感じます。あまり気に掛けず、私も色を優しい青色に変えて済ませていました。しばらくはご機嫌でしたが、これには罠があります。

罠:画像の白枠

その罠に気づくのは小さな画像にリンクをあてがったときかもしれません。

シンプルにリンクつき画像を貼ると白枠が足されていることに気づきます。背景が白のままだと気づきませんね。Twenty Seventeenは余計な装飾や無駄な記述が少ないと褒めていたのに妙なところで色気を出してるんだなとちょっと思いました。「なんだこれ、枠なんかいらないし」と、子テーマで枠を消すことにします。

インスペクタで見てみると、親styleの1280行目付近に犯人がおります。

おや?この枠はborderじゃなくてこれもbox-shadowなの?ふーん、と、何も考えず、子テーマで消しますね。枠が邪魔だから当然そうします。余白が必要ならこっちでpaddingつけますし枠がほしけりゃborder書きますよ。と。OKOK、画像から枠が消えました。

これが罠です。よく見ると「Fixes linked images」って目次「10.0 Links」の中にありますね。わざわざbox-shadowで付けられた太い白枠は画像を飾る枠などではなかったのです!

白枠の本当の目的

リンクの下線
見逃しそうですが画像の下に下線が・・・

白枠を0に変えたら、画像に下線が出てきました。

画像リンクの下線(hover時)
hoverではさらに太く

「何だこれ、こんなのあったっけ?いずれにしても画像に下線はいらねえよ」と、画像のbox-shadowを消したことと関連があることに気づかないままこれを消そうとしてあれこれ試みます。まずはシンプルに「a img { box-shadow: 0;} とか、書き足すわけです。でも上手くいきません。さらにいっぱい書き足します。消えません。

もちろん「img」からは下線のbox-shadowが消えるんです。でもね、img を包む「a」には下線が付くんです。親が線付けたら子に線がなくても線が現れます。

子のbox-shadowを 0 にすると親であるaのbox-shadowが生きてきます。子のbox-shadowを、親より太い白線にしてやると、そっちが優先され一見したところ黒線は消えるのです。より太い白線があるだけなんです。無理矢理やろそのやり方。

狭い影では黒線が消えない
細い白線では消えないの
太い白縁
太くすると誤魔化せるの

「画像を包むa」を指定できない

CSS3にはいろんなセレクタがあります。セレクタを駆使するといろんな指定が事細かにできますね。でもね、決定的な欠陥があって、それは親の要素を指定するセレクタなんてのはないってことです。

<p><a href=”#”><img></a></p>

こういうとき <p>から<a>や<img>に対してはセレクタで指令できますし、<a>は<img>に指令できます。しかし<img>から<a>や<p>に指令を発することができません。

画像の線を消したいとき、<a>の下線を消したいんだから対象要素は<a>で条件は<img>ですよね。「aに包まれたimg」なら指定できますがそうではなく「imgを包むa」を指定したいわけです。でもどうしても出来ません。実はそのようなセレクタはありません。

私は無知ですからそういうセレクタがあるに違いないと思って探しまくりましたがないものはないです。噂ではcss4ではそのようなセレクタが登場するかもということですが今はありません。

白縁は装飾ではなく粉飾

そのような状況でTwenty Seventeenが行った解決策が「imgに対してaが付ける黒線より太い白線を付けて無理矢理誤魔化す」ことでした。このやり口は褒められたもんじゃありません。おかげでリンクのある画像にはすべてぶっとい白枠(しかも正体は影)が付くことになりました。

画像に白枠をつけたくないときには画像個々に対して工夫しなければならなくなりましたね。これは面倒です。

まるで最初の小さな嘘を誤魔化すためにより大きな嘘をつきまくり周りを巻き込んで近代国家を全否定するほど収集のつかなくなったどこかのアホボンみたいな状況です。

「テキストにはリンクの線を付けて画像にはつけない」このシンプルな要求を満たすのは、box-shadowなど使わず text-decoration: underline を使えばいいんですよ。なーんだ簡単なことです。

さまざまな解決方法

とはいえ、私個人もtext-decorationを好まなくて、box-shadowのアイデア自体は悪くないと思ってるところもあります。ですので解決の方法を探りたいのです。

気にしないかセレクタなどを駆使する

まずは太い白枠を気にしないという解決方法もあります。本文の中に入れる場合など、実際に気にならない局面が多いです。

しかし背景色のあるサイドメニューに画像をいれるなど、気になる場合も出てきます。ですからCSSで細かく指定してあげたりして乗り切ります。例えば
.entry-content a img { }
.widget a img { }
footer.site-footer a img { }
body:not(darkmode) a img { }
みたいに場所別に細かく、セレクタを駆使して細かく、いちいちbox-shadowの白を背景色に合わせたものを用意します(影を消すことはできません)

現実的な解決策ですが、背景色を変更することもあるでしょうし、後で面倒なことになってくる予感がします。

aにクラスを付ける、あるいはaを囲む

imgを包んでいるaにクラスを付けて、そのクラスでbox-shadowを無効にしてしまうという力技もあります。親に書かれていないクラスなのでbox-shadowの色とかそういうレベルじゃなく親の影を完全に無効にできます。
画像を貼る度にaにクラスを書き入れるのも面倒なことで、いっそaごと<div>とか<figure>とかで囲んでしまうというのもありですね。囲んでしまうものにクラスを仕込んでおけばaにクラスを付けるのと同様、親の影響を受けずに解決します。
どっちにしろ新規クラスは必要になってきますし、画像を貼る度に一手間付け加えるのは思いのほか苦痛な作業になる予感がします。

box-shadowを全部やめちゃう

試しにいろいろやってみて私が出した結論はこれでした。何をやっても面倒臭いしもううんざりです。box-shadowの下線なんかいりません。text-decorationも嫌いです。やめちゃえやめちゃえ。線なんかいらない、アンチ線、反線。リンクテキストの色を青くしてhoverで目立たせるだけで十分だ。

これなら簡単ですね。親から11258行目付近「10.0 Links」を持ってきて 該当のbox-shadow を 0 にして文字色 coler を変更します。もちろん画像の太い白枠もしっかり消します(これが必要ないなら何もしなくていいんですから)

親styleからの改変は最小限、余計なクラスも作らなくていい、画像を貼るときにいちいち気をつけなくてもいい、実にシンプルな解決策でした。

 

Digital Boo Pennguin Iconシリーズ記事の目次はこちらです Twenty Seventeen カスタマイズ
広告
Twenty Seventeen カスタマイズ / 基本カスタム
カテゴリーWordPressタグ
このエントリーをはてなブックマークに追加

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください