CSS 打ち消し線・取り消し線
前の記事に付いての問い合わせ・・・・
打ち消し線
記事を書くとき、範囲を指定してこのボタン↑ を押すと <strike>打ち消し線</strike>
※実は以前の記事で打ち消し線のボタンをマーカーになるようにしていますので 上は<s>を使っています
打ち消し線
HTMLで打ち消し線を引きたい部分の前後に <s>と</s>をつける <s>打ち消し線</s>
打ち消し線
HTMLで打ち消し線を引きたい部分の前後に <del>と</del>をつける <del>打ち消し線</del>
これらが打ち消し線をつける方法です・・・・
でも・・・・
やりたかったのは
黒字に赤線で打ち消し線を引く
上のような方法では文字と線とは同じ色になってしまいます・・・・
なのでＣＳＳでtext-decoration: line-through;テキストに打ち消し線を使います
.uchikeshi {/*打ち消し線*/
text-decoration: line-through;
color: #ff0000;
}
この文章は間違っている
でも削除してしまうより打ち消し線を使い
後々の参考にしよう・・・・
これをアメブロのエディタで書いてHTMLを見ると
<p>この文章は間違っている</p>
<p>でも削除してしまうより打ち消し線を使い</p>
<p>後々の参考にしよう・・・・</p>
<p class="uchikeshi">この文章は間違っている</p>
<p class="uchikeshi">でも削除してしまうより打ち消し線を使い</p>
<p class="uchikeshi">後々の参考にしよう・・・・</p>
コレでもいいのですが今回は段落にまとめて
<div class="uchikeshi">
<p>この文章は間違っている</p>
<p>でも削除してしまうより打ち消し線を使い</p>
<p>後々の参考にしよう・・・・</p>
</div>
こうしてみました・・・すると
この文章は間違っている
でも削除してしまうより打ち消し線を使い
後々の参考にしよう・・・・
と、文字まで赤くなってしまいます・・・・
そこで<div class="uchikeshi"> と </div>の内側に文字は黒ってCSSを入れればＯＫ
で、ほとんど使わない em （強調-斜体）に黒文字を設定してみました・・・・
実はコレはミスだったんですが・・・・
.uchikeshi em{/*打ち消し線文字*/
color: #000000;
}
<div class="uchikeshi"><em>
<p>この文章は間違っている</p>
<p>でも削除してしまうより打ち消し線を使い</p>
<p>後々の参考にしよう・・・・</p>
</em></div>
こうすると・・・・
この文章は間違っている
でも削除してしまうより打ち消し線を使い
後々の参考にしよう・・・・
今度は文字は黒くなっています
が、
・・・・・なぜか設定していない黄色の背景が？
IEではこうなってしまいます・・・・・・？
実は・・・・
以前の記事・・・・
で、emにマーカーを設定していたのを忘れていました
.entry .contents em{
padding: 2px 0;
background-color: #ffff66;
font-style: normal;
}
ですので em と、したために文字は黒くなりましたが
マーカーも付いてしまったわけです・・・
面倒だからこのままでいいや・・・・・
って、そのままにしておいたために
どやっているんだろってみなさまを惑わせてしまいました
id名 とか class名 は自分で勝手に付けてかまわないのですが・・・
私のようにその場で適当につけていると
前につけたのと同じ名前を使ったりして何でこうなったんだろ？
って自分で悩むことになります・・・・・ ご注意下さい
ということで・・・・
.uchikeshi .mojikuro{/*打ち消し線文字*/
color: #000000;
}
<div class="uchikeshi"><div class="mojikuro">
<p>この文章は間違っている</p>
<p>でも削除してしまうより打ち消し線を使い</p>
<p>後々の参考にしよう・・・・</p>
</div></div>
この文章は間違っている
でも削除してしまうより打ち消し線を使い
後々の参考にしよう・・・・
これがやりたかったことです・・・・・
※ついでに余計なことですが・・・・
上でid名は自由に勝手に付けていいです・・・
なんて書いてありますが・・・・
使い方には注意が必要です
同じ名前のid は 1ページに1つだけという約束があります
1つ使ったら同じid名は、同じページでは使えません・・・・
1つの記事ではありませんよ
1ページですからね
つまり・・・・
トップで表示する記事数を10記事にしている方は
前後10記事の中で同じid名は使えないということです
classは1ページ中でいくつ使ってもかまいませんので気にしなくてもいいです
CSSで・・・・
#abc は id名 HTMLでは id="abc" で指定します
.abc は class名 HTMLでは class="abc" で指定します
※ついでにもっと余計なことですが・・・・
上のＣＳＳでで文字色の黒を color:#000000; と指定していますが・・・
#000000 は黒ですから間違ってはいません
でもホームページとか・・・このアメブロでもそうですが
文字色の黒は #333333 を普通は使います
一般的にディスプレイの白地に#000000の黒字では
コントラストがはっきりしすぎて目が疲れるんです・・・・
そこで見た目には黒に見えますが#333333と少しグレーぽい黒を指定します
自分でホームページとか作られる場合は覚えておいて使ってください
まっ・・・見た目ではわからないんですけどね
こちらの文字色は#000000です
こちらの文字色は#333333です
違いがわかりますか？ でも目には優しくなるんです・・・・
スキン スタンダードのベーシックを選択されているみなさま・・・訂正
あっれ～・・・・・？？？
現在はさわれるようになっています
ベーシックを使われている方からの質問とか
コメントでもいただいていましたので
確認のため変更したときはさわれなかったのに・・・・
どちらにしても
ベーシックはカスタマイズしにくいところもありますので・・・・
変更を勧めます・・・・・ 負惜しみ？
アメブロさま・・・・
また何かやりましたか・・・・？
スキンでスタンダードのベーシック・・・
ベーシックですよ・・・・
味も素っ気もないスタンダードのベーシックですよ・・・・・
いつからＣＳＳがさわれなくなったんですか？
スキンのカスタマイズ 、スキンCSSの編集 ともにさわる事が出来なくなりました
ベーシックをそのまま使うなんて考えられませんが・・・・
スタンダードのベーシックを選択されているみなさま
ＣＳＳでカスタマイズを希望される場合は
同じスタンダードのピーチ、ブルー、グリーン、グレイのどれかに変更下さい
跡形もなくなりますからどれを選んでも同じです・・・・
なにかやろうとしてますか？
最近・・・・
おかしいですよ・・・・
アメブロさま～
今、ブログおかしいですよ～
記事中の画像をクリックしても大きくなりませんよ～
出来れば・・・・・
元に戻していただけませんか～
m(_ _)m
みなさまの自分のブログで記事中の画像をクリックしてみてください
たぶん・・・ 別窓で開かないはずです・・・ なんの反応もないかと・・・・・