下線や取り消し線に文字色とは別の色を指定する方法

テキストの修飾という事に関して、HTMLやCSSそのものを生業としている人達(SEやウェブデザイナー等)にとっては常識中の常識なのですが、ブロガーには意外と知られていない「ちょいテク」の類いが色々とありまして…

今回、ご紹介致しますのは、CSSを利用して下線や取り消し線に文字色とは別の色を指定する方法でございます。

↓こんな感じのヤツです。

文字色は黒のままで下線を赤くする。
文字色は黒のままで取り消し線を赤くする。

大抵のブログサービスでは、投稿編集画面の上の方に文字の修飾を指定するボタンが付いていると思われます。

【Bloggerの場合】

【Seesaaブログの場合】

任意の文字列を選択(ドラッグ)してからこれらのボタンを押すと、フォントサイズが大きくなったり、下線や取り消し線が引かれたり、あるいは文字色を変えられたりするワケですが…

あっ、ちょっと待って下さい。
「ふざけんな!!そんな事知っとるわ!!」と思いましたね??

ワタクシ、口調こそヘラヘラしていますが、中身はいつだって真面目な事を書いていますので、どうか最後までお読み下さいww

で、これらの文字修飾用のボタンですが、大抵の場合は必要最低限のタグの挿入しかしてくれません。
つまり、先に述べた「文字色は黒のままで、下線や取り消し線の色だけ××にする」といった、細かい指定ができないんですね。

試しに、任意の文字列を選択して下線を引き、その後に同じ文字列の色に赤を指定してみましょう。

↓すると、Bloggerではこうなります。

下線は黒のままで、文字色だけが赤になってしまう。

同じ事をSeesaaブログでやると、どうなるでしょうか?

↓すると、こうなります。



はてさて、こうなってしまう場合、両者のソースコード(HTML文)はどのように書かれているのでしょうか??
編集画面を、HTML文を直接記述するモードに切り替えてみると…

【Bloggerの場合】
<u><span style="color: red;">下線は黒のままで、文字色だけが赤になってしまう。</span></u>

【Seesaaブログの場合】
<div><span style="text-decoration: underline; color: #ff0000;">下線も文字色も共に赤になってしまう。</span></div>
このように、

・Bloggerの場合は、最初に<u>タグで下線を引き、次にスタイルシートで文字色を指定している。
・Seesaaブログの場合は、一文のスタイルシートで下線の付加と文字色の指定を同時に行っている。

という事が判ります。

つまり、下線や取り消し線の色と、文字の色を別々にするには、「二文のスタイルシートでそれぞれ別個に色を指定する必要がある」という事が推し量れます。

で、冒頭で表示してみせた、文字色は黒のままで下線や取り消し線の色を変える例のソースコードは以下のようになります。
●<span style="color: red; text-decoration: underline;"><span style="color: black;">文字色は黒のままで下線を赤くする。</span></span>

●<span style="color: red; text-decoration: line-through;"><span style="color: black;">文字色は黒のままで取り消し線を赤くする。</span></span>
それぞれ、最初の<span style>で「赤色を指定した下線や取り消し線」を引いた後に、二番目の<span style>で文字色を再び黒に指定し直している事がお解り頂けると思います。

さて、このテクニックですが、主に雑記ブログを書いているブロガーには特に必要ない知識だとは思いますが、専門性が高くなればなるほど、あるいは比較・レビューサイトの類いを運営している場合などは、情報の更新に応じて記事を加筆修正する必要が生じてくる場合があります。

そんな時に、例えば…
現時点でこの条例を採用しているのは東京都だけです。
【訂正】
再度確認したところ、2015年10月に神奈川県が、2016年3月に千葉県がこの条例を採用した事が判明しました。
SONY ウォークマン専用カナル型イヤホン/ブラック(MDR-NW750N/B)
\11,380 → \9,880 今月末まで!
こんな感じで使ってやると効果的ではないでしょうか。

参考までに。
【広告】

0 件のコメント :

コメントを投稿