コピペで完成！ブログの文字にマーカーを引こう
ぼくもマーカーをひきたぁ～～～い。たぁ～～い。ぁ～ぃ。
色んな人のブログを見ていると
おしゃれにマーカー引いてる方が多くいるんですよ！
でも、ブログのデザインなんてしたことない。
どうやんの？難しい？
webデザイナーに依頼しなきゃダメ？
なんて思ってるそこのあなたっ！！
案外あっさりできますよ。
HTML や CSS をちょこっといじる（コピー＆貼付）だけなのです。
HTML ？CSS って何なんだぁ？？
という方へざっくりとイメージだけお伝えすると
HTML：ブログを書くのに必要なパソコンことば
CSS：ブログをおしゃれにデザインするのに必要なパソコンことば
が、いま分からなくてもできちゃうぞ～！！
html と css でどんなことができるのか知りたい方は？
こちらのサイトの動画で学んでみて下さい。
「ドットインストール」とは3分でマスターするプログラミング学習サイトです。
html と css は無料で学べますよ。
知識なしのぼくもこれで学びました。
もじ全体にマーカーを引こう
htmlだけいじれば
このようにピャーッとマーカーを引くことができるのです。
上記はHTMLで表すと ↓ こんな感じになってます。
<p>このように<span style="background-color: #ffff00;">ピャーッとマーカーを引く</span>ことができるのです。</p>
↑上記の <p>から</p>までをコピーして、
HTML編集の所にそのまま貼りつけたら完成。
はてなブログだったら、左上にあるHTML編集をクリックして貼りつけてOK
もじの色を変えてみよう
いや、黄色じゃなくって水色がいい！
まてまて、マーカーなら赤でしょ。
などと、いろんな色を引いてみたくなっちゃう。
だって、素人なんだもんっ！！
ということで、こちらの大辞典をお借りしてお好きな色を引きましょう！
まず大辞典の中身を見てみると、
色の名前と、＃6ケタの数字orアルファベットが書かれてますね。
はい、黄色を見つけてください。
#ffff00 ですね。
次に、さっきコピーして貼り付けたHTML ↓ を見てみましょう。
<p>このように<span style="background-color: #ffff00;">ピャーッとマーカーを引く</span>ことができるのです。</p>
こちらも#ffff00がありますね。
そうなんです！
#以降の6ケタを変えれば色も変わるのです。
ためしに、#ffff00 をsilverの #c0c0c0 に書き換えて同じように貼り付けてみましょう。
<p>このように<span style="background-color: #c0c0c0;">ピャーッとマーカーを引く</span>ことができるのです。</p>
このようにピャーッとマーカーを引くことができるのです。
どやぁ！
いろんな色が
引けるようになったで
ねっ、簡単でしょ。
マーカーの太さを変えてみよう
違うんだ。オレがイメージしてたマーカーとはちょっと違うんだよ。
もしかして、こんな ↓ マーカー引きたいですか？
黄色マーカー 緑色マーカー 水色マーカー オレンジ色マーカー
これはね～、CSSもいじらないといけないんですよ。
で、やり方はよく分からんかった！
だからぼくはこのサイトに合った内容をコピペした！
（花月さんありがとうございます。）
こいつ ↓ CSS
.marker_lightyellow {background: linear-gradient(transparent 70%, #ffff66 70%);}.marker_lightgreen {background: linear-gradient(transparent 70%, #90EE90 70%);}.marker_lightskyblue {background: linear-gradient(transparent 70%, #87CEFA 70%);}.marker_lightsalmon {background: linear-gradient(transparent 70%, #FFA07A 70%);}
こいつをコピーしてCSS専用のところに貼りつけた。
はてなブログだとデザインのところをクリック。
その次に、左側に出てくるカスタマイズの1番した
｛｝デザインCSSのところに貼りつけて完成！
こいつ ↓ HTML
こいつをコピーしてHTML編集のところに貼りつけた。
で完成。
CSS設定ができてないとマーカー書けないので注意してくださいね。
CSSの％が0に近いほど太く、100％に近いほど細くなりますよ。
さぁ、これであなたもお好きなマーカー引き放題。
どしどしブログにお化粧していきましょうっ！！
