クリックが励みになります

【コピペ】ラインマーカーで文字を強調したい!ワードプレス設定方法

ブログでラインマーカーを使って 文字を目立たせる

 

ワードプレス AddQuicktag マーカーブログを見て回ると、ラインマーカーを使ったような表現を見かけます。

気になりませんか?

 

 

ブログの内容や、表現方法によって強調したい場面は多いですよね。

そんなとき、下線をラインマーカーのように表現出来たら良いなと思い、挑戦してみました。

 

 

ラインマーカー表現するための手順

スタイルシート (style.css)を編集

先ず、メモ帳やエディターで、CSSを記述します。

 

コピペしてそのまま使えます。変更は、クラス名、サイズ(%の所です)、カラーの3点です。


/*****************************************
ラインマーカー
******************************************/

.green-line {
background: linear-gradient(transparent 70%, #66FFCC 70%);
}

.blue-line {
background: linear-gradient(transparent 70%, #66ccff 70%);
}

.pink-line{
background: linear-gradient(transparent 70%, #FF9999 70%);
}


 

2016-12-07_23h26_28
  1. .green-line の先頭 「. 」 を必ず付けること
  2. %はラインの幅のサイズで大きいほど、細い線になります
  3. 好きなカラーを指定する
  4. green-lineはクラス名でこれをお好きに変更して下さい
  5. 太さの異なる設定を登録するのも有りだと思います

 

 

ダッシュボード⇒外観⇒テーマの編集

 

ワードプレス AddQuicktag マーカー

 

最後尾にコピペします。必ず変更を保存して下さい。

 

AddQuicktagの設定

ワードプレス AddQuicktag マーカー

プラグインAddQuicktagをインストールして下さい。

ワードプレス入力補助プラグイン:TinyMCE AdvancedとAddQuicktag2選

 

インストールしましたら ダッシュボード⇒設定⇒AddQuicktag

ワードプレス AddQuicktag マーカー

 

コピペして使用可能です


開始タグ <strong class=”pink-line”>
終了タグ /strong>

開始タグ <strong class=”pink-line”>
終了タグ </strong>

開始タグ <strong class=”pink-line”>
終了タグ </strong>


クラス名は必ず、CSSと同じにして下さい。

 

ワードプレス AddQuicktag マーカー

 

使用方法

ビジュアルモードでもテキストモードでもOKです。

マーカーを引きたい箇所を選んでからQuicktagsを選択します。

取り消したい場合は、もう一度選択すると消えます。

 

ワードプレス AddQuicktag マーカー

投稿者プロフィール

大橋雅夫
大橋雅夫respect justice
鎌倉生まれの湘南育ちです。
60才を越えましたが、まだまだ好奇心旺盛です!

このブログでは、『知らないではすまされない事を、お知らせしていく』がメインテーマになっています。

いわゆる情弱で損をさせられている人が一人でも救済されますことを願って、ブログを書き続けていきます。


このLight Reader Magazine以外にもいくつかのメディアを運営しています。
ご興味が湧きましたらご覧下さい。
http://www.goriyakupowerspot.com/

記事がお役に立ちましたら 
★いいね!★お願いします。

コメントを残す

ABOUTこの記事をかいた人

鎌倉生まれの湘南育ちです。 60才を越えましたが、まだまだ好奇心旺盛です! このブログでは、『知らないではすまされない事を、お知らせしていく』がメインテーマになっています。 いわゆる情弱で損をさせられている人が一人でも救済されますことを願って、ブログを書き続けていきます。 このLight Reader Magazine以外にもいくつかのメディアを運営しています。 ご興味が湧きましたらご覧下さい。 http://www.goriyakupowerspot.com/