アメブロのカラーの蛍光アンダーラインを引く方法。WordPressにも活用可能!

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

 

初心者
ブログでアンダーラインって引けますか?

よしたか
できますよもちろん。

アンダーライン風にマーカーをつけるやり方をご紹介します。

 

アンダーライン風に蛍光マーカーってこんな感じです。

 

今日はこの方法について解説します。

いくつか色のパターンを掲載しておきますので、

お好みのものをコピーしてご利用下さい。

この記事を読むことで
  • アメブロで蛍光マーカーを引く方法がわかります。
  • WordPressでマーカーを引く技術も付きます。
  • 太さの調整と色の調整方法がわかります。

下線の蛍光マーカーを引く方法

ホームページ全般に活用できます。

ホームページやブログの文章でも

蛍光マーカーのようにテキストの背景に

色を付けて目立たせる方法があります。

アメブロでもWordPressでもどちらでも活用が可能です。

アメブロで活用する手順

アメブロ記事に活用する方法

  • 下記の記述見本(コード)をコピー
  • 記事編集画面を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で活用する方法

WordPressで蛍光マーカーを使う方法

  1. 投稿画面
  2. テキストモード
  3. 貼り付け

↓ ↓ ↓ 貼り付けはコチラです。

    <span style=”background: linear-gradient(transparent 60%, #ee82ee 60%);”>ピンクのマーカーですー</span>

     

    ※操作方法としてはプラグインで楽にする方法もあります。

    太さと色の調整

    以下のコードがあるのですが変化させる場所は二つです。

     

    <span style=”background: linear-gradient(transparent 60%, #ee82ee 60%);”>ピンクのマーカーですー</span>

     

    太さの調整をする場合は

    transparent 60% の数値を大きくしていって下さい。

     

    色を調整する場合は

    #ee82ee の部分を変更すれば変わります。

     

    カラーコードの情報はコチラです。

    お好きな色を選んで下さい。

     

    まとめ

    本日は蛍光マーカーについて

    解説しました。

     

    目が行くところを強調する工夫は

    大事ですね(^^)

     

    他にも情報を知りたい方は

    メルマガに登録しておいて下さいね(^^)

     

    あなたは「Web集客」に限界を感じていませんか?

    サイトをただ作るだけで満足ですか?

    あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

    良いコンテンツも埋もれてしまっては全く意味がありません。

    正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

    私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

    しかも、これだけでは終わりません!!

    その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

    サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

    ↓ ↓ ↓ ↓ ↓ ↓ 

    おすすめの記事