コピペＯＫ！ＣＳＳで蛍光ペン風に文字を装飾するよ【AddQuicktag使用】

最近色々なブログでよく見る気がする「蛍光ペン風の文字装飾」
たとえばこれを導入するとこんな感じになります。

普通の下線に比べると目につきやすく、ある程度細かく設定することが出来るので、これをうまく設定すれば、ブログの個性にも繋がるでしょう。

ただの下線じゃつまらないと思っている方はぜひ蛍光ペン風の文字装飾を使ってみましょう。
コピペで簡単にできるのでお気軽にお試しください！

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

• 国内シェアNo.1の高速サーバーなのでストレスフリー！
• 自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！ またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！ またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

完成イメージ

この記事で紹介するコードを導入するとこんな感じになります。

それではコードをコピペしていきましょう。

子テーマを使いましょう

style.cssのファイルを編集するカスタマイズになるので、子テーマを使いましょう。

子テーマってなに？という場合は、これらの記事をご参照ください。

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし！

WordPressの機能の一つとして、「子テーマ」というものがあります。ブログを書き始めた方の場合や、WordPressを使い始めた方の場合は、「子テーマ？なんだそれ」とか「親テーマにそのままコードを書けばいいじゃん」と思うかもしれません。...

plu-plu.net

2018.08.02

【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする！

前回こちらの記事で、子テーマの重要性について説明しました。今回はその子テーマの導入方法と、使い方についてご説明します。子テーマを導入する！子テーマを導入する方法は2通りあります。１つは親テーマと一緒にダウンロードする！もう１つは自分で子テー...

plu-plu.net

2018.12.11

コード公開

コチラのコードをstyle.cssにコピペしてください。

/*--蛍光ペン風装飾--*/
.marker-g{/*-緑色-*/
	font-weight:bold;
	background: linear-gradient(transparent 70%, #49EF8C 45%);
}
.marker-o{/*-オレンジ-*/
	font-weight:bold;
	background: linear-gradient(transparent 70%, #F3A572 45%);
}
.marker-b{/*-青色-*/
	font-weight:bold;
	background: linear-gradient(transparent 70%, #41AAF0 45%);
}
.marker-r{/*-赤色-*/
	font-weight:bold;
	background: linear-gradient(transparent 70%, #F27B87 45%);
}
.marker-y{/*-黄色-*/
	font-weight:bold;
	background: linear-gradient(transparent 70%, #F0DE41 45%);
}
/*--ここまで--*/

ちなみに「#～」の部分が色のコードなので、好きな色に設定したい場合は、こちらを変更してください。
また「～％」の数値を変えると、線の厚さが変わるのですが、結構言葉で説明するのが大変です。
そのため、数値を変えてみて色々と試してみて下さい（笑）

実際に使ってみる

それでは実際に使ってみましょう。
先程のコードを実際に使用するためには、テキストエディタで【<span class=”クラス名”></span>】このように文字を囲う必要があります。

尚先程のCSSコードに対するクラス名は以下のようになっています。

方法としては
①使用するたびに手動でコードを入力する
②プラグインを使ってタグを登録しておく

この２つがあります。
実際に使っていくには①の「使用するたびに手動でコードを入力する」方法は面倒であり、効率的ではないため、せっかく設定したにもかかわらず、使わなくなってしまう可能性があります。
一方で②の「プラグインを使ってタグを登録しておく」方法であれば、すぐ簡単に使うことができるので、一度設定しておけば非常に便利です。

ちなみにタグはこちらのものです。

このボタン一つで簡単に使えるようになるので、②の方法がおすすめです。

ということで、この②のやり方について次でご紹介します。

AddQuicktagというプラグインを使う

タグを追加するためにはプラグインを使います。
極力プラグインを使いたくないという方は、記事を書く時だけ有効化するなどすればいいと思います。
なお当記事では簡単に使い方を説明しております。

AddQuicktagの詳しい使い方は以下の記事をご覧ください

【簡単クイックタグ作成】AddQuicktagが便利なので使い方をご紹介！

ブログを書く上で非常に便利なプラグインがあります。それは「AddQuicktag」です！名称のとおり、クイックタグを追加するというもので、毎回入力するようなコードをワンクリックで済ませることができるプラグインです。そんなAddQuickta...

plu-plu.net

2018.08.29

インストールする

普通のプラグインと同様にAddQuicktagをインストールします。

設定をする！

インストールが終わったら設定していきます。
AddQuicktagの設定画面はこんな感じです。

最低限設定すべき個所を赤く囲っています。
それぞれの項目について説明します。
・ボタン名→実際に使うときにクリックするタグの表示名になります。
・開始タグ→spanタグで文章を囲う際の、最初のコードについて入力します。つまり【<span class=”クラス名”>】の部分を入力します。
・終了タグ→spanタグの後ろのコード、つまり【/span】の部分を入力します。

これで使えるようになります。

するとこんな感じにタグが表示されます。

まとめ

どうでしょうか？
簡単に導入することが出来たと思います。

今回の蛍光ペン風の文字装飾は細かい所ですが、こういう細かい所にこだわっていき、どんどん個性的なブログを創っていきましょう～

コピペも良いですが・・・

コピペでも問題なくカスタマイズはできますが、自分が思った通りにカスタマイズするにはやはり一定の知識が必要です。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！

私が使用したおすすめの本はこちらです。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

posted with カエレバ

エビスコム ソシム 2014-10-28

Amazon

楽天市場

HTML&CSSとWebデザインが 1冊できちんと身につく本

posted with ヨメレバ

服部 雄樹 技術評論社 2017-07-21

Amazon

Kindle

楽天ブックス

楽天kobo