まろはる日記

シーズーとマルプーとの日常

【はてなブログ】蛍光ペンでラインマーカーをつけて文章を強調する!

はてなブログカスタマイズ蛍光ペンでマーカーをつける

 

テキストを読んだりノートをとったり、その中で効果的な学習法に蛍光ペンでラインマーカーをつけて文章を強調するという方法があります。ブログの文章でも同じように強調したり目立たせることができないかと調べたところ、ありました。ここでは2種類の方法を紹介します。使いやすい色のCSSコードを選んでみましので、参考にしてみてください。

 

目次

 

ブログの文章にマーカーをひくとは?

このような感じです。

 

orangeのマーカーはこんな感じ

coralのマーカーはこんな感じ

lightcoralのマーカーはこんな感じ

pinkのマーカーはこんな感じ

yellowのマーカーはこんな感じ

deepskyblueのマーカーはこんな感じ

skyblueのマーカーはこんな感じ

lightskyblueのマーカーはこんな感じ

lowngreenのマーカーはこんな感じ

limeのマーカー

 

文章を目立たせるためには、大文字、太字、斜体、文字の色を変えることがありますが、これで選択肢がひとつ増えました。

CSSコードをあらかじめ設定することで、あとは簡単に好きな色をつけることができます。

 

はてなブログの設定

ブログの文章中でラインマーカーをつけるには、好きな色のCSSコードを設定しておき→実際の文章の編集画面でマーカーしたい色と場所を指定する作業をしていきます。

 

CSSコード

はてなブログの管理画面からすすみます。

draw-line

デザインをクリック。

 

draw-line01

パナマークをクリック。

 

draw-line02

一番下のデザインCSSの文字入力欄をクリックし、CSSコードを追記します。

 

draw-line03

すでに入力されているCSSコードがあれば、それから1行あけて貼り付けると分かりやすいと思います。行番号は気にしなくて大丈夫です。

 

設定するCSSコードはこちらです。

このコードをコピーして、先ほどのデザインCSS部分に貼り付けます。

これは先に示した10色分のカラーコードを入れているので長いですが、好きな色のコードのみ貼り付ければOKです。

 

draw-line04

色の名前とカラーコード部分を変更し、好きな色にすることができます。

こちらのサイトから色を選べます。

 

ちなみに、カラーコードの左の%は線の太さを表しています。数字が大きいほど線は細くなります。右の%は線の色の濃さを表しています。数字が大きいほど色が薄くなります。

貼り付けたら最後に必ず変更を保存するボタンをクリックしてください。

 

HTMLコード

それでは、実際に文章を書いていきます。HTML編集にこのように入力します。

ここに好きな文章を入れます。

プレビューするとマーカーがついているのが分かります。

orangeの部分をCSSで設定した他の色に置き換えるとマーカーの色が変わります。

 

もっとシンプルに設定したい場合

上記の方法だと多くの色を設定して使い分けることができるので楽しいのですが、ちょっと面倒だというのが正直なところです。 もっと簡単に一発で使えるようにしたい!というような場合はこちらも参照してみて下さい。とってもわかりやすいです。