こんにちは、あきしゅんです。
自分のブログを読みやすくするために、cssを編集することでこんな感じで蛍光ペン(ラインマーカー)使いたいと思う方多いでしょう。
太字やアンダーラインよりも強調することができ、読みやすくなります。
cssって聞くだけで難しそう...
簡単3step！たった３分でできるよ
そんなバナナ（バカな）
私と同じように使うだけなら、ホントにたった3分でできます！しかも超簡単！
また、色や太さを変えたいと思う方もいるでしょう。カスタマイズの仕方も説明していきます。
- はてなブログを使ってる
- 蛍光ペン(ラインマーカー)を使って記事を見やすくしたい
- 自分なりに蛍光ペン(ラインマーカー)をカスタマイズしたい
たった３分！コピペして貼り付けるだけで蛍光ペン(ラインマーカー)を使う
1. cssコードをコピペ
まずは下記のコードをコピーしましょう！
/* 斜体表示を蛍光ペン（黄）風に */
article em{
font-weight:bold;
font-style: normal;
margin:5px;
padding:1px;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
2. デザインcssに貼り付ける
管理画面より「デザイン」へ
「スパナマーク」→「デザインcss」よりcss記述画面が表示されます。
さっきコピーしたコードをここに貼り付けます（画像３番）。
最後に必ず「変更を保存する」（画像４番）をしましょう。
忘れがちなので注意してください！
3. 蛍光ペン(ラインマーカー)を使う場所を選択して「Ctrl + i」(「command + i」)
画像のように蛍光ペンで強調したい箇所を選択して「Ctrl + i」(「command + i」)を実行すれば蛍光ペンが使えます！
「プレビュー」から出来ているか確認しましょう。
自分なりに蛍光ペン(ラインマーカー)をカスタマイズ
コピペして蛍光ペン引けるようになったけど、色や太さを変えたいと思う方もいるでしょう。画像を使って分かりやすく説明しているのでカスタマイズしたい方は参考にしてください。
マーカーについて
上記では黄色マーカーを使っていましたが、変化の違いを分かりやすくするため緑マーカーを使用します。
色、濃さを変える
background:linear-gradient(to bottom, transparent 60%, rgba(0,252,0,1) 60%) !important;
赤字のrgba(0,252,0,1) の数値を変えましょう。
rgbaの各数字の意味は（赤, 緑, 青, 濃さ）となっています。
いくつか例を載せておきます。
濃さの値を０にすると蛍光ペンが引かれないので注意してください。
ここで注意しなければならないのが、記事内でいろんなマーカーの色を使って記事を書かないこと。
いろんなマーカーの色を使ってしまうと見辛い記事になってしまいます。
1記事内で使うマーカーの色は1種類をオススメします。
私の場合は重要な部分に黄色マーカー、マイナスを強調したい部分は青字と色は2種類にしています。
あとマーカーや色の使いすぎも注意しましょう。
強調が薄れてしまうので、ホントに強調したい部分のみに使ってください。
幅を変える
background:linear-gradient(to bottom, transparent 60%, rgba(0,252,0,1) 60%) !important;
赤字の数値を変えます。
0%が文字全体で、数字が大きくなるごとに太さが小さくなります。100%だと蛍光ペンが引かれないので注意してください。
私のオススメは60〜80%です。
60%以下だと文字が隠れてしまいますし、80%以上だと強調が弱くなってしまいます。
60〜80%の間であれば、数値はあなたの好みで設定してください。
グラデーションを変える
background:linear-gradient(to bottom, transparent 60%, rgba(0,252,0,1) 60%) !important;
「linear-gradient」がグラデーションをかけるデータコマンドで「bottom」で下方向からグラデーションをかけるというコマンドになっています。
赤字の数値を変えることでグラデーションの割合を変えることが出来ます。画像を参考にしてください。 0%にするとグラデーションかかりません。
これは好みによるかと思ってます。
私は黄色マーカーだと分かりづらいですが、少しグラデーションをつけています。
グラデーションなしでも特に文字が見辛いということはありません。
上記画像の200%はやりすぎなので使ってはいけません。
フォントの太さを変える
font-weight:bold;
赤字を変えるとフォントの太さを変えることが出来ます。数値でも太さ指定可能です。
数値の場合小さいほど細くなります。400か700を推奨します。
斜体にしたい
font-style:normal;
- normal: 標準フォント
- italic: イタリック体フォント
- oblique: 斜体フォント
赤字を変えましょう。見やすやを考えるならnormalを推奨します。
まとめ
蛍光ペンの使い方から、カスタマイズまで画像を使って説明していきました。
カスタマイズの仕方を覚えていると、後に変更したいなと思った時にパッパッと変えることができます。
いろんな方のブログを見て、いいなと思うものがあればその都度変更するのもいいかもしれません。
ただし、自分のブログで色の使い方を統一はしましょう。
デザインのコンセプトを決めておくと統一されたデザインで記事を書くことができます。
ブログについての有益情報発信しています。
興味ある方は読者になるをポチッと！