アクセストリガー

アクセストリガー

マーカーを引いたような文字装飾を可能にするCSSの変更はコレだ!

マーカーを引いたような文字装飾を可能にするCSSの変更はコレだ!

CSSに変更を加えておき、投稿本文中にあるHTMLコードを指定するだけで、まるでマーカーを引いたような文字装飾を可能にする方法を知りました!

しかし、見出しタグのようにH1~H6など決まった箇所ではなく、今回は自分で任意の文字中に装飾を施すという方法です。

本文中にマーカーを引いたように文字を装飾する

カラフルなマーカー

見出しタグの指定にCSSを作っておいた場合、それ以降はWordPressのビジュアルエディターから、見出し(1~6)などを指定するだけで勝手に適応されるのですが、今回はそのようにはいきません。

本文中のこの箇所にマーカーを引きたいっといた場合に、テキストエディターに次のHTMLコードを指定します。

コードの中に「任意の文字」とあるところは文字を入れてください。つまりマーカーを引きたいところの文章です。

黄色のマーカー

黄緑色のマーカー

水色のマーカー

桃色のマーカー

オレンジ色のマーカー

上記のテキストコードが反映されるためには、事前に元となるCSSの編集をする必要があります。

CSS編集が得意な方は直接、テーマのCSSを編集してください。

初心者の方には次の方法で、カスタムCSSを使う方法をお勧めします。

Simple Custom CSSならレイアウトを壊さず安全です!

 ブログなどのサイトの文章中に少し個性を出してみたいと思ったら、CSS(Cascading Style Sheets)の編集を行う事でがらりと見た目を変えることが出来ます。CSSとはスタイルシートと呼ばれるものであり、サイ…

カスタムCSSへと追記する場合、次のコードをコピーして貼り付けて下さい。

最後に

今回はこちらのページを参考にさせていただきました!

今まで、文字の装飾でアンダーラインなどを引いて目立たせることが出来たらいいなあと思っていたのですが、マーカーを引いたようにできるのはかなり目立ちます。

すごく長い間このような方法がないものかと探していただけに、この投稿にたどり着いた時は本当に嬉しかったです!

やっと見つけたと!そして実際にマーカースタイルで文字が装飾された時には感動しました!

ちょっとした工夫で、強調したいところを強調できるのですが、このマーカースタイルは文字の温かみが損なわれません。

手書きで文章を書いたような印象を読み手に伝えることもできると思います。

上記のページでは、4種類のマーカーを掲載されておりましたが、私はオレンジ色のものも使ってみたいので、少しオリジナルのものを加えています。

orangeというカラーを追加して、合計5色のコードを紹介させて頂いていますのでよろしかったらそちらのコードもお使いいただければと思います。


LEAVE A REPLY

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top