こんにちは。YOSHITAKA（@YOSHITA19704216）です。
初心者
ブログでアンダーラインって引けますか？
よしたか
できますよもちろん。
アンダーライン風にマーカーをつけるやり方をご紹介します。
アンダーライン風に蛍光マーカーってこんな感じです。
今日はこの方法について解説します。
いくつか色のパターンを掲載しておきますので、
お好みのものをコピーしてご利用下さい。
この記事を読むことで
- アメブロで蛍光マーカーを引く方法がわかります。
- WordPressでマーカーを引く技術も付きます。
- 太さの調整と色の調整方法がわかります。
Contents
下線の蛍光マーカーを引く方法
ホームページ全般に活用できます。
ホームページやブログの文章でも
蛍光マーカーのようにテキストの背景に
色を付けて目立たせる方法があります。
アメブロでもWordPressでもどちらでも活用が可能です。
アメブロで活用する手順
fa-arrow-circle-right
アメブロ記事に活用する方法
- 下記の記述見本（コード）をコピー
- 記事編集画面をHTMLモードに切り替えて貼り付け
- 標準モードに変更
見本 例
黄色のマーカーですー
<span style="background: linear-gradient(transparent 60%, #ffff00 100%);">黄色のマーカーですー</span>
青のマーカーですー
<span style="background: linear-gradient(transparent 60%, #00ffff 60%);">青のマーカーですー</span>
緑のマーカーですー
<span style="background: linear-gradient(transparent 60%, #00ff00 60%);">緑のマーカーですー</span>
ピンクのマーカーですー
<span style=”background: linear-gradient(transparent 60%, #ee82ee 60%);”>ピンクのマーカーですー</span>
WordPressで活用する方法
fa-arrow-circle-right
WordPressで蛍光マーカーを使う方法
- 投稿画面
- テキストモード
- 貼り付け
↓ ↓ ↓ 貼り付けはコチラです。
<span style=”background: linear-gradient(transparent 60%, #ee82ee 60%);”>ピンクのマーカーですー</span>
※操作方法としてはプラグインで楽にする方法もあります。
太さと色の調整
以下のコードがあるのですが変化させる場所は二つです。
<span style=”background: linear-gradient(transparent 60%, #ee82ee 60%);”>ピンクのマーカーですー</span>
太さの調整をする場合は
transparent 60% の数値を大きくしていって下さい。
色を調整する場合は
#ee82ee の部分を変更すれば変わります。
カラーコードの情報はコチラです。
お好きな色を選んで下さい。
まとめ
本日は蛍光マーカーについて
解説しました。
目が行くところを強調する工夫は
大事ですね(^^)
他にも情報を知りたい方は
メルマガに登録しておいて下さいね(^^)
