テーマ『twentyseventeen_child』のアンダーライン修正

前々から気になってた第2弾なのですが、今使っているこの『twentyseventeen_child』というデフォルトでワードプレスに入っているテーマのアンダーライン、文字の色とは関係なく黒に設定されています。

↑こういう状態

デザインとか個人的にはほとんど弄る必要がないほど気に入ってるのですが(記事の幅を少し変更しています)、このアンダーラインだけちょっと文字色を変えた時に不自然な感じがしたので変更してみることにしました。

aタグの指定はこんな感じ。

aタグ自体のtext-decorationはnoneに指定して、記事内のaタグについてはbox-shadowプロパティでアンダーラインを描画しているようです。てかinsetと-1pxの指定で下線が出来るんですね、勉強なりますね。

:hover状態になったら、その下に新たに3pxのラインを引く感じですか。どういう仕組みかパッと見て分からないので今度何か作る時に実験してみよう。

しかしこのアンダーラインの指定の仕方、、

そう30 Seconds of CSS日本語訳⑧

で訳した30 Seconds of CSSの「29.良い感じのアンダーライン – Pretty text underline」と大体同じ!!

で、記事内でズバリ下線色を文字色から取得できるcurrentColorなる素晴らしい値が紹介されてるんですね。だからもうこれ以上特に書くことないんですけど。

これで違和感なしのリンクが出来ました! ヤッタネ!
(今読んでるホラーケータイ小説に飛びます)

11/1追記:
ついでなので記事作成画面でも反映されるようにeditor-style.css編集しておきました。

こっちはaタグ単体に指定すればOK。
それと昨日記事書いた後に大事なことに気が付きました。

リンク文字色の指定手順
リンク先を指定してから色を付けること!

 
色を付けてからリンクを貼るとアンダーラインは黒のまま。なぜかというと、ビジュアルエディターでは文字色を指定するということは「colorスタイルを属性指定したspan要素でテキストで囲む」ということだからです。

リンク済みのaタグの外側を文字色指定のspanタグで囲む = aタグの文字色がspanタグから引き継がれる = アンダーライン色も変化
色指定したspanタグの外側をaタグで囲む = aタグには色の指定が掛からない =アンダーラインの色はデフォルト

ということなんですね!
気を付けましょう!自分

 


リンクした「カラダ探し」というホラー小説、昨日の記事に感想書こうとして全部描き終えたところでブラウザが落ちて消えたのでやる気がなくなりました(mixi時代から伝統の流れ、ブログはメモ帳で書け)

要するにこの小説いわゆるケータイ小説なんですが、それが上手く作用して適度に怖くて面白い作品になってるよね的な話でした。カイジの鉄骨渡りの話なんかが顕著なんですが、実写とかリアリティが高まると物語の主題に対して状況の怖さが勝ちすぎてノイズになってしまうんですよね。っていうのは私が鉄骨から無言で落ちていくおじさんの話がカイジで一番好きなのに、映画で見たら超高層の鉄骨が怖すぎてそれどころじゃなかった時に感じたんですが、カイジのあの作風って確かに画力的には下手なんですけど話に余計なものは描いてない「上手さ」があるんですよね。

話し戻すと「カラダ探し」もレビュー見ると軒並み「典型的なケータイ小説の文章」と評される、地の文での情景・心理描写少な目でセリフ主体で構成される文体なんですが、ホラーの中に謎解き要素があり、同じシチュエーションが違うメンバーで繰り返される中でその謎が解けていくという、かなり設定が作り込まれてるストーリー重視の作品なんですよね。
ただその作り込まれた設定もめっちゃグロいし怖い。正直言うとこのケータイ小説レベルの描写じゃなかったら私は怖すぎて読めないです…(怖い話好きのビビリ)だからこのくらいの文体で読みやすさがジャンプでコミカライズまでされた人気の秘訣じゃないかなと思います。

というか「『典型的な』ケータイ小説」と言われる時点で、多分作者の人は読者に合わせて書いてると思います。作者の方中年男性だそうなので、ケータイ小説だけ読んで育ったわけじゃないでしょうし…。てか私も一回話題になったゴリゴリのケータイ小説読んだことあるけどあんなレベルじゃないですよ。散文詩かと思いました。

まぁそんなこんなで、実はこのカラダ探しもう読むの3回目くらいなんですが、スプラッターホラー嫌いじゃなくてweb創作怪談みたいなのが好きな人には結構おススメです。タダだしね。

コメントを残す

メールアドレスが公開されることはありません。