CSS 記事の中でカンタンにマーカー | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

CSS 記事の中でカンタンにマーカー

記事中で文章、あるいは単語を強調させたいとき

なにを使いますか?


太字? 色文字? 下線? ・・・・・・


カンタンにマーカーぽく出来る方法



文字装飾で斜体は使わないって方


例のごとく青字をCSSにコピペ


/* マーカー */
.entry .contents em{
padding: 2px 0;
background-color: #ffff66; /*#00ff66,#00ffcc,#00ff7f,#ff00ff,#00ffff*/

font-style: normal;
}


タグの非表示で普通に文章を書いてマーカーしたいところを選択

「斜体」ボタンをクリックして斜体にしてしまいます・・・・・



・・・・・・ プレビューしてみると斜体のはずがマーカーが付いているんです


色は#ffff66(黄)になっていますが#00ff66,#00ffcc,#00ff7f,#ff00ff,#00ffffなど入れ替えて好きな色を使ってください

色はそれ以外でも何でもかまいません

バックを濃い色にしておいて color: #ffffff; を加えて 白字にしても面白いと思います


他にも 下線は使わないって方なら


/* マーカー */
.entry .contents u{
padding: 2px 0;
background-color: #00ff66;

text-decoration: none;
}


打ち消し線は使わないって方は


/* マーカー */
.entry .contents strike{
padding: 2px 0;
background-color: #ff00ff;

text-decoration: none;

color: #ffffff;
}


あくまでカンタンにボタン1個でマーカーを指定するって方法です


マーカーを付ける文章の前後を


<span style="background-color: 色; ">文章</span>


で、いちいち指定しなくてもすむって~だけの方法です


※各ボタンをマーカーにした場合に、

  斜体を使いたい場合は     <span style="font-style: italic;">文章</span>

  下線を使いたい場合は     <span style="text-decoration:underline;">文章</span>

  打ち消し線を使いたい場合は <span style="text-decoration:line-through;">文章</span>

  で、指定してください



※12/24 Firefox、Netscapeで記事を書いている方は各ボタンで付くタグがちがっていますのでこの方法は使えません