紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

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

f:id:slash1196:20210609192114j:plain

f:id:slash1196:20200520205950j:plain

はてなブログ初心者

「ブログで蛍光マーカー風の線引いているブログとかよく見るけどあれってどうやっているのかな。教えてほしいな。」

 

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

 

【この記事でわかること】

  • はてなブログでマーカーを引く方法
  • 文中にマーカーを引くメリット
  • マーカーを使うときの注意点

 

こんにちわ、紅蓮です。

 

ブログを読んでいると見かけることが多いのが、ポイントをマーカー風に装飾しているものですよね。

そういうのを見ると、かっこいいなって思いますよね。

 

今回ははてなブログで、重要部分にマーカー選を引く方法をお話していきます。

この記事を読むとマーカー線を引く方法とともに、後半ではマーカー線を引くメリットや使い方も学ぶことができます。

 

この記事を書く僕は、はてなブログ歴3年目。

アフィリエイト収益月3000円ほどといただいております。

 

僕もブログのカスタマイズを調べて、実行してを繰り返してきました。

ぜひ最後までお読みいただけたらと思います。

 

では行ってみましょう。

Here We Go!!

 

 

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

f:id:slash1196:20210609192134j:plain

種類は以下の通り。

 

  • 種類①ボタンを押すとマーカーになる方法
  • 種類②HTMLで引きたい部分をタグで囲む方法

 

では一つずつ見ていきましょう。

 

種類①ボタンを押すとマーカーになる方法

はてなブログで重要部分にマーカー線を引く方法の一つ目は、ボタンを押すとマーカーになる方法です。

CSSコードを置くだけで、ボタンを押すことでマーカーを表示させる方法ですね。

 

このやり方のメリットは、なんといってもボタン一つで済むのでやり方がシンプルなところです。

 

デメリットはというと、一色しか使えないところと、つぶしがきかないところですね。

例えば、Bボタンに黄色を設定しているとします。

 

Bボタンで太文字にしているすべてのところに、黄色のマーカーが表示されます。

ですから、伝えたいニュアンスが変わってしまうことがありますね。

 

種類②HTML編集で引きたい部分をタグで囲う方法

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

 

文章を書くときにHTML編集で、引きたいところを探しそこにHTMLタグを書き込むことによって文章の下にマーカー線を表示する方法ですね。

もちろんCSSにコードを書く必要があります。

 

メリットはというと種類①とは違い、色が何色でも使えることですね。

というのも、CSSで定義するので、色を何色も定義することができるんですよね。

ですから、場所によって使い分けられることができるんです。

 

デメリットはというと、重要部分を探しにくいことですね。

HTMLって文字がいっぱい書いてあるから、見るのに一苦労です。

 

 

そのために見にくいですね。

 

あと種類①と比べると、引きたい場所ごとをタグで書かないといけないために面倒という人もいるかも。

ですが、慣れてくるとそうでもないです。

 

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

f:id:slash1196:20210609192214j:plain

ではやり方を一つずつ見ていきましょう。

 

種類①ボタンを押すとマーカーになる方法の手順

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; }

 

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

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

 

 カスタマイズ①:色の変更 

まずは色を変更しましょう。

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

確認する場所は、以下の通り。

 

background:#fcfc60 !important;

 

この赤いところに色を入れましょう。

 

色的には、黄色とピンクがおすすめですね。

ポイントとしては、よく使うほうを黄色にするのがいいですね。

 

 カスタマイズ②:マーカーの太さの変更

太さに関しては、transparentの横の60%という部分をいじりますね。

ここを数が大きくなるほど細くなるので気をつけましょう。

 

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

 

f:id:slash1196:20210609181555j:plain


おすすめは、大体50~60%くらいがいいですよね。

 

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

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

貼り付ける場所は、「デザイン」→「カスタマイズ」→「デザインCSS」。

f:id:slash1196:20210606181402j:plain

 

 最後に、「変更を保存する」をクリックするのを忘れずに。

 

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

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

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

 

f:id:slash1196:20210609182218j:plain

 

種類②HTML編集にて、引きたい部分をタグで囲む

次にHTML編集にて、引きたい部分をタグで囲む方法ですね。

 

手順①CSSコードをコピーする

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

 

 CSSコード

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

 

手順②コードをカスタマイズする

上記の種類①の時と同じように、カスタマイズしましょう。

 するところは、以下の通り。

 

  • ①色
  • ②線の太さ

 

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

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

場所は、「デザイン」→「カスタマイズ」→「デザインCSS」ですね。

f:id:slash1196:20210606181402j:plain

 

貼り付けた後には、「変更を保存する」のクリックを忘れずに。

 

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

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

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

 

 挿入するHTMLコード

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

 

すると以下のように見えます。

f:id:slash1196:20210609182537j:plain

そして以下のように見えます。


  

f:id:slash1196:20210609182659j:plain

 

文中にマーカーにするメリット

f:id:slash1196:20210609192239j:plain
 

ここでは、ブログの文中にマーカーを表示するメリットをお話していきます。

メリットに関しては、以下の通り。

 

 

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

 

では一つずつ見ていきましょう。

 

メリット①文章のポイントがわかる

文中にマーカーを表示させるメリットの1つ目は、文章のポイントがわかるところです。

学生時代に教科書のポイントとなるところに、線を引きましたよね。

あの感覚です。

 

ブログも同じで、マーカーを表示してあげるとポイントがわかりやすいんですよね。

なので、スーッと頭に入っていくんですよね。

 

メリット②メリハリやリズムが付きやすい

文中にマーカーを表示させるメリットの2つ目は、メリハリやリズムが付きやすいんですよね。

 

人間ってずっと文字を読んでいると、逆に頭に入りにくいんですよね。

なぜなら、変化がないからなんです。

 

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

 

イメージ的には、記事にいれる画像とかと同じような考え方ですね。

 

メリット③疲れにくいから最後まで読んでもらいやすい

文中にマーカーを表示させるメリットの3つ目は、疲れにくいから最後まで読んでもらいやすいんです。

 

先ほどのリズムがつきやすいという言葉にもリンクするんですが、リズムのいい文章って疲れにくいんですよね。

 

そのためにいつの間にか最後まで読んでいるという感じになるんです。

 

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

 

マーカーを使うときの注意点

f:id:slash1196:20210503202125j:plain

最後にマーカーをブログで使うときの注意点をお話していきます。

注意点は、以下の通り。

 

  • 注意点①:使うポイントを決めておく
  • 注意点②:色はなるべく2色以内に決めておく

 

では見ていきましょう。

 

注意点①:使うポイントを決めておく

マーカーを文中で使うときの注意点の一つ目は、使うポイントを決めておくということです。

というのも、使うポイントを決めないで、マーカーを使いまくってしまうと、どこがポイントなのかがわからなくなってしまうからです。

 

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

 

僕自身たくさんのブログを読んできましたが、ほとんどの文章がポイントがわかりやすくなっています。

 

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

 

注意点②:使う色を絞っておくこと

マーカーを文中で使うときの注意点の2つ目は、色を絞っておくことですね。

というのも、同じ記事内に色が何色もあると、読者として醜くなるんですよね。

 

例えばこんな感じ。

 

f:id:slash1196:20210609182845j:plain

いかがですか?

超見にくいですよね。

 

目が痛くなりそうです。

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

 

まとめ|マーカーの使い方をしっかりとしって読者にわかりやすいブログに

お疲れさまでした。

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

 

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

 

まとめ
  • はてなブログでマーカーを引く方法には、2種類の方法があって、メリットとデメリットがある
  • はてなブログでマーカーを引き方は、コピペでできる
  • 文中でマーカーを入れるメリットは3つある。
  • マーカーの使い方には注意点がある。

 

いくらブログの文中にマーカーを使っても、わかりづらくなってしまっては元も子もないので、マーカーの使い方をしっかりとしって読者にわかりやすいブログになるように努力しましょう。

 

ってことで今回はこの辺で。

また次回に。