読者です 読者をやめる 読者になる 読者になる

ごきげん女子のススメ

世の中に”ごきげん女子”を増やす♪ ”ごきげん女子”は歩く宝石よ!

【雑談】憧れのマーカー引いた風!できた喜びからのひとり遊び【記録】

ごきげん麗しゅう、どれみんよ。兼ねてより憧れだった、「マーカーで線を引いたような」おしゃれデザイン!!? このアナログ女などれみんにも遂にできたわ♡

実は前回の記事から、なにくわぬ顔して使ってやったわ!!内心は念願叶って大はしゃぎよ。

http://www.flickr.com/photos/25230222@N07/2380929432

photo by Childrens Book Review

 

で、

マーカーをもっと好きな色にしたいわ~とググって探したりとかしてたわけ。そしたら何やら非常に便利そうな設定の仕方っていうの??それを発見したから早速トライしてみた結果がこちら...…  

(ちなみに、↑この ”…”てんてんてんが半角に変換すると下にいくときと中央なときがあるという,どれみんにとっての七不思議!!)

 

【太字のみの「bタグ」と下線マーカーの「strongタグ」で使い分けできるようにしました。】てのを試したの……

 

▼before▼ 

f:id:doremi-dressy:20160208025124p:plain

  

▼after▼

f:id:doremi-dressy:20160208025129p:plain

 

記事全般に有用な設定だもんで、過去に書いた太字(strongタグ?)部分がものの見事にすべて 蛍光イエローでマーキングされまっくったわ!!設定は戻したわ! ウケるわ、コンピューターってすんごいのね♡

↑ てか完全に画像がフレームアウトしてるけど…、まあいいの、よしとするわ。はみ出す勢いがあるくらいが丁度いいわ!

 

さてその設定方法だけど、▼下記の htmlというの?こヤツを、デザイン変更の「カスタマイズ設定」のヘッダってとこに、ばーんと貼り付けておやりなさい!!

<style type="text/css">
/* 強調表示を蛍光ペン風に */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
/* bタグは太字 */
article b{
    font-weight:bold !important;
}
</style>

 はてなブログの強調表示を蛍光ペン風にマーキングする - むじん島

 

参考にさせていただいたのは、▼こちらのおブログよ!!

 

最初に「マーカーでラインを引いた風」を成功できた、そのおかげとなったおブログはこちら▼

テキストコードが反映されるためには、事前に元となるCSSの編集が必要ってところが重要だったわ!!

 

 

 マーカーの色を好きないろに変える方法

このグリーン(lime)マーカーのHTMLタグは…

<span class="marker_lime">任意の文字</span>    

 

  1. HTMLのタグの色の名前の箇所(▲上記の場合だと lime ってのが色名ね)を、何でもいいのだけど例えば「green1」とかに名前をつけて変えて、
  2. ▼下記のCSSの「色の名前」って箇所にも導入する色の名前を記入。
  3. CSSに選んだカラーコードも入れたら、(カラーコード一覧は一番下にリンクあり)
  4. デザイン設定・カスタマイズ一番下の「CSSデザイン」ってとこにぺたっと貼り付けるのよ。
  5. 上記のHTML▲はブログ記事を書くときに直接「HTML編集」に貼ってちょうだいね!! 「任意の文字」って箇所にはマーカーを引きたい言葉を書くのよ♪

 

.marker_色の名前 {
background: linear-gradient(transparent 60%, #カラーコード 60%);
}

 

こんなきれいなおピンクにだってできちゃう! あ、グリーンだったし…

 

それっ!!お ピ ン ク♡  

ふふふ、やってやったわ!嬉しい楽しい!コンピューターっておもしろい!おもしいろ~い!おもしろいを30回くらい叫びたいわ!!!!!

        

 #9BF9CC
 #FFCCFF

マーカー装飾に使用したカラーコードよ ↑ 

 

ちなみに、また新たに色を追加するときは、▲上の「色を変える方法」の工程でひとつずつ設定すればO.Kよ☺ 

 

 

マーカーの太さを変える方法

前述の▲CSSタグのカラーコード前後2箇所にある「60%」ってとこを好きな率にしたらいいわ!!

これは30%よ これは80%だわ

 

どうやら、何%ってのはマーカーの太さ(幅)でなく余白の率みたいだわね!!

もっと利便性のいい簡単なやり方もあるのかもだけど、自分への備忘録もかねて記しておくわ♡

 

ちゃちゃお~!読んでくださりありがとう!ごきげんな日を…

読者へのご参加いかがかしら?!およろしくよ♡

カラーコード・色見本サイト