ちょっと前からブログ記事の中でこんな文字を見かけるようになりました！
文字の下線に蛍光マーカーを引いた表現です。
お洒落でカッコイイ！ですよね。
あ～見たことある！って方も多いんじゃないでしょうかね。
ワードプレス（wordpress）やってみたい！と思っていても、いざ自分でやるとなるとちょっと敷居が高かったりします。
でも安心して下さい。やってみると意外に簡単で、でわたしにも出来るようになりましたよ。
作業時間は１０分足らず。。。
えっ！？こんなに簡単なの。というのが本音です。なんでもっと早くやらなかったんでしょうね。
強調文字や色を変えただけと違って、ちょっとお洒落でいいなぁということで、ちょっといじってみました。
編集するのは「CSS（style.css）」と「記事のHTML」を直接調整するだけ。
この２つだけでお洒落で格好いい文字下線が引けます。
CSS（style.css）の編集
まずはCSS（style.css）を編集していきましょう。と言っても簡単なので安心して作業して下さい。
ほんとコピペで作業が完了するレベルですよ。では。
コードはこれ
style.cssに書き込むのはこの３行だけです。
「外観」>「テーマの編集」>「style.css」を選択して一番下部にこの３行を追加するだけです。
.lightcoral-line {background: linear-gradient(transparent 70%, #f08080 0%);}
のコードのうち、
「transparent 70%」の部分が線の幅となります。
０％が一番太く、１００％が一番細い。て言うか見えない。
ここは自分の好みで少しずつ数値を調整していくしかないですね。
「#f08080」の部分が下線の色になります。
カラーコードはこちらを参照するといいでしょう。
記事中のHTMLの編集
CSS（style.css）の編集が出来たら、あとは記事を書いていくだけです。
記事には該当箇所に簡単なコードの記述を行うだけです。
コードはこれ
記事中に記載するコードは下記となります。
これでこんな感じのお洒落なテキストの完成です。
いかがでした！？
思ったより全然簡単じゃないか！と思われたのではないでしょうか。
文字に下線マーカーを引くだけで記事の印象が全く違ってきます。ちょっとワンランク上がった感じですね。
ぜひ、試してみて下さい。
コメント