「はてなブログで、蛍光マーカーを引いているブログをよく見るけどどうやっているのかな。教えてほしいな。」
こんなお悩みにお答えします。
この記事でわかること
- はてなブログでマーカーを引く方法は2種類ある
- はてなブログでマーカーを表示させる方法別の手順
- はてなブログの文中にマーカーを引くメリット
- はてなブログでマーカーを使うときの注意点
記事の信頼性
こんにちわ、Jouji(@jouji0720)です。僕は現在webライター4年目で、記事を書いて生活をしています。
そんな僕もサイドブログにははてなブログを使っています。
ブログ研究をしていると、記事の文中にマーカー風に装飾しているものが多いですよね。そういうのを見ると「自分もやりたい」と思うものです。
今回は普段ライティングで飯を食っている僕がはてなブログでマーカー線を引く方法をご紹介します。この記事を読むとはてなブログでマーカー線を引く方法、マーカー線を引くメリットや使い方も学ぶことができます。
結論から言うと文字装飾は、読者のためにも必要です。ですからどうぞ最後までお読みの上、手を動かしていきましょう。
はてなブログでマーカーを引く方法は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%という部分を変更します。数が大きくなるほどマーカーの太さは細くなります。
例としては、以下のような感じ。
太さに関しては、50~60%くらいがおすすめです。
カスタマイズコードをコピーしてはてなブログのデザインCSSに貼り付ける
はてなブログのエディター上でボタンを押してマーカーを引く方法の手順の3つ目は、カスタマイズコードをコピーしてはてなブログのデザインCSSに貼り付けることです。
メモ帳アプリ上でカスタマイズしたコードを、コピーしてはてなブログのデザインCSSに貼り付けます。
貼り付ける場所は、以下の通りです。
デザイン>カスタマイズ>デザインCSS
最後に、「変更を保存する」をクリックしましょう。
記事中で使いたいところを選択して、Bまたはiボタンを押す
はてなブログのエディター上でボタンを押してマーカーを引く方法の手順の4つ目は、記事中で使いたいを選択してBボタンまたはiボタンを押すことです。
記事中で使いたいところを選択して、Bまたはiボタンを押しましょう。
すると、以下のように映ります。
はてなブログの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
貼り付けた後には、「変更を保存する」をクリックしましょう。
HTML編集で使いたいところにコードを挿入する
はてなブログのHTML編集で引きたい部分をタグで囲む方法の手順の4つ目は、HTML編集で使いたいところにコードを挿入することです。
記事の編集画面に行き、HTML編集画面で使いたいところを探します。
以下のコードを入れましょう。
挿入するHTMLコード
<span class="marker-yellow">ここに好きな文章</span>
上記を入力します。
プレビューでは以下のように、確認できます。
文中にマーカーを表示させるメリット
はてなブログの文中にマーカーを表示するメリットは、以下の通りです。
- 文章のポイントがわかる
- メリハリやリズムが付きやすい
- 疲れにくいから最後まで読んでもらいやすい
それぞれ解説します。
文章のポイントがわかる
はてなブログで文中にマーカーにするメリットの1つ目は、文章のポイントがわかるところです。
学生時代に教科書のポイントとなるところに、線を引いたと思います。教科書にポイントがわかりやすくなりましたよね。
ブログも同じで、マーカーを表示するとポイントがわかりやすくなります。
メリハリやリズムが付きやすい
はてなブログで文中にマーカーにするメリットの2つ目は、メリハリやリズムが付きやすいことです。
人間は文字を読み続けていると、逆に頭に入りにくいものです。というのも、変化がないからです。
でもマーカー線が入るとそこに変化が生まれます。メリハリが生まれて、読むためのリズムにも緩急が付きます。
疲れにくいから最後まで読んでもらいやすい
はてなブログで文中にマーカーにするメリットの3つ目は、疲れにくいから最後まで読んでもらいやすいことです。
上記のリズムがつきやすい話とリンクしますが、リズムのいい文章は疲れにくいものです。
マーカーを表示すると、最後まで読んでもらいやすくなります。
はてなブログでマーカーを使うときの注意点
はてなブログでマーカーをブログで使うときの注意点は、以下の通りです。
- 使うポイントを決めておく
- 色はなるべく2色以内に決めておく
それぞれ解説します。
使うポイントを決めておく
はてなブログでマーカーを文中で使うときの注意点の1つ目は、使うポイントを決めておくことです。というのも、使うポイントを決めないで、マーカーを使いまくってしまうと、どこがポイントなのかがわからなくなってしまうからです。
ポイントのわからない文章ほど、読みにくいものはありません。
ポイントが絞るためにも、マーカーを使うポイントを決めておくようにしましょう。
使う色を絞っておくこと
マーカーを文中で使うときの注意点の2つ目は、色を絞っておくことです。というのも、同じ記事内に色が複数あると、読者は見づらいからです。
例えばこんな感じ。
超見にくいですよね。目が痛くなりそうです。
だから、色は絞ったほうがいいです。
まとめ|はてなブログでマーカーを使ってわかりやすい記事を作ろう
ここまで、はてなブログで文中にマーカー線を引く方法をお話してきました。
はてなブログで文中にマーカー線を引くことで、読者にはわかりやすい記事となります。しっかりと注意点を守って記事をわかりやすくしましょう。
今回は以上です。
次に読むのにおすすめの記事
はてなブログの記事の書き方を知りたいなら
はてなブログのカスタマイズの仕方を知りたいなら
アフィリエイトの始め方を知りたいなら