パソコンが苦手な起業女性の為のブログ構築講座

CSSで簡単!ブログ本文に蛍光ペン風のマーカー線を引くカスタマイズ方法

 
  2018/02/08
WRITER
 
この記事を書いている人 - WRITER -
パソコンが苦手なアラフォー起業女性の為に、集客できるワードプレスブログやホームページを構築するお手伝いをしています。
詳しいプロフィールはこちら

 

こんにちは。WEB構築アドバイザー今井です。

このブログではイエローライムピンクと3色のマーカー線が引ける様になっているのですが、実は全てが元々付いている機能ではないんですね。

 

今、私が使っているワードプレスのテーマ「Seal」にはイエローのマーカーが引けるコードが標準で装備されているので、自分でカスタマイズする必要はないのですが、

以前使っていた「Lightning」というテーマでは、そもそもマーカー線を引ける装備が全くありませんでしたので、自分でカスタマイズしてたんですね。

 

そんなわけで、見やすくおしゃれにマーカー線をブログに引きたい貴女の為に、カスタマイズ方法をお伝えします。

1色だけでは物足りないという方も参考にしてみて下さいね。

NOBUKO

 

 

マーカー線はどんな時に使うの?

文字や文章を強調したい時に使います。

文字の色を変えるという方法もありますが、

例えばこんな風に赤い文字で2~3行書いてしまうと、かえって内容が入ってこない・・・

いかにも強調されてるなって部分は、面倒くさくなって読み飛ばしてしまう事もあるものです。

目がチカチカして読みにくかったりもしますよね。

 

それより、こんな風にマーカー線を使った方が読者にとって読みやすく、お洒落な見た目にもなります。

 

マーカー線を引ける機能がなければ「こんな感じに」文字の背景全体を色で覆ってしまうしかないですね。

これでも良い様な気がしないではないですが、やっぱり何だか垢抜けませんし、妥協してブログを書くのは、更新するモチベーションも上がらず良くないのでは?!

という事で、そんなに難しい設定要らずで、CSSの追加だけでマーカー線が引ける方法を調べてやってみたら意外と簡単に出来ましたので、記録の為にも書いておこうと思います。

 

 

ブログのカスタマイズは難しい?!コツはある?

CSSをいじったりしてカスタマイズすると言うと、難しそうとかちょっと間違えたらワードプレスのシステムを壊して大変な事になりそう・・・

と思われる方が多いかもしれませんが、最初から難しい事をせずに、簡単に出来そうなものから始めてみましょう。

 

ワードプレスを壊さない様にするコツは、必要なコードを全て正しい場所に貼り付ける事です。

コードが1文字欠けていたり、スペースが1つ入ってないだけで、上手くいかなかったりもします。

ですので、コードをコピペする時は十分注意して行いましょう。

 

 

 

マーカー線を引くカスタマイズ方法-3色設定

では、いよいよカスタマイズの方法です。

ピンク、イエロー、ライムの3色です。

 

下記のコードをCSSに追加します。

色を変えたい場合は、「#」の右側の6桁のコード(数字とアルファベットの羅列)を変更して下さい。

 

色見本、番号はこちら「原色大辞典」をどうぞ。

 

「外観」→「テーマの編集」で追加しても良いですが、お使いのテーマに「外観」→「追加CSS」の箇所があれば、そちらに追加する事をおススメします。

/*ピンクの線*/
.pink-line {
  background: linear-gradient(transparent 60%, #F9D2D2 0%);
}
/*イエローの線*/
.yellow-line {
  background: linear-gradient(transparent 60%, #ffff00 0%);
}
/*ライムの線*/
.blue-line {
  background: linear-gradient(transparent 60%, #B5DFFF 0%);
}

 

 

 

ブログ本文にマーカーする方法

CSSにコードを追加したら、ブログ本文のテキストモードにそれぞれ下記の様に記述します。

イエローのマーカー線
<b class=”yellow-line”>イエローのマーカー線</b>

 

ライム色のマーカー線
<b class=”blue-line”>ライム色のマーカー線</b>

 

ピンク色のマーカー線
<b class=”pink-line”>ピンク色のマーカー線</b>

 

線を引きたい文字の前後にタグを入れます。

 

 

ボタン1つでマーカー線を入れるには?

上記のタグをどこかに保存しておいて、毎回そこからコピペするという原始的な方法もありますが、それだと面倒くさそうですね。

折角カスタマイズは完璧にしても、今後マーカーを引きたい気持ちが薄れていきますよね。

というわけで、手軽にボタン1つで出来る方法をお伝えしておきます。

 

 

「Add Quicktag」というプラグインをインストールする

サイドメニューから「プラグイン」の「新規追加」をクリックして「AddQuicktag」で検索します。

検索で出てきたら、インストールして有効化します。

 

 

タグを登録する

続いてプラグインの設定です。

先程のプラグインを有効化したら、サイドメニューの設定の中に「AddQuicktag」が追加されてますので、それをクリックします。

 

すると、下記の様な四角の枠がいくつか出てきますので、それぞれの枠に下記の項目を入力し、「変更を保存」をクリックで登録します。

 

<入力例>

 

ボタン名 ⇒ 分かりやすい任意の名前を入れます。(記事編集画面のQuicktagsに表示される名前です。)

ダッシュアイコン ⇒ Quicktagsに表示される名前の前に出てくるアイコンです。お好みのものを選んで下さい。

開始タグ* ⇒ マーカーを引く文字の前に入れるタグを入力します。

終了タグ(s) ⇒ マーカーを引く文字の終わりに来るタグを入力します。

チェックボックス ⇒ 右側の7つのボックスにチェックを入れる。(一番右端のチェックボックスに入れると一気に7つ入れる事が出来ます。)

 

登録が終われば、「投稿」の「新規追加」でボタンが登録されているか確認してみて下さい。

 

 

マーカーが表示されるか確認する

無事登録されていたら、実際に表示されるか確認してみましょう。

下記の様に何か文字を入力したら、選択した状態にして、Quicktagsのプルダウンメニューの中から引きたい色のマーカーを選択して下さい。

 

文字を選択してマーカーをクリックすると、下記の様にビジュアルモードでは太字になっただけで色は出てきません。

ですので、ちゃんと色がついたマーカーが引けているかどうか確認する時は、更に投稿画面の右上にある「プレビュー」をクリックして下さい。

 

プレビュー画面で下記の様になっていればOK!カスタマイズはこれで終了です。

お疲れ様でした。

 

 

最後に

いかがでしたか?

AddQuicktagへの登録は一手間かかりますが、一回登録しておけば、ブログ更新の際に装飾が楽々出来るので、その他のタグ等も同様に登録しておく事をおススメします。

 

強調したい文字や文章を見やすく分かりやすくお洒落に装飾したい方は、ぜひお試し下さいね。

 

 

 

 

この記事を書いている人 - WRITER -
パソコンが苦手なアラフォー起業女性の為に、集客できるワードプレスブログやホームページを構築するお手伝いをしています。
詳しいプロフィールはこちら

Copyright© YOUR COLOR'S WEB , 2018 All Rights Reserved.