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

※当サイトではアフィリエイト広告を利用しています。

はてなブログで文中にマーカー線を引く方法【初心者】【コピペOK】 Hatena blog
この記事は約10分で読めます。
ブログ初心者
はてなブログでマーカーを引きたい初心者

「はてなブログで、蛍光マーカーを引いているブログをよく見るけどどうやっているのかな。教えてほしいな。」

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

この記事でわかること

  • はてなブログでマーカーを引く方法は2種類ある
  • はてなブログでマーカーを表示させる方法別の手順
  • はてなブログの文中にマーカーを引くメリット
  • はてなブログでマーカーを使うときの注意点

記事の信頼性

記事の信頼性

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

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

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

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

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

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

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

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

  • はてなブログのエディター上でボタンを押してマーカーを引く方法
  • はてなブログのHTML編集で引きたい部分をタグで囲む方法

それぞれ解説します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • CSSコードをコピーする
  • コピーしたコードをメモ帳に貼り付けてカスタマイズする
  • カスタマイズコードをコピーしてはてなブログのデザインCSSに貼り付ける
  • 記事中で使いたいところを選択してBボタンまたはiボタンを押す

それぞれ解説します。

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%という部分を変更します。数が大きくなるほどマーカーの太さは細くなります。

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

f:id:slash1196:20210609181555j:plain

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

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

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

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

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

デザイン>カスタマイズ>デザインCSS

f:id:slash1196:20210606181402j:plain

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

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

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

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

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

f:id:slash1196:20210609182218j:plain

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

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

  • CSSコードをコピーする
  • コピーしたコードをメモ帳に貼り付けてカスタマイズする
  • カスタマイズコードをはてなブログに貼り付け
  • 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つ目は、カスタマイズコードをはてなブログに貼り付けることです。

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

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

デザイン>カスタマイズ>デザインCSS

f:id:slash1196:20210606181402j:plain

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

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

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

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

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

挿入するHTMLコード

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

上記を入力します。

f:id:slash1196:20210609182537j:plain

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

f:id:slash1196:20210609182659j:plain

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

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

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

  • 文章のポイントがわかる
  • メリハリやリズムが付きやすい
  • 疲れにくいから最後まで読んでもらいやすい

それぞれ解説します。

文章のポイントがわかる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 使うポイントを決めておく
  • 色はなるべく2色以内に決めておく

それぞれ解説します。

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

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

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

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

使う色を絞っておくこと

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

例えばこんな感じ。

f:id:slash1196:20210609182845j:plain

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

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

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

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

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

今回は以上です。

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

はてなブログの記事の書き方を知りたいなら

はてなブログの書き方をわかりやすく解説!!【初心者必見】
初心者 「はてなブログで記事を書きたいけれど、書き方がわからない。だから教えて。」 こんなお悩みにお答えします。 この記事でわかること はてなブログの書き方 記事を書く上で知りたい注意点と書くべき記事とは こんにちわ。Jouji(@jouj...

はてなブログのカスタマイズの仕方を知りたいなら

はてなブログで作ったサイトのカスタマイズ集17選【初心者必見】
はてなブログのカスタマイズを「どれから手を付けたらいいか」悩んでいませんか? この記事では、はてなブログのカスタマイズの項目が分かるだけでなく、今すべきカスタマイズの項目もまるっとわかります。 カスタマイズ項目を知りたいなら必見の記事です。

アフィリエイトの始め方を知りたいなら

アフィリエイトの始め方をわかりやすく解説【初心者向け】
初心者 「アフィリエイトを始めたいけれどいったいどうやって始めたらいいのかな。 始め方の流れとかポイントとかも教えてほしいな。」 こんなお悩みにお答えします。 この記事でわかること アフィリエイトの始め方 アフィリエイトブログを成功させるポ...
タイトルとURLをコピーしました