おいもさんち

おいもさんち

あなたの知らない課外授業

コピペで完成!ブログの文字にマーカーを引こう

ぼくもマーカーをひきたぁ~~~い。たぁ~~い。ぁ~ぃ。

f:id:oimotoimoco:20161113184650p:plain

http://www.tagami-bunguten.com/product/791より

色んな人のブログを見ていると

 

おしゃれにマーカー引いてる方が多くいるんですよ!

 

 

でも、ブログのデザインなんてしたことない。

 

どうやんの?難しい?

 

webデザイナーに依頼しなきゃダメ?

f:id:oimotoimoco:20161113182355j:plain

なんて思ってるそこのあなたっ!!

 

案外あっさりできますよ。

 

HTML や CSS をちょこっといじる(コピー&貼付)だけなのです。

 

 

HTML ?CSS って何なんだぁ??

 

という方へざっくりとイメージだけお伝えすると

 

 

HTML:ブログを書くのに必要なパソコンことば

 

CSS:ブログをおしゃれにデザインするのに必要なパソコンことば

 

 

が、いま分からなくてもできちゃうぞ~!!

 

 

html と css でどんなことができるのか知りたい方は?

 

こちらのサイトの動画で学んでみて下さい。

 

http://dotinstall.com/

 

「ドットインストール」とは3分でマスターするプログラミング学習サイトです。

 

html と css は無料で学べますよ。

 

知識なしのぼくもこれで学びました。

 

もじ全体にマーカーを引こう

htmlだけいじれば

 

このようにピャーッとマーカーを引くことができるのです。

 

上記はHTMLで表すと ↓ こんな感じになってます。

 

<p>このように<span style="background-color: #ffff00;">ピャーッとマーカーを引く</span>ことができるのです。</p>

 

↑上記の <p>から</p>までをコピーして、

 

HTML編集の所にそのまま貼りつけたら完成。

 

はてなブログだったら、左上にあるHTML編集をクリックして貼りつけてOK

f:id:oimotoimoco:20161113191109j:plain

 

もじの色を変えてみよう

いや、黄色じゃなくって水色がいい!

 

まてまて、マーカーなら赤でしょ。

 

などと、いろんな色を引いてみたくなっちゃう。

 

だって、素人なんだもんっ!!

 

ということで、こちらの大辞典をお借りしてお好きな色を引きましょう!

www.colordic.org

 

まず大辞典の中身を見てみると、

 

色の名前と、#6ケタの数字orアルファベットが書かれてますね。

f:id:oimotoimoco:20161113193015j:plain

 

 

はい、黄色を見つけてください。

 

#ffff00 ですね。

 

 

次に、さっきコピーして貼り付けたHTML ↓ を見てみましょう。

 

<p>このように<span style="background-color: #ffff00;">ピャーッとマーカーを引く</span>ことができるのです。</p>

 

こちらも#ffff00がありますね。

 

 

そうなんです!

 

#以降の6ケタを変えれば色も変わるのです。

 

 

ためしに、#ffff00 をsilverの #c0c0c0 に書き換えて同じように貼り付けてみましょう。

 

<p>このように<span style="background-color: #c0c0c0;">ピャーッとマーカーを引く</span>ことができるのです。</p>

 

このようにピャーッとマーカーを引くことができるのです。

 

 

どやぁ!

いろんな色が

引けるようになったで

 

ねっ、簡単でしょ。

 

マーカーの太さを変えてみよう

違うんだ。オレがイメージしてたマーカーとはちょっと違うんだよ。

 

もしかして、こんな ↓ マーカー引きたいですか?

 

黄色マーカー 緑色マーカー 水色マーカー オレンジ色マーカー

 

 

これはね~、CSSもいじらないといけないんですよ。

 

で、やり方はよく分からんかった!

 

だからぼくはこのサイトに合った内容をコピペした!

(花月さんありがとうございます。)

kagetu77.com

 

こいつ ↓ 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専用のところに貼りつけた。

 

 

はてなブログだとデザインのところをクリック。

f:id:oimotoimoco:20161113211041j:plain

 

その次に、左側に出てくるカスタマイズの1番した

 

{}デザインCSSのところに貼りつけて完成!

f:id:oimotoimoco:20161113211118j:plain

 

 

こいつ ↓ HTML

1
2
3
4
<span class="marker_lightyellow">黄色マーカー</span>
<span class="marker_lightgreen">緑色マーカー</span>
<span class="marker_lightskyblue">水色マーカー</span>
<span class="marker_lightsalmon">オレンジ色マーカー</span>

 

こいつをコピーしてHTML編集のところに貼りつけた。

 

で完成。

 

 

CSS設定ができてないとマーカー書けないので注意してくださいね。

 

CSSの%が0に近いほど太く、100%に近いほど細くなりますよ。

 

 

さぁ、これであなたもお好きなマーカー引き放題。

 

どしどしブログにお化粧していきましょうっ!!