研Q88.HTMLの取り消し線の色を変える方法または二重取消線にする方法 - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

研Q88.HTMLの取り消し線の色を変える方法または二重取消線にする方法

取り消し線を目立たせる方法を調べてみました。

Johannes Vermeer - 無料写真検索fotoq
photo by glen.dahlman


やさしいブログの作り方松田さんが、二重線のアンダーラインを引く方法というすばらしい記事を書いていらっしゃいます。

松田さんがこの方法を発表されて以来、二重線のアンダーラインをブログで使う方が増えたようです。
二重線のアンダーラインを引く方法|やさしいブログの作り方

記事に書かれていることはすばらしいのでありますが、アンダーラインで語句を強調するということをほとんどしない僕には、他にやりたいことがありました。

打ち消し線取り消し線をもっと目立たせたいということです。

取り消し線は、たいていのブログの記事エディタにボタンがついているのでよく使う方もいらっしゃるかと思います。

FC2ブログで打ち消し線を引くボタン

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でカスタマイズ、オリジナルなスキンに挑戦!

ブログ名は「アメブロ向上企画書」ですが、CSSとタグコードのことなのでアメブロ以外のブログでも使うことができるはずです。




 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
Subscribe with livedoor Reader My Yahoo!に追加 

ツイッター でも、更新案内を流しています。                          

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/88-dbe393fc

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。