はてなブログで文字を蛍光マーカーで装飾する方法について調べてみた!

はてなブログを本格的に運営し始めてから40日が経過した。

一体はてなブログで文字にマーカーを引く時はどうするのだろうと調べたので忘備録的にまとめたいと思う。

 マーカーで線を引くのは簡単だけど面倒くさい

はてなブログでマーカーを引く場合簡単にまとめると以下のような手順になる。

ダッシュボードから「デザイン」⇒「カスタマイズ」⇒デザインCSS⇒以下のコードを追加⇒各記事のHTMLで編集する。

CSSで追加するコードはこんな感じ。

marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

 

f:id:myworldhistoryblog:20190207121851j:plain

 

その後は記事の編集画面で「HTML編集」をして以下のようにHTMLコードを入力する。

*見たままモードでコードを入力すると反映されないので注意

 

f:id:myworldhistoryblog:20190207134059j:plain

<span class="marker_yellow">黄色くなるよ</span>

黄色くなるよ

文字を変えたい場合はcssの部分の「#fff6」という部分を変えるとよい。

カラーコードは以下の記事を参照すると良いと思う。

www.colordic.org

例えばピンクの場合はコードはこうなる。

.marker_pink {
background: linear-gradient(transparent 60%, #FFB6C1 60%);
}
 <span class="marker_pink">ピンクになるよ</span>
 

ピンクになるよ

 

マーカーの色の度合いを変えたければ%のあたりをいじると良い。

例えば文字の全面に塗る場合はこんな感じ。

.marker_yellow_0 {
background: linear-gradient(transparent 0%, #ffff66 0%);
}

 <span class="marker_yellow_0">黄色く塗れるよ</span>

 

黄色く塗れるよ

 

 

色の部分と%のあたりをいじると色々と調節できる。 

個人的には黄色、緑、ピンクがあれば十分かなと思う。

黄色:#ffff66

ピンク:#FFB6C1

緑:#32cd32

正直面倒くさい

いつもワードプレスでサイトを運用しているためかはてなが使い辛い。

ワードプレスだと「TinyMCE Advanced」というプラグインを利用すればデフォルトで蛍光マーカーは引けるし「AddQuicktag」を利用すればもっと色々と楽にできる。

はてなブログが新着エントリーに載らなくなった今、はてなブログの価値とは一体何なのか?・・・

蛍光マーカーを引くのにいちいちHTML編集しなければならないとは、はてなブログは難儀よのぉ。