CSSをいじっていく

WordPressでマーカーを引く

投稿日:2018年6月6日 更新日:

こんにちは、ぐだおです。

WordPressで作られたホームページを見ていると、強調するために太字にしたりさらにフォントの色を変えたりするだけではなく、マーカーを引いているページが多いことに気づました。そして思ったんですよね、マーカーの方がお洒落な上に見やすくないかと、私もやりたいなと。というわけで、今回はマーカーを引く方法について書いていきます。

WordPressで(蛍光)マーカーを引く

ちなみに、マーカーとは既に使っちゃっていますがこういうのやこういうのを意図して言っています。この記事の執筆時点で私はSTINGER8というテーマを使っているのですが、実はこのテーマを使うとデフォルトで「黄マーカー」と「赤マーカー」というのがQuicktagに用意されています。これをそのまま使うってことで満足できるのならSTINGER8にテーマを変えるだけでOKです。STINGER8へのテーマの変更の仕方についてはこちら。だけど、最初はこのデフォルトので満足してたとしても、やっぱりページ全体のデザインとかを考えた時に色とかマーカーの幅とかを自分好みに変えたいですよね。実はこれそんなに難しくありません。

スタイルシートにマーカーを引くためのタグを追加する

まず、WordPressの管理画面で左のサイドバーの外観–>テーマの編集を選びます。

そうすると現在使用中のテーマのスタイルシートであるstyle.cssというファイルが選択・表示されていると思います。もし、表示されていないようでしたら、右サイドのテーマファイルのところから一番上のスタイルシートを選んでください。

ここにマーカー用のtagを仕込んでいきます。場所はどこでも良いですが、途中に書き込んでしまうとまずいので、とりあえず一番下あたりに書いていきましょう。

マーカー線を引くときは「linear-gradient」を使います。
例えば青いマーカーを引きたいのなら、
.blue_line{background:linear-gradient(transparent 0%, #3333FF 0%);}
のように書きます。このタグで引いた青マーカーが上記になります。そして、この青マーカーの部分が実際に自分の希望にあわせて変えていく必要のある部分です。この文をスタイルシートに追加すればもう終わりです。

linear-gradientを使ってマーカーを引く

ここから簡単に「linear-gradient」について説明していきます。

.blue_line{background:linear-gradient(transparent 0%, #3333FF 0%);}

まず、.の後のblue_lineがそのタグの名称です。自分が分かりやすければどんな名前でもOKです。
transparentの後ろの%は線の太さです。0%が一番太く、80-90%とかにすると細い線になります。
ここでは水色のカラーコード#3333FFを指定しますが、カンマの後の#3333FFを自分の引きたいマーカーの色に変更しましょう。カラーコードじゃなくてred等のカラー名でも大丈夫です。
カラーコードの後ろの%指定はマーカーを引きたい場合には、0%、もしくは線の太さと同じ%にします。とりあえずここでは0%にしておきましょう。詳細は省きますが、linear-gradientは元々はグラーデーションのある背景をいれたりするためのものですので、これは複数の色とその切り替わりポイントを細かく指定するためのものです。
background:は背景指定の省略化です。ここにbackground:rgba(0, 0, 0, 0)のようにして背景色を指定することも可能です。何も指定しなければtransparentつまり透明になります。

他にもlinear-gradientは背景画像の設定のためのものですから、スクロール時の挙動や、ポジション調整、グラーデーションの方向の指定等が可能ですが、今回は覚える必要はありません。頭の片隅にでも残しといてください。

とりあえず上記のblue_lineをstyle.cssに追加したら忘れずに下の「ファイルを更新」ボタンを押しましょう。
その上で投稿画面のマーカーを引きたい文字を選んで、<span class=”blue_line”>青マーカーを引く</span>と打てばOKです。実際にプレビュー画像を見ていただくと分かると思いますが、青マーカーが引けていますね。
ちなみに、spanの代わりにstrongを打つとその部分が太字になります。<strong class=”blue_line”>青マーカーを引く</strongn>

色んなタイプのマーカーを作ろう

それでは実際にマーカーの太さと色を変えていきましょう。

.green_bold_line{background:linear-gradient(transparent 40%, #CCFF99 0%);}
緑の太い線が描けます。

.pink_thin_line{background:linear-gradient(transparent 90%, #FFCCCC 0%);}
ピンクの細い線が引けます。

ざっとこんな感じです。簡単ですね。色と太さを微調整しながら自分好みのマーカーを探していきましょう。

というわけでマーカーの引き方でした。では。。。

-CSSをいじっていく

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

WordPressで見出しをオシャレにする

こんにちは、ぐだおです。 今日は、投稿記事中の見出しをオシャレにする(オシャレな見出しをつけるわけではなくて、見た目をオシャレにする)方法について書いていきます。 小見出しの基本について 記事を読みや …