WordPress

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

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

 

ワードプレス 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 マーカー

-WordPress
-, ,

© 2024 Light Reader Magazine