【はてなブログ】コピペで簡単！蛍光ペン風のラインを楽に引く方法【斜体ボタン】

私は、2020年9月にWordPressからはてなブログにブログを移転しています。

midori-biyori.com

WordPress時代に使用していた無料テーマ「Cocoon」では、ボタン一つで3色の蛍光ペンでラインを引ける機能があり、多くの記事内で蛍光ペンを使っていました。

蛍光ペンはこういう蛍光ペンでアンダーラインを引いた効果のものです。

しかし、はてなブログでは記事編集の画面に蛍光ペンを引けるボタンはありません。

WordPressで入力されていた蛍光ペンのコードも、はてなブログでは反映されない状態となってしまい、色付き文字(こんな感じの文字)に修正するしかない…と諦めていました。

そんな中、使用しているはてなブログのテーマ「Minimalism」でカスタマイズ出来ることを調べようと色々なブログを覗いていたら
「記事編集画面の斜体(I)ボタンを押すだけで蛍光ペンを引いた状態に出来る」
というカスタマイズの方法があることが判明しました。

この方法では、これまで使用した斜体も蛍光ペンの効果が適用されてしまうことと、設定した1色しか蛍光ペンを使えないという欠点があります。

ただ、私はこれまでの記事で斜体を使った記憶はありませんでしたし、1色だけでも蛍光ペンが使えるなら全然OK！と考えたので、早速自分のブログでも取り入れてみることしました。

今回は、実際に自分のブログで使っている、はてなブログで蛍光ペンを使う設定を紹介します。

それでは、本題に入ります。

蛍光ペンの使い方

今回紹介する方法は、はてなブログの記事編集画面のメニューの斜体(iのボタン)を指定すると、蛍光ペンのラインが引かれた状態になります。

今後設定をいじる可能性もあるので、画像で説明しておきます。

入力画面はこんな感じ。

入力した時は斜体の表示ですが、プレビュー画面で確認すると黄色の蛍光ペンのアンダーラインが引かれた状態になっています。

個人的に、蛍光ペンで表示したい時は太字にしたい派なので、蛍光ペンと同時に太字になるように設定しています。

蛍光ペンの色を変えたい場合の方法については後ほど説明しますね。

注意点は2つ。

はてなブログでは記事編集の入力モードが3種類ありますが、見たまま編集とはてな記法・Markdownでは斜体ボタン(i)で挿入されるコードが違うので、設定用のコードも少し変える必要があります。

※この記事では、自分が使う入力モードを選んでコピペできるようにしてあります

そして、これまでに書いた記事で斜体を使っていた場合は、今回の設定で斜体部分が全て蛍光ペン+太字に変わってしまいます。
そのため、斜体を頻繁に使っていた場合はこの方法はおすすめしません。

次の項目からは、実際にはてなブログで蛍光ペンを使えるようにする設定方法を説明します。

蛍光ペンを使えるようにする設定

今回紹介するコードは、こちらの記事を参考にしたものです。

手順としては、

この2つだけなので、あっという間に終わりますよ。

その1.コードをコピーする

以下に表示されているコードをコピーして下さい。

記事編集の入力方法でコードが違うので、必ず自分の入力している方法のコードを選んで下さい。
※見たまま編集もはてな記法・Markdownも使う…ということがなければ、どちらか一方のコードだけでOKです

見たまま編集用のコード

/* 蛍光ペン風(黄)+太字にする */
.entry-content em {
background: linear-gradient(transparent 60%, #ffff00 60%);
font-style: normal;
font-weight: bold;
}

はてな記法・Markdown用のコード

/* 蛍光ペン風(黄)+太字にする */
.entry-content i {
background: linear-gradient(transparent 60%, #ffff00 60%);
font-style: normal;
font-weight: bold;
}

※蛍光ペンの色を変える方法

蛍光ペンの色を変えたい場合、3行目の終わりの方にある「#ffff00」の部分がカラーコードなので、このコードを変えることで色を変更できます。

例えばピンクにしたい時は、カラーコードを「#ffc0cb」に変えると、ピンク色のラインに変わります。

ピンク以外でも、↓のサイトから変更したい色のカラーコードを探して設定できるので、自分好みの色を探してみてくださいね。

www.colordic.org

その2.はてなブログ設定「デザインCSS」にコードを貼り付ける

コードをコピーしたら、はてなブログの設定の画面にある「デザインCSS」にコードを貼り付けます。

はてなブログ設定メニューにある「デザイン」を選び、パレットのマークの隣にあるスパナ(工具)をクリックして下さい。

表示される項目の一番下に「デザインCSS」がありますので、クリックします。

クリックすると四角い枠が表示されているので、この枠内をクリックするとコードを入力できるようになります。

一番下の行(※すでにコードが入力してある場合は削除しない)に先ほどコピーしたコードを貼り付けて、メニューの上にある「設定を保存する」をクリックすれば、作業は終了です。

念のため、記事編集画面で文字を斜体にして、プレビュー画面で蛍光ペンの状態になるか確認しておきましょう。

蛍光ペンで記事を見やすくしよう

はてなブログで簡単に蛍光ペン+太字で文字を強調させる方法について紹介しました。

はてなブログで蛍光ペンを簡単に使う方法を紹介した記事は沢山ありましたが、WordPressから持ってきた記事の編集方法がMarkdownで固定されていて、記事で紹介されていたコードでは反映しないことが多々あったので、記事編集の入力方法別にコードを紹介しました。

WordPressからはてなブログへ移行した時の手順を振り返る【画像付きで詳しく説明】

2021年7月にはてなブログからWordPressへ出戻りました。過去の記録として記事を公開しています。先日、当ブログはWordPressからはてなブログへ移転しました。移転を決めた理由については↑の記事で説明していますが。はてなブログから...

green3green.com

WordPressの記事たちが一時的に蛍光ペンが表示されなくなって改めて思いましたが、やっぱり記事内で強調したい部分に蛍光ペンが引かれていると圧倒的に見やすくなります。

今回紹介した方法で、斜体ボタンひとつで簡単に蛍光ペンが引けるようになったので、過去記事の修正(=蛍光ペン引き直し)作業もめちゃくちゃ楽になりました。

あまりブログのカスタマイズをされない方にとっては、CSSとか聞き慣れないワードが出ると敷居が高く感じられると思うのですが、作業自体は簡単なコピペだけです。

はてなブログの記事を蛍光ペンで見やすくしてみてはいかがでしょうか？

それでは、今回はこのへんで。