CLOSEHOME>プログラミング>WordPress>誰でもできる!CSSで蛍光ペン風の装飾のつけ方をわかりやすく解説するよ!誰でもできる!CSSで蛍光ペン風の装飾のつけ方をわかりやすく解説するよ!2017.10.20TwitterFacebookはてブB!Google+pocketFeedlyこんにちは!Takuya.B(@TB_IQ)です。蛍光マーカーのような文字装飾って今ではいろんなブログで見かける機会が増えてきました。まとめCSSで蛍光マーカー風の装飾をする方法では、実際にWordpressの投稿画面でテキストエディタを開いて次の1行をコピペしてください。0&);">ここにマーカーが適用されます</span>すると、次のようにデザインが適用されます。ここにマーカーが適用されますこのように蛍光マーカーのようなデザインです。HTMLの下準備では、これをもう少し手軽に使えるようにしてみましょう。class="red-marker">ここにマーカーが適用されます</span>このように要素にクラスを持たせます。CSS次にCSSです。style.cssに次のコードをコピペしてください。0%);}ちなみに実際、このようになります。red-markerblue-markeryellow-markergreen-markerこのようにCSSを記述することで、要素にred-markerのクラスを持たせたら赤マーカー、green-markerのクラスを持たせたら緑マーカーとスタイルを反映させることができます。蛍光マーカーの色を変えたい場合ちなみに、わたしは薄い色を使っていますが、「薄すぎて見にくい!」という方は下記のコードをコピペしてください。0%);}こうすることで濃いめのマーカーになります。こんなふうにred-markerblue-markeryellow-markergreen-markerただ、これだと目が痛くなるんですよねぇ...。強調って意味では良いんですけど、あまり乱用しすぎると目がッ目がッ〜〜!となりますのでご注意ください。その他の色を使いたい場合さて、赤・青・黄・緑のマーカーを例にご紹介しましたが、その他の色を使いたいという方もいらっしゃるはず。0%);}こちらのコードの『#AAAAAA』の部分を自分の好きな色のカラーコードに変えてください。蛍光マーカーの線の太さを変えたい場合もあるでしょう。60%』のパーセンテージの値を変えてみてください。するとこのようにマーカーの太さが変わります。カッコ()の中身は実際のパーセンテージの値です。ここにマーカーが適用されます(20%)ここにマーカーが適用されます(40%)ここにマーカーが適用されます(60%)ここにマーカーが適用されます(80%)ここにマーカーが適用されます(100%)ここでの%の値は大きければ線が太くなるのではありません。逆で、%の値を大きくすれば、マーカーの線は細くなります。スポンサーリンクまとめ蛍光マーカーの文字装飾をすることで、文章中でメリハリを付けることができます。meTakuya.B大学院博士課程まで進学して宇宙系の研究に取り組むも中退。現在は本業iOSエンジニアとして勤務する傍ら、副業として個人ブロガー向けのWordPressカスタマイズサービスに取り組んでいる。Postsたとえ3日坊主でも辞めない2020.1.52020年あけましておめでとうございます。