文字（テキスト）の修飾という事に関して、HTMLやCSSそのものを生業としている人達（SEやウェブデザイナー等）にとっては常識中の常識なのですが、ブロガーには意外と知られていない「ちょいテク」の類いが色々とありまして…
今回、ご紹介致しますのは、CSSを利用して下線や取り消し線に文字色とは別の色を指定する方法でございます。
↓こんな感じのヤツです。
文字色は黒のままで下線を赤くする。
文字色は黒のままで取り消し線を赤くする。
大抵のブログサービスでは、投稿編集画面の上の方に文字の修飾を指定するボタンが付いていると思われます。
任意の文字列を選択（ドラッグ）してからこれらのボタンを押すと、フォントサイズが大きくなったり、下線や取り消し線が引かれたり、あるいは文字色を変えられたりするワケですが…
あっ、ちょっと待って下さい。
「ふざけんな、そんな事知っとるわ！！」と思いましたね？？
ワタクシ、口調こそヘラヘラしていますが、中身はいつだって真面目な事を書いていますので、どうか最後までお読み下さいww
で、これらの文字修飾用のボタンですが、基本的に必要最低限のタグの挿入しかしてくれません。
つまり、先に述べたような「文字色は黒のままで、下線や取り消し線の色だけ××にする」といった細かい指定ができないんですね。
試しに、任意の文字列を選択して下線を引き、その後に同じ文字列の色に赤を指定してみます。
↓すると、Bloggerではこうなります。
下線は黒のままで、文字色だけが赤になってしまう。
同じ事をSeesaaブログでやると、どうなるでしょうか？？
↓すると、こうなります。
【Bloggerの場合】
<u><span style="color: red;">下線は黒のままで、文字色だけが赤になってしまう。</span></u>【Seesaaブログの場合】
<div><span style="color: red; text-decoration: underline;">下線も文字色も共に赤になってしまう。</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 今月末まで！
こんな感じで使ってやると効果的ではないでしょうか。
参考までに。
