はてなブログで文中にマーカー線を引く方法【初心者】【コピペOK】

こんなお悩みにお答えします。

この記事でわかること

記事の信頼性

こんにちわ、Jouji(@jouji0720)です。僕は現在webライター4年目で、記事を書いて生活をしています。

そんな僕もサイドブログにははてなブログを使っています。

ブログ研究をしていると、記事の文中にマーカー風に装飾しているものが多いですよね。そういうのを見ると「自分もやりたい」と思うものです。

今回は普段ライティングで飯を食っている僕がはてなブログでマーカー線を引く方法をご紹介します。この記事を読むとはてなブログでマーカー線を引く方法、マーカー線を引くメリットや使い方も学ぶことができます。

結論から言うと文字装飾は、読者のためにも必要です。ですからどうぞ最後までお読みの上、手を動かしていきましょう。

はてなブログでマーカーを引く方法は2種類ある

はてなブログでマーカーを引く方法の種類は、以下の通りです。

それぞれ解説します。

はてなブログのエディター上でボタンを押してマーカーを引く方法

はてなブログでマーカーを引く方法の種類の1つ目は、はてなブログのエディター上でボタンを押してマーカーを引く方法です。

この方法はCSSコードをはてなブログ上に置き、エディター上のボタンを押すことでマーカーを表示させる方法です。

このやり方のメリットは、やり方がシンプルなところです。デメリットは、設定した色しか使えないところです。

例えば、太字ボタンに黄色マーカーを設定するとします。太字ボタンですべての箇所に、黄色のマーカーが表示されます。

そのために、記事中に入れるのに操作がシンプルです。

はてなブログのHTML編集で引きたい部分をタグで囲む方法

はてなブログで重要部分にマーカー線を引く方法の2つ目は、はてなブログのHTML編集で引きたい部分をタグで囲む方法です。

この方法は、文章を書くときにHTML編集で引きたいところに、タグを使ってマーカー線を表示する方法です。

メリットは、1つ目の方法とは違い、文章に対して色が変更できることです。デメリットは、HTMLコードを書き込まないといけないことです。

例えば、記事の中に2つのポイントがあるとします。でも色を違い分けたい場合には、HTMLコードを書き込むことで使い分けることができます。

そのために、色の変更が可能になります。

はてなブログでマーカーを表示させる方法別の手順

はてなブログでマーカーを表示させる方法別で、手順を解説します。

はてなブログのエディター上でボタンを押してマーカーを引く方法の手順

はてなブログのエディター上でボタンを押してマーカーを引く方法の手順は以下の通りです。

それぞれ解説します。

CSSコードをコピーする

はてなブログのエディター上でボタンを押してマーカーを引く方法の手順の1つ目は、CSSコードをコピーすることです。

まずは、下記のCSSコードをコピーしましょう。

CSSコード

/*太文字表示は、ピンクのマーカー*/
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;
}
/* bタグは太字 */
article b{
font-weight:bold !important;
}
/* 斜体表示は、黄色のマーカー */
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;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}

コピーしたコードをメモ帳に貼り付けてカスタマイズする

はてなブログのエディター上でボタンを押してマーカーを引く方法の手順の2つ目は、コピーしたコードをメモ帳に貼り付けてカスタマイズすることです。

コピーしたコードをメモ帳アプリに貼り付けて、カスタマイズしていきましょう。

カスタマイズする場所は、以下の通りです。

それぞれ解説します。

色の変更

カスタマイズする場所の一つ目は、色の変更です。マーカーの色を変更しましょう。

色に関しては、WEB色見本 原色大辞典 にて確認ができます。

background:#fcfc60 !important;

この赤いところに色を入れましょう。色は、黄色とピンクがおすすめです。というのもポイント感が出やすいからです。

ぜひ参考にしてくださいね。

 マーカーの太さの変更

カスタマイズする場所の2つ目は、マーカーの太さです。

太さは、liner-gradient:というコードの部分のtransparentの横の60%という部分を変更します。数が大きくなるほどマーカーの太さは細くなります。

例としては、以下のような感じ。

太さに関しては、50~60％くらいがおすすめです。

カスタマイズコードをコピーしてはてなブログのデザインCSSに貼り付ける

はてなブログのエディター上でボタンを押してマーカーを引く方法の手順の3つ目は、カスタマイズコードをコピーしてはてなブログのデザインCSSに貼り付けることです。

メモ帳アプリ上でカスタマイズしたコードを、コピーしてはてなブログのデザインCSSに貼り付けます。

貼り付ける場所は、以下の通りです。

最後に、「変更を保存する」をクリックしましょう。

記事中で使いたいところを選択して、Bまたはiボタンを押す

はてなブログのエディター上でボタンを押してマーカーを引く方法の手順の4つ目は、記事中で使いたいを選択してBボタンまたはiボタンを押すことです。

記事中で使いたいところを選択して、Bまたはiボタンを押しましょう。

すると、以下のように映ります。

はてなブログのHTML編集で引きたい部分をタグで囲む方法の手順

はてなブログのHTML編集で轢きたい部分をタグで囲む方法の手順は、次の通りです。

それぞれ解説します。

CSSコードをコピーする

はてなブログのHTML編集で引きたい部分をタグで囲む方法の手順の1つ目は、CSSコードをコピーすることです。

まずは下記CSSコードをコピーしましょう。

CSSコード

/*マーカー線・黄色*/
.marker-yellow {
background: linear-gradient(transparent 60%, #fff799 0%);
font-weight: bold;
}

コピーしたコードをメモ帳に貼り付けてカスタマイズする

はてなブログのHTML編集で引きたい部分をタグで囲む方法の手順の2つ目は、コピーしたコードをメモ帳に貼り付けてカスタマイズすることです。

上記のコードをメモ帳アプリに貼り付けて、カスタマイズしましょう。

カスタマイズする場所は、以下の通りです。

liner-gradient部分の赤文字の部分をカスタマイズしていきましょう。

カスタマイズコードをはてなブログに貼り付け

はてなブログのHTML編集で引きたい部分をタグで囲む方法の手順の3つ目は、カスタマイズコードをはてなブログに貼り付けることです。

カスタマイズしたコードをコピーして、はてなブログに貼り付けます。

貼り付ける場所は、以下の通りです。

貼り付けた後には、「変更を保存する」をクリックしましょう。

HTML編集で使いたいところにコードを挿入する

はてなブログのHTML編集で引きたい部分をタグで囲む方法の手順の4つ目は、HTML編集で使いたいところにコードを挿入することです。

記事の編集画面に行き、HTML編集画面で使いたいところを探します。

以下のコードを入れましょう。

挿入するHTMLコード

<span class="marker-yellow">ここに好きな文章</span>

上記を入力します。

プレビューでは以下のように、確認できます。

文中にマーカーを表示させるメリット

はてなブログの文中にマーカーを表示するメリットは、以下の通りです。

それぞれ解説します。

文章のポイントがわかる

はてなブログで文中にマーカーにするメリットの1つ目は、文章のポイントがわかるところです。

学生時代に教科書のポイントとなるところに、線を引いたと思います。教科書にポイントがわかりやすくなりましたよね。

ブログも同じで、マーカーを表示するとポイントがわかりやすくなります。

メリハリやリズムが付きやすい

はてなブログで文中にマーカーにするメリットの2つ目は、メリハリやリズムが付きやすいことです。

人間は文字を読み続けていると、逆に頭に入りにくいものです。というのも、変化がないからです。

でもマーカー線が入るとそこに変化が生まれます。メリハリが生まれて、読むためのリズムにも緩急が付きます。

疲れにくいから最後まで読んでもらいやすい

はてなブログで文中にマーカーにするメリットの3つ目は、疲れにくいから最後まで読んでもらいやすいことです。

上記のリズムがつきやすい話とリンクしますが、リズムのいい文章は疲れにくいものです。

マーカーを表示すると、最後まで読んでもらいやすくなります。

はてなブログでマーカーを使うときの注意点

はてなブログでマーカーをブログで使うときの注意点は、以下の通りです。

それぞれ解説します。

使うポイントを決めておく

はてなブログでマーカーを文中で使うときの注意点の1つ目は、使うポイントを決めておくことです。というのも、使うポイントを決めないで、マーカーを使いまくってしまうと、どこがポイントなのかがわからなくなってしまうからです。

ポイントのわからない文章ほど、読みにくいものはありません。

ポイントが絞るためにも、マーカーを使うポイントを決めておくようにしましょう。

使う色を絞っておくこと

マーカーを文中で使うときの注意点の2つ目は、色を絞っておくことです。というのも、同じ記事内に色が複数あると、読者は見づらいからです。

例えばこんな感じ。

超見にくいですよね。目が痛くなりそうです。

だから、色は絞ったほうがいいです。

まとめ｜はてなブログでマーカーを使ってわかりやすい記事を作ろう

ここまで、はてなブログで文中にマーカー線を引く方法をお話してきました。

はてなブログで文中にマーカー線を引くことで、読者にはわかりやすい記事となります。しっかりと注意点を守って記事をわかりやすくしましょう。

今回は以上です。

次に読むのにおすすめの記事