【はてなブログアレンジ】記事にマーカーを引く設定と方法

2020年6月27日2022年6月18日

2022年1月時点で本ブログはWordPressに移管しました。
当時のカスタム記事になります。はてなブログユーザーは参考ください。

はてなブログの「編集みたまま」設定では、
このようにマーカーを引きたくても、メニューバーにそのボタンがないため、使うことができません。
今回は、マーカーを引けるようにする設定について紹介します。

(スポンサーリンク)

記事にマーカーを引く設定

コピペですぐに設定できるのでとても簡単です。
以下２つの手順で完了します。所要時間は30秒ほどです。
ただ、１点「編集みたまま」のメニューボタンの「斜線」をマーカーを引く設定に変えてしまいます。
そのため、斜線を記事で多用・活用している方は不向きな設定になります。

１、カスタマイズするためのCSSを準備

カスタマイズするためのCSSを準備します。
以下がCSSになるので、コピペしてください。

/* 斜体表示を蛍光ペン（黄）風に */
article em{
font-weight:bold;
font-style: normal;
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;
}

２、はてなブログでの設定

フォント数を決めて、コピペしたらはてなブログ側で設定をします。
ブログの管理画面から、デザイン→カスタマイズ→デザインCSSを開きます。
デザインCSS欄に１の手順のコードをコピペします。
以上で完了です。

記事にマーカーを引く方法

続いてでは実際に使う方法です。
前述してしまっていますが、使い方はシンプルに、
「編集見たまま」の記事作成画面で、「斜線（i）」を使うだけです。

記事作成画面では、斜線になるだけですがプレビューを確認すると、このようになっています。

最後に

マーカーは太文字や色文字とも違った強調をできるので非常に有効なツールです。
私も他の人のブログを見ていて、マーカーを使いたいと思っていましたが、使い方がわからずずっときていました。
この方法で簡単にマーカーを使った記事をかけるのでおすすめの設定方法です。
ただ、マーカーを乱発すると記事が読みづらくなるので注意した方がいいですね。