【Google Chrome】デベロッパーツールでブログの蛍光マーカー色を直感的に決める方法

Google Chromeディベロッパーツールで直感的に色を決める

蛍光マーカ―の色、どんなのがいいのかな?

コードを書き換えて、いちいち色を確認するのが面倒。

 

ブログの本文に蛍光マーカーを引けるようにしたけど、「どんな色がいいんだろう?」って悩むことありませんか?

 

僕は線の色を決めるとき、カラーコードの一覧表が載っているサイトを参考にしてました。

でもいざ自分のブログで見てみると、実際にイメージしていたものと違っていたので何度もコードを書き換えた経験があります。

 

そんな時に便利なのが、[F12]キーを押すと出てくるGoogle Chromの「デベロッパーツール」。

 

下の動画のように、プレビューしながら直観的に色を決めることができます。

ディベロッパーツールで色を確認

また、「この色はちょっと目がチカチカするな」とか「ちょっと色が薄くて目立たないからやめておこう」とかも分かると思います。

僕が実際に試してめちゃめちゃ便利だったのでご紹介したいと思いました。

 

今回はchromeのデベロッパーツールを使って、蛍光マーカーの色を確認する方法を書いていこうと思います。

 

なおこの記事の説明画像は、「はてなブログ」のものを使っています。

 

 

はてなブログ本文に蛍光ペン風のマーカーを引く方法

おそらく多くの方がすでに使われていると思いますが、一応蛍光ペン風のマーカーが引ける方法を書いておきます。

すでに実装している方は飛ばしてください。

 

やること

蛍光ペン風のマーカーを引くためにやることは以下のとおりです。

  • CSSを、はてなブログの「デザインCSS」に書く(コピペOK)
  • 「HTML編集」画面で、HTMLを書く 

 

CSSをコピペする

はてなブログの管理画面から[デザインデザインアイコン]→[カスタマイズカスタマイズアイコン]→[デザインCSS]を選択して、下のCSSをコピペします。

 

とりあえず蛍光マーカーの色は黄色にしています。

/* 蛍光マーカー */
.marker{background: linear-gradient(transparent 60%, #ff0000 0%)}

 

最初のクラス名の「.marker」は名前を変えても大丈夫です。
たとえば keikou-y とか marker-kiiro とか分かりやすい名前をつけた方がいいかもしれません。

ただし名前の頭の「 . 」は必ずつけてください。(『.keikou-y』とか『.marker-kiiro』とか書いてください。)

 

コードの中の「#ff0000」は色を表しています。

 

また「transparent」のすぐ後ろのパーセンテージは、線の太さを表しています。
0%が一番太く、100%だとなにも見えなくなります。よろしければ下の線の太さを参考にしてください。

 

蛍光マーカーの太さ0%

.marker{background: linear-gradient(transparent 0%, #ff0000 0%)}

 

蛍光マーカーの太さ40%

.marker{background: linear-gradient(transparent 40%, #ff0000 0%)}

 

蛍光マーカーの太さ60%

.marker{background: linear-gradient(transparent 60%, #ff0000 0%)}

 

蛍光マーカーの太さ80%

.marker{background: linear-gradient(transparent 80%, #ff0000 0%)}

マーカーをひくときのHTML

はてなブログの見たままモードで書く時は、HTML編集画面で下記のように書きます。

<span class="marker">ここに文字が入ります。</span>

ここに文字が入ります。

「class=」のあとの「” ”」の中には、CSSコードで決めた名前を入れます。HTMLを書くときは、CSSで決めたクラス名の頭の「 . 」は入れないでください。

 

Chromeのデベロッパーツールでマーカーの色を確認する

 Google Chromeで自分のサイトを開き、画面上のなにもないところで右クリック⇒[検証]をクリックします。

「検証」を選択

 

デベロッパーツールがひらきました。

ディベロッパーツールを開く

※[F12]キーが、デベロッパーツールを開くショートカットキーになっています。

 

ディベロッパーツールの画面上での位置変更

 ※右上の[ボタン]をクリック→「Dock side」と書いてある右側のアイコンをクリックすると、画面上でのウィンドウの位置を変えることができます。

 

①左上の[ 選択アイコン ]のアイコンをクリック→②記事内のマーカーが引いてあるところをクリックします。

 

「styles」と書いてある項目で、該当部分をさがして、矢印の四角いところをクリックします。

カラーピッカーを表示させる

※補足 見つけられない方は、下の動画で確認してみてください。

カラーピッカーがひらきます。

四角のパレットと2種類のカラーバーを動かして色を決めます。

カラーピッカー

 

色が決まったらスポイドのとなりのまるい部分をクリックすると、色のコードがコピーできます。

カラーコードのコピー

 

それをCSSの色のところに貼りなおします。

上で紹介したCSSの場合、「#ff0000」のところをコピーしたコードに書き換えます。

 

.marker{background: linear-gradient(transparent 60%, #ed6bff80 0%)}

 

まとめ

Google Chromeのデベロッパーツールをつかえば、直感的に色をきめることができます。

本文の文字色を変えたい場合なども、イメージを確認することができて便利です^^

どんな色にしようかなーなんて迷っている方は使ってみてはいかがでしょうか。

ここまで読んでいただき、ありがとうございました。

コメント

タイトルとURLをコピーしました