サラリーマンのネタ帳

*

簡単!ワードプレスの記事で文字に下線(蛍光ペン)を引く設定方法!

   

keikou_pen

ちょっと前からブログ記事の中でこんな文字を見かけるようになりました!

文字の下線に蛍光マーカーを引いた表現です。

 

お洒落でカッコイイ!ですよね。

 

あ~見たことある!って方も多いんじゃないでしょうかね。

ワードプレス(wordpress)やってみたい!と思っていても、いざ自分でやるとなるとちょっと敷居が高かったりします。

 

でも安心して下さい。やってみると意外に簡単で、でわたしにも出来るようになりましたよ。

作業時間は10分足らず。。。

 

えっ!?こんなに簡単なの。というのが本音です。なんでもっと早くやらなかったんでしょうね。

強調文字や色を変えただけと違って、ちょっとお洒落でいいなぁということで、ちょっといじってみました。

 

スポンサードリンク

 

編集するのは「CSS(style.css)」と「記事のHTML」を直接調整するだけ。

この2つだけでお洒落で格好いい文字下線が引けます。

CSS(style.css)の編集

まずはCSS(style.css)を編集していきましょう。と言っても簡単なので安心して作業して下さい。

ほんとコピペで作業が完了するレベルですよ。では。

コードはこれ

style.cssに書き込むのはこの3行だけです。

 

 

「外観」>「テーマの編集」>「style.css」を選択して一番下部にこの3行を追加するだけです。

 

.lightcoral-line {background: linear-gradient(transparent 70%, #f08080 0%);}

のコードのうち、

「transparent 70%」の部分が線の幅となります。

0%が一番太く、100%が一番細い。て言うか見えない。

ここは自分の好みで少しずつ数値を調整していくしかないですね。

 

「#f08080」の部分が下線の色になります。

カラーコードはこちらを参照するといいでしょう。

カラーコード

 

 

記事中のHTMLの編集

CSS(style.css)の編集が出来たら、あとは記事を書いていくだけです。

記事には該当箇所に簡単なコードの記述を行うだけです。

コードはこれ

記事中に記載するコードは下記となります。

これでこんな感じのお洒落なテキストの完成です。

 

いかがでした!?

思ったより全然簡単じゃないか!と思われたのではないでしょうか。

文字に下線マーカーを引くだけで記事の印象が全く違ってきます。ちょっとワンランク上がった感じですね。

ぜひ、試してみて下さい。

 - 暮らし記

336

336

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

優勝試合を東京ドームで生観戦!広島東洋カープ25年ぶりの優勝!!

25年ぶりの歓喜!広島東洋カープの優勝試合に行ってきましたよ! ほんとうれしい! …

iOS7でも大丈夫!!iPhone・iPadでアプリをシャットダウンする方法。

iPhone、iPadでは今使ってるアプリの他に、以前使用したアプリが裏で動いて …

実体験!PASMO払い戻し場所は「JR窓口」で受付けてくれない!

結論から先に言おう。「PASMOの払い戻しはJRではできない!」実際体験してきた …

やっちまった!!IMEI(iPhone製造番号)を確認する前に初期化してしまった人たちへ。

  「あ~、IMEI製造番号のチェックせずに初期化してしまった!!」 …

殻付き牡蠣の剥き方!上手に剥く4つの手順!ステーキナイフでも代用

知り合いから殻付きの牡蠣が大量に送られてきた。冬の味覚として代表される牡蠣。 わ …

サラリーマンの私が「本気で人生を変える。」為に取ってる行動。

人と同じ事をやっていてはダメだ。 何度となく聞くフレーズだろう。しかし …

穴場はここだ!多摩川花火大会で狙うは多摩川駅と新丸子駅。

(新エントリー)2015年8月22日(土)午前11時現在の場所取り状況を「最新エ …

時短で簡単に餃子完成!手作り餃子に「フードプロセッサー」は必須!

初めてフードプロセッサーを使って餃子作りをしてみました!   で、フー …

体温計
風邪を1日でも早く治す方法!予防や諸症状(熱・喉・寒気)の対策!

誰もが一度はかかったことのある病気「風邪」 当然ですが「つらい風邪」って早く治し …

プリンターのインクを200円以下で交換する方法

家庭でプリンターを使っている人は多いのではないでしょうか?うちも昨年、パソコンを …