【はてなブログ】蛍光ペンでラインマーカーをつけて文章を強調する！

テキストを読んだりノートをとったりするとき、蛍光ペンでラインマーカーをつけて文章を強調する方法があります。ブログの文章でも同じように強調したり目立たせることができないかと調べたところ、ありました。ここでは２種類の方法を紹介します。使いやすい色を選んでみましので、好きな色をお使いください。

ブログの文章にマーカーをひくとは？

このような感じです。

orangeのマーカーはこんな感じ

coralのマーカーはこんな感じ

lightcoralのマーカーはこんな感じ

pinkのマーカーはこんな感じ

yellowのマーカーはこんな感じ

deepskyblueのマーカーはこんな感じ

skyblueのマーカーはこんな感じ

lowngreenのマーカーはこんな感じ

limeのマーカーはこんな感じ

文章を目立たせるためには、大文字にする、太字にする、斜体にする、文字の色を変えるなどがありますが、これで選択肢がひとつ増えました。CSSコードをあらかじめ設定しておけば、簡単に好きな色をつけることができます。

何種類かの色を使い分けたい

ブログの文章中でラインマーカーをつけるには、

1. 好きな色のCSSコードを設定する
2. 文章の編集画面（HTML編集画面）で、色と場所を指定する

この２ステップで完了です。

CSSコード

はてなブログの管理画面からすすみます。

デザインをクリック。

スパナマークをクリック。

一番下のデザインCSSの入力欄にCSSコードを追記します。追記後は必ず変更を保存してください。

すでに入力されているコードがあれば、それから1行あけて貼り付けると分かりやすいと思います。行番号は気にしなくて大丈夫です。

設定するCSSコードはこちらです。このコードをコピーして、先ほどのデザインCSS部分に貼り付けます。

これは先に示した10色分のカラーコードを入れているので長いですが、好きな色のコードのみを貼り付ければOKです。

色の名前とカラーコード部分を変更し、好きな色にすることもできます。

色はこちらのサイトを参考にしました。

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

HTMLコード

それでは、実際に文章を書いていきます。HTML編集にこのように入力します。

ここに好きな文章を入れます。

プレビューするとマーカーがついているのが分かります。orangeの部分をCSSで設定した他の色に置き換えるとマーカーの色が変わります。

いちいちHTMLコードを入力するのは面倒なので、クリップボードソフトを使っています。めちゃくちゃ楽です。

無料ダウンロード　クリップボード履歴ソフト Clibor | 窓の杜

もっと簡単にマーカーを使いたい

上記の方法だと多くの色を設定して使い分けることができるので楽しいのですが、ちょっと面倒だというのが正直なところです。 そんなときは、見たまま編集画面で太字にするだけで自動的にマーカーがひける方法がおすすめです。

CSSコード

CSSコードを設定してしまえば、あとは記事編集画面で好きな箇所を太字にするだけ。プレビューしてみるとマーカーがひいてあるのが確認できると思います。

注意　過去記事で太字にしていた部分にも自動的にマーカーがつきます。

スラスラわかるHTML＆CSSのきほん 第2版

posted with ヨメレバ

狩野 祐東 SBクリエイティブ 2018年04月16日

楽天ブックス

楽天kobo

Amazon

Kindle

7net