ブログでラインマーカーを使って 文字を目立たせる
ブログを見て回ると、ラインマーカーを使ったような表現を見かけます。
気になりませんか?
ブログの内容や、表現方法によって強調したい場面は多いですよね。
そんなとき、下線をラインマーカーのように表現出来たら良いなと思い、挑戦してみました。
ラインマーカー表現するための手順
スタイルシート (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%);
}
- .green-line の先頭 「. 」 を必ず付けること
- %はラインの幅のサイズで大きいほど、細い線になります
- 好きなカラーを指定する
- green-lineはクラス名でこれをお好きに変更して下さい
- 太さの異なる設定を登録するのも有りだと思います
ダッシュボード⇒外観⇒テーマの編集
最後尾にコピペします。必ず変更を保存して下さい。
AddQuicktagの設定
プラグインAddQuicktagをインストールして下さい。
インストールしましたら ダッシュボード⇒設定⇒AddQuicktag
コピペして使用可能です
開始タグ <strong class="pink-line">
終了タグ /strong>
開始タグ <strong class="pink-line">
終了タグ </strong>
開始タグ <strong class="pink-line">
終了タグ </strong>
クラス名は必ず、CSSと同じにして下さい。
使用方法
ビジュアルモードでもテキストモードでもOKです。
マーカーを引きたい箇所を選んでからQuicktagsを選択します。
取り消したい場合は、もう一度選択すると消えます。