研Q88.HTMLの取り消し線の色を変える方法または二重取消線にする方法
取り消し線を目立たせる方法を調べてみました。
photo by glen.dahlmanやさしいブログの作り方の松田さんが、二重線のアンダーラインを引く方法というすばらしい記事を書いていらっしゃいます。
松田さんがこの方法を発表されて以来、二重線のアンダーラインをブログで使う方が増えたようです。
⇒ 二重線のアンダーラインを引く方法｜やさしいブログの作り方
↑記事に書かれていることはすばらしいのでありますが、アンダーラインで語句を強調するということをほとんどしない僕には、他にやりたいことがありました。
取り消し線は、たいていのブログの記事エディタにボタンがついているのでよく使う方もいらっしゃるかと思います。
FC2ブログの場合は記事エディタの↑ここにボタンがついています。
取り消し線を引きたい語句を選択して反転させておいてから、打ち消し線ボタンをクリックすればOKです。
ただし、打ち消し線ボタンで引くことができるのは、普通の一重線の
普通の一本線の取り消し線だと、文字に埋もれてしまってわかりにくいんですよね。
取り消し線をもっと目立たせるには、一本線の色を変えるか取り消し線を2本線にして二重取り消し線にするかのどちらかだと思います。
ふたつの方法では難易度に違いがあります。
簡単な、取り消し線を赤くする方法と、
ちょっと手のかかる二重取り消し線です。
一重取り消し線の色を変える方法。
一重取り消し線ならタグコードだけで表現できます。<span style="text-decoration:line-through;color:red;">一重取り消し線</span>
というタグコードで色を赤くしてみます。
↓
一重取り消し線
文字まで赤くなってしまったので、文字を改めて黒くします。
<span style="text-decoration:line-through;color:red;"><span style="color:black;">一重取り消し線</span></span>
↓
一重取り消し線
もちろんタグコードの中で「red」と書いてある部分を変えると取り消し線の色を変えることができます。
カラーネームでなくて、「#ff0000」のようなカラーコードでもOKです。
タグコードがちょっと長いですが、次の取り消し線を二重線にする方法と比べるとはるかに簡単です。
二重取り消し線を引く方法。
この方法は、背景画像で取り消し線のように見せています。なので、取り消し線は文字の背面に引いてあります。
■ ■ ■ ■ ■
ほらね、取り消し線が文字の背面になっています。
一重取り消し線だと
■ ■ ■ ■ ■
文字の手前側に取り消し線があります。
■のような文字だとバレてしまいますが、普通の文字だとほとんどわからないと思います。
背景画像なのでもちろん画像ファイルを使ってあります。
↑色つき背景のブログでも使えるように、背景を透明化してある画像です。
（自分で作った画像なので、お持ち帰り自由＆クレジット不要です。）
CSSでこの画像を背景にしてあるので、二重取り消し線を引きたい部分では
<span class="doubleline">二重取り消し線</span>
というタグコードを書くだけです。
二重取り消し線の引き方は、アメブロ向上企画書さんがブログに書いてくださっています。
⇒ ＣＳＳ 二重の取消し線・打ち消し線｜アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！
ブログ名は「アメブロ向上企画書」ですが、CSSとタグコードのことなのでアメブロ以外のブログでも使うことができるはずです。
 表示 - 継承 2.1 |
初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
ツイッター でも、更新案内を流しています。
RSSリーダーとは？⇒ ＲＳＳってなんなの？
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
記事末尾200posted by +M Inamura (水村亜里)
- 関連記事
-
- 研Ｑ91.ブログにはどんな文章を書けばいいのか？
- 研Q89.アクセスアップの切り札、逆アクセスランキングとは？
- 研Q88.HTMLの取り消し線の色を変える方法または二重取消線にする方法
- 研Q87.今日は二十四節気の芒種。こよみほど確実なブログネタはありません。
- 研Q84.HTMLで描く色つきのアンダーラインを上下左右自由自在に設定する方法。
Tweet
