お金プログラム ~だれでもノマド~

ノマド的な稼ぎ方、投資、IT系(プログラミング)に関するブログです。

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

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

f:id:toyo--104:20180527215637p:plain

 

たとえば、

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

みたいな感じで。

 

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

 

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

 

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

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

こんな感じ。

 

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

 

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

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

 

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

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

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

 

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

 

f:id:toyo--104:20180522233056p:plain

 

以下のコードを、デザイン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>です。

こんな感じで書くと、

f:id:toyo--104:20180527222422p:plain

 

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

f:id:toyo--104:20180527222515p:plain

 

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

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

 

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

f:id:toyo--104:20180527222844p:plain

 

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

f:id:toyo--104:20180527222956p:plain

 

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

f:id:toyo--104:20180527223159p:plain

f:id:toyo--104:20180527223306p:plain

 

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

他にも応用できますよ。

f:id:toyo--104:20180527223415p:plain

 

まとめ:簡単に文字を強調できますよ!

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

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