ーーおすすめの記事!ーー

ブログを読みやすく!マーカー風の装飾で強調ポイントを目立たせよう!【はてなブログ】

 こんにちは!はまちょうです。

 

 最近少しだけHTMLとCSSの勉強をするなかで、どうすれば自分のブログが読みやすくなるか頭を悩ませています。

 

 その第一弾の成果として、こちらの記事初心者が1週間でどこまでブログデザインを改善できるのかやってみたでまずはトップページのデザインの変更を行いました。

 

 いろいろなブログを見て勉強していると、トップページのデザイン以外にも、ブログの記事を読みやすくする方法は、まだまだたくさんありそうなことがわかりました!

 

 せっかくHTMLとCSSを勉強したので、まったく知識のない方でも記事を読みやすくする方法を実践できるように、一つ一つご紹介していきたいと思います!

 

 その第一弾が今回。ポイントとなる文章を強調する方法です。ブログ記事の中で、どうしても読んでもらいたいポイントになる部分ってありますよね。

 

 はてなブログで文章を強調する方法は、

  • 文字の大きさを変える
  • 文字の色を変える
  • 文章にアンダーラインを引く

 もともとの設定で用意されている方法は上記の通りです。

 

 今回は、この方法からさらに一歩踏み込んで、このように強調したい部分に蛍光ペンのマーカーを引いたように強調する方法をご紹介します。

 

 「やってみたかったけど設定が難しそう」なんて思っている方も心配いりません。僕自身もつい最近勉強してやっと出来るようになったのでその気持ちは痛いほどわかります。

 

 図を使いながらできるだけ丁寧にやり方を書いていくので、この記事を読んでいただければ必ず出来るようになります!

 

 もしこの記事の手順通りにやってもできなければ、ご質問も大歓迎ですよ!

 マーカーで強調するために設定が必要な場所

 まずは設定が必要な場所からご紹介します。はてなブログのダッシュボードから、設定>詳細設定と進んでいき、

f:id:hamach0:20190511170717j:plain

 下にスクロールしていくと下記のような画面が現れます。

f:id:hamach0:20190511171913j:plain

 ここの部分に必要なコードを張り付けていきます。 不安な方は、万が一失敗したときのために、現在記述してあるコードをメモなりに保存しておいた方が安心です。

具体的な設定方法:準備編

 先ほどご紹介した部分に、以下のコードを張り付けていきます。

gist2e856fe4453c444acac098f2c6b2fa05

 なお、上記のコードは以下の記事を参考にさせていただきました。ありがとうございます!


www.manochang.com

 

 先ほどの箇所に貼り付ける前にすでに別のコードが記述されてる場合は、上記のコードをその下に貼り付ければ大丈夫です。

 

 貼り付けた後に、先ほどの画面を一番下までスクロールして「変更する」ボタンを押すのを忘れないようにしてください!

具体的な設定方法:実践編

 ここまで来たら後は簡単です。強調したい部分を選択して、はてなブログ編集画面の“斜体”ボタンを押すだけです。(画像左上黄色マーカー部分)

f:id:hamach0:20190511180409j:plain

 

 図だけだとわかりにくい部分もあるかもしれないので、下のGIFでも確認してみましょう。※クリックで動きます

f:id:hamach0:20190511182906g:plain

マーカー色の調整方法(自分でカスタマイズしたい方向け)

 上のGIFを見ていただければわかる通り、現在の設定は「リビング・コーラル」という色です。実はこの色、2019年の流行色なんです!

 

 とはいえ趣味は人それぞれなので、色を変更する方法も合わせてご紹介しておきます。

マーカー色の変更方法

 色を変更するには、先ほど紹介したコードの8行目(下記マーカー部分)を変更してあげる必要があります。

f:id:hamach0:20190511183820j:plain

 小さくて見えにくいですが、現在の設定は「#FF6F61」となっており、このコードが「リビング・コーラル」の色を表すコードになっています。

 

 上記のように、すべての色にはカラーコードが存在しているので、あとは自分の好きな色のカラーコードを探してきて、この部分を書き換えてあげるだけです

 

 カラーコードを探すにはこのサイトWEB色見本 原色大辞典 - HTMLカラーコードが使えます。

 

 わざわざ自分で探すのが面倒という方向けに、ここでもいくつか例を示しておきます。 

 カラーコード「#ffff00」

 カラーコード「#00ff00」

 カラーコード「#ff7f7f」

 カラーコード「#ff9328」

 

 こんな感じで、皆さんのブログデザインに合わせた色にアレンジしてみてください!

おわりに

 今回ご紹介した方法ですが、以下の2点はご注意ください

  • マーカー色の使い分けができない
  • もともと「斜体」を使っていた方は過去の記事で「斜体」設定していた分がマーカーに入れ替わる

 特に2点目には注意してください。

 

 本来であれば、このマーカー機能はHTML編集画面から一つ一つタグに設定していく作業が必須となります。

 

 しかし、ここではボタン一つで誰でも出来る方法をご紹介しています。その手段として、おそらくほとんどの方が使っていないであろう「斜体」のボタンの機能を、マーカーに代替させています。

 

 よって、普段から斜体を多用する方にはこの記事でご紹介した方法はお勧めできません。

 

 色んな色でマーカーを使用したい、又は斜体を多用している方でマーカーを使ってみたいという方がいれば、追々そちらの記事も書いていきたいと思います。

 

 この記事を読まれた方にはこんな記事もお勧めです!

www.hamach0.com

 

 以上です!ここまで読んでいただきありがとうございました!