【はてなブログ カスタマイズ】本文中のキーワードを強調させよう（CSS、辞書登録）

はてなブログを書く時に、重要キーワードを、B（太字）とA（文字色）を変更して表現していたんですが、、

たとえば、

なんとかかんとかは、「なんとか」がとても重要です！！

みたいな感じで。

もっと効率のいい方法があるので、紹介したいと思います。

ちなみに、ぼくも今まで設定が面倒だったのでやってなかったんですが、この記事を執筆するのに合わせて、一緒に設定しようと思います。（笑）

キーワード強調の完成イメージ

今回は、赤く強調するのに加えて、黄色い線も一緒に引きたいと思います。

こんな感じ。

これは重要キーワードです。

黄色い線も引くと、さらにわかりやすくなりましたね！

それでは早速設定してみたいと思います。

いつものように、CSSの設定をしよう

これまで紹介してきた「はてなブログ記事下にAdsenseを表示する方法」や「

はてなブログにアドセンスを簡単に貼る方法」と同じように、CSSにデザインを設定しましょう。

はてなブログ管理画面⇒デザイン⇒カスタマイズ（スパナのマーク）⇒デザインCSS　で、CSSの操作ができる画面に移動してください。

以下のコードを、デザインCSSの中に追記してください。

.imp{
  color: red;
  background: linear-gradient(transparent 50%, rgba(255, 252, 107, .69) 50%);
  font-weight: bold;
}

解説すると、以下の意味をもったコードです。

・color:red …これは、文字色を赤にするという意味です。

・background:～ … これは、黄色い下線を引く、という意味です。

・font-weight: bold … これは、フォントを強調表示（太文字）にする意味です。

これらを、「imp」というクラスとして設定します。

コードを貼り終わったら、「変更を保存する」をクリックして下さい。

これで、CSSの設定は完了です。

次に、本文中で「imp」クラスを呼び出そう

では、早速設定した「imp」クラスを、本文から呼び出して、強調表示をしましょう。

「記事を書く」から、「HTML編集」をクリックして、以下のように書けば呼び出せます。

これは<span class="imp">キーワード</span>です。

こんな感じで書くと、

 こんな感じに強調表示されるはず！

 

コードを辞書登録して、かんたんに呼び出そう！

さらに便利な使い方、コードを辞書登録すれば、毎回手打ちしなくてもいいので楽ですよ。

辞書登録は、Windows10の場合、右下の「A」を右クリックして、

「単語の登録」を押してください。

呼びだし側のコードを書いて登録しておくと、簡単に文字変換で呼び出せますよ。

ほら、文字変換で呼び出せたでしょ！？便利ですね。

他にも応用できますよ。

まとめ：簡単に文字を強調できますよ！

どうだったでしょうか？これで簡単に文字を強調表示できたと思います。

強調表示以外にも、色んな設定ができるので、CSSを検索してみたりして、色々試して見てくださいね。