蛍光ペンマーカー風の下線を引くCSSを1分で導入する方法！

トレンドアフィリエイトブログは極端な事を言ってしまえば、デザインが美しくなくても結果を出すことが出来ます。

そのため、ブログ開設当初にデザインに凝ってしまって、記事の投稿数が減ってしまうくらいであれば、テンプレートのままでも記事をドンドン書いた方が結果が出るのは早いと僕は考えています。

ただ、せっかくなら見やすい記事に仕上げたい！と思う気持ちも良く分かりますし、ユーザーさんに情報を見やすく提供をするということはもちろん良いことです。

そんなあなたにオススメしたいのはワンポイントの文字装飾です。

ライティングに慣れている方やデザインセンスが優れている方であれば、複数の文字装飾を効果的に組み合わせる事が出来ますが、トレンドブログ初心者の方が複数の装飾を組み合わせてしまうと、逆に読みにくくなってしまうことも多いので、まずはひとつの装飾パターンを適度に使うところから始めると良いと思います。

こちらの記事ではこの部分のように蛍光ペンで引いたアンダーラインのような装飾を実現するCSSをご紹介します。

蛍光ペンマーカー風 文字装飾CSS公開

文字の背景に色を付けるCSSはbackgroundという要素に色を指定すれば付けることが出来るのですが、普通に指定をすると以下のような装飾になります。

この感じ、ちょっと微妙じゃないですか？

よく見る装飾ですし、文字を目立たせるという役割としては十分なんですが、ちょっと安っぽい印象になってしまいます。

また、デザインにあまり慣れていない方がやりがちなのが派手すぎる装飾！

PCやスマホの画面は紙よりも色がギラついてしまうので、自分が思っている以上に控えめの色にしても十分目立たせることができます。

ということで、このサイトで使っているCSSの設定を以下に公開するので、もしよろしければお使いください。

たった5行で完了です。

ちなみに線の太さを太くしたい場合は65%の部分の数字を小さく（例：10%など）、細くしたい場合は大きく（例：90%など）してみてください。

また、この部分のように文字を赤くしたい場合は以下のようなCSSになります。

color: #cc0000;

の部分が文字の色指定なのでお好きな色に変更してください。

.fontBoldMoreRed

というクラス名は自由に変更して大丈夫です！

上記のCSSを設定した上で、WordPressの本文を以下のような記述にすると…

蛍光ペンマーカー風
文字赤バージョン

こんな感じで表示されます。

ちょっとした工夫でオシャレになるので、まずはこういった簡単な装飾からはじめて、徐々に自分の理想的なブログに仕上げていくことをオススメします！

まとめ

ちなみに僕はWordPressの文字入力はリッチエディタモードは使わずにテキストモードのみを使うようにしています。

理由は、リッチエディタモードは意図せず余分なHTMLタグが入ってしまうことがあるためです。

自分で記事を書いている分には原因がすぐ分かるので、それほど大きな問題にはならないのですが、外注化をすると高い確率で予想外の改行などが入る原因になります。

慣れないうちはリッチエディタモードの方が実際の記事イメージに近く、書きやすく感じるかもしれませんが、長期的に考えるとシンプルなテキストモードでの執筆に慣れておいたほうが、メリットが大きいと思います。（HTMLタグのことも自然と覚えられますし！）

また、テキストモードで記事作成する際はAddQuicktagというHTMLタグ入力補助プラグインは絶対に入れておいた方が良いです！

引き続きがんばっていきましょう！

期間限定企画実施中！

アフィリエイトの始め方が分からない

結果がなかなか出ない

という方に向けて、期間限定で無料相談を受付けています。

以下のリンクより、お気軽にお問い合わせください。

無料相談はこちら