スワローで蛍光ペン風（ラインマーカー）をCSSとHTMLで設定する方法

こんにちは、ケイです。

ブログを読んでいるとよく見かけますよね。

蛍光ペン風

そう、これです！これがやりたかった（笑）

今回は、WordPressのテーマ スワローで蛍光ペン風の表示をする方法を書いていきますね。どうしても、蛍光ペン風にしたくていろいろと調べました。 結構、苦戦してしまったので、もしかして、同じ経験をされている方がいるかもしれないとなぁと思って、私がうまく設定できた方法を書いておきます。

お急ぎの方は、具体的な設定方法からご覧ください。

お時間ある方はお付き合い頂けると嬉しいです。

スワローで蛍光ペン風（ラインマーカー）表示方法に苦戦

まずはネットで検索ですね。。

検索キーワードは、
ワードプレス　スワロー　蛍光ペン　ラインマーカー
この組み合わせです。

そうすると、蛍光ペン風に表示する方法を紹介されているサイトを結構、見つけました。説明通りに試してましたがうまくいきません。うーん、同じようにやってるつもりだけど、たぶん私のやり方がだめなんだろうなぁと思ってました。

最初に設定したのは、「AddQuicktag」というプラグインを設定する方法でした。うまくいけば、この方法が簡単みたい。うまく設定できる方はこちらの方法が使いやすいようですよ。

結局1、2時間は格闘していたかもしれませんがうまくいかず、、、
結構あきらめが悪いです（笑）

ただ、調べていたのが平日の夜だったので、さすがに次の日仕事だし、、、あきらめました。

次の日の仕事帰り（通勤時間もスマホで調べてました）もネット検索して設定しましたが、やはりうまくいきません。。ただ、いろいろと調べていくうちに、CSSとHTMLというなぞの言葉（ブログはじめたばかりなので、CSSとHTML知らないけど許してください）が何度もでてきました。

うーん、この言葉 、イミガワカラン、ごめん、寝る～って感じで寝ました。

3日目に突入しました。CSSとHTMLもだんだんと見慣れてきて、ほんのちょっとだけですが、何とな～く、やってることがわかったような感じです、、、いやまだかな。。　多分だけど、”CSSで設定しておいて、実際に記事を書くときにHTMLで使っていく”みたいな感じかなぁと思います。
違ってたらごめんなさい、これからCSSとHTMLも勉強します。

っで、CSSに呪文を追加して、HTMLにも呪文を記述してみたら、、、

やったーやりました！

蛍光ペン風にできた～！

ちっちゃなことですが、自分では結構、感動しました。
こんなことで喜びます（笑）

CSSとHTML

CSSとHTMLを一応調べましたので、書いておきます。

・CSSとは

Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート、日: 段階スタイルシート^[1]）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

うーん、なかなか一度では理解できないですねー

・HTMLとは

HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ、HTML（エイチティーエムエル））は、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web (WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

そういえば、こちらは、聞いたことありました。ただ、縁がなくてわかってなかったです。。Webページはよく見ますけど、中身の記述についてはほとんど見たことなかったんで。。

具体的な設定方法

それでは、具体的な設定方法を見ていきましょう。

まず、CSSに記述を追加しました。

CSS記述

私のWordPress管理画面を使って説明していきます。
まず、WordPressの管理画面の外観部分にマウスの矢印をもっていきます。

次にカスタマイズをクリックします。

そして追加CSSをクリックします。

CSSに蛍光ペン風の記述を追加します。
今回、
ピンク
オレンジ
ブルー
グリーン
イエロー
を追記しました。

追記した記述を色事にわけてみました。

ピンク

.marker-pink {
background: linear-gradient(transparent 60%, #ff99cc 0%);
}

オレンジ

.marker-orange {
background: linear-gradient(transparent 60%, #ffa500 0%);
}

ブルー

.marker-blue {
background: linear-gradient(transparent 60%, #99ccff 0%);
}

グリーン

.marker-green {
background: linear-gradient(transparent 60%, #5bed3b 0%);
}

イエロー

.marker-yellow {
background: linear-gradient(transparent 60%, #ffff00 0%);
}

HTML記述

次はHTML記述になります。ここで、HTML記述をそのままブログに表示することができないことに気が付きました。😨
HTML記述をそのまま表示する方法は次回の課題として、今回は画像を貼り付けますね。

ピンク

ピンク

ピンク

オレンジ

オレンジ

オレンジ

ブルー

ブルー

ブルー

グリーン

グリーン

グリーン

イエロー

イエロー

イエロー

まとめ

今回、WordPressのテーマ　スワローで蛍光ペン風（ラインマーカー）をCSSとHTMLで記述する方法をみてきました。設定方法わかりましたでしょうか？できてしまえば、簡単なんですけど、そこにたどり着くのにちょっと苦労しました。

苦労したからこそですが、CSSとHTMLも少しずつ見慣れてきましたし、なにより知らないことを知ることができたってことが嬉しいし楽しいですね。昨日の自分より一歩成長した気がします。自己満足です、すみません（笑）　せっかくブログを立ち上げたので、私が得た知識は貯めこまずにどんどんアウトプットしていきたいと思います。

これからもよろしくお願いします。

この記事をここまで読んでくださったということは、CSSやHTMLに詳しくはない方ではないかなと思います。（間違っていたらごめんなさい）ここまで一緒に見てきて、なんとなくこんな感じかぁって思われたんじゃないかなと思います。知らない事を知ることができたので、一歩成長だと思います！一緒に見ていただきありがとうございます。

ここまで、読んで頂き、ありがとうございます。