MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

マーカー線(蛍光ペン)をおしゃれにするCSSとHTML解説|7色3種のサンプル付き

当ページのリンクには広告が含まれています。
蛍光ペン風マーカー線のCSS解説

運営中のサブブログも良かったら覗いてみてください。

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

当記事ではブログで使用する蛍光ペン風マーカー線について

  • マーカー線のHTMLとCSS
  • border下線との違い
  • おしゃれにみせるコツ
  • コピペで使える7色3種類のサンプルコード

を解説しました。

ちなみに当サイトで使用中テーマでは、コードを書かずとも4色4種のマーカー線が最初から用意されています。

SWELLマーカー線サンプル

①細いマーカー
②太いマーカー
③細いストライプマーカー
④太いストライプマーカー

投稿画面から選択するだけなので、マウス操作のみで直感的に使用できます。
※.色も自由に指定可能

目次

マーカー線で使用する4つのHTMLとCSS解説

基本的にspanタグを使用する

例えば、このマーカー線をHTMLで書くと以下になります。

<p>例えば、<span class="marker">このマーカー線をHTMLで書くと以下になります。</span></p>

プロパティの説明は割愛しますが、spanタグは改行されない性質を持ちます。
そのため、文章の間に入ってもブラウザ上のテキストが崩れることはありません
※.pdivタグだと改行されてしまう。

.marker {
 background: linear-gradient(transparent 0%, #c1e0ff 0%);
 font-weight: bold; 
}

サンプルのCSSは上記のように指定しています。
background:〇〇で、マーカー線の”“と”太さ“を指定。
※.線の太さ指定については後ほど解説
font-weight: bold;は、テキストを太字にする指定です。

.marker-blue {
 background: linear-gradient(transparent 0%, #c1e0ff 0%);
 font-weight: bold;  
}
.marker-yellow {
  background: linear-gradient(transparent 75%, #fff799 75%);
font-weight: bold; 
}
.marker-green {
  background: linear-gradient(transparent 75%, #bfff7f 75%);
font-weight: bold; 
}

カラーを増やす場合は、class名にmarker〇〇のように色の指定をしておくと、あとで見たときにわかりやすいです。

bタグをマーカー線に装飾する

bタグとはフォントを太字にするためだけのタグです。

<p>bタグとはフォントを<b>太字にするためだけ</b>のタグです。</p>
b {
  background: linear-gradient(transparent 65%, #c1e0ff 65%);
}

上記のように指定すると、こんな風に見えます。

bタグに指定できるのは1色だけです。
マーカーを複数色使いたい方は、最初のspanタグと併用する必要があります。

strongタグをマーカー線に見せる

strongタグとは、重要を意味するタグです。
bタグとの違いは、検索エンジンにもその文言が重量であると伝えられることです。

またショートカットキーが用意されているため、キーボード操作から呼び出しやすいのも特徴です。

strongタグのショートカットキー

  • Mac:Command+B
  • Windows:Ctrl+B

テーマによると思いますが、デフォルトのstrongタグは、このように太字になるだけです
※.下の点線は当サイトテーマの設定。

strong {
  background: linear-gradient(transparent 65%, #c1e0ff 65%);
}

上記のように指定すると、こんな風に見えます。

strongタグに指定できるのも1色です。
マーカーを複数色使いたい方は、最初のspanタグまたはbタグと併用する必要があります。

markタグについて

HTML5からmarkタグが追加されました。
例えば、このように<mark>ここに文章</mark>囲むことで、マーカー線を引けるものです。

テーマ側で色の指定がなければ、デフォルトは黄色い線になります。

こちらもCSSで指定することができます。

mark {
  background: linear-gradient(transparent 65%, #c1e0ff 65%);
}

上記の指定をすると、こんなふうに見えます。

マーカー線とborder下線の違い

マーカー線のサンプル

border下線のサンプル

マーカー線はテキストに被せて指定できるのに対し、border下線はテキストの下に引かれます
border線の詳細については下記で解説しました。

マーカー線(蛍光ペン)をおしゃれにするCSSのコツ

太さは0%もしくは60〜70%くらいがおすすめ

マーカー線は、線の太さを自由に設定できます。

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

上記の0%部分を両方変更することで、太さが決まります。
基本的に左右が同じ値になるようにしましょう。
以下に0〜95%まで20段階のサンプルがありますので、参考にしてください。

マーカー線の高さサンプル
0%のマーカー線5%のマーカー線
10%のマーカー線 15%のマーカー線
20%のマーカー線 25%のマーカー線
30%のマーカー線 35%のマーカー線
40%のマーカー線 45%のマーカー線
50%のマーカー線 55%のマーカー線
60%のマーカー線 65%のマーカー線
70%のマーカー線 75%のマーカー線
80%のマーカー線 85%のマーカー線
90%のマーカー線 95%のマーカー線

テキストと高さを合わせるなら0%
マーカーとして使うなら60〜70%
あたりがおすすめです。
75%を超えてくるとあえてマーカー線にする必要はなく、border下線でも良い気がします。

クドい装飾を避ける

背景色×太字×テキストカラー×マーカー4つの組み合わせ

効果がよくわからない美容系やサプリメントの広告などで見かけますね。
装飾渋滞になりますので、特別な理由がなければ、太字+マーカーくらいにとどめておくと良いでしょう。

原色や濃い色を使わない

#ff0000=赤色#0000ff=青色#ffff00=黄色

原色や濃い色は目にも悪く、色によっては文字の下が隠れてしまうため、やめておきましょう。

角丸指定で柔らかい印象に

こちらは通常のマーカーです。

角を少し丸くしたマーカーです。

<p><span class="markermaru">角を少し丸くしたマーカーです。</span></p>
.markermaru{
  background: linear-gradient(transparent 0%, #fcf69f 0%);
  border-radius:6px;
}

border-radius角の丸みを指定できます。
パソコンからだと目を凝らさないとわかりませんが、スマホからだとよくわかります
スマホ集客がメインかつ優しい雰囲気のサイトだと相性が良いかもしれません。

太字指定でより強調できる

こちらは細字の文章です。

こちらは太字の文章です。

<p><span class="markerbold">こちらは太字の文章です。</span></p>
.markerbold{
  background: linear-gradient(transparent 65%, #fcf69f 65%);
  font-weight: bold;
}

font-weight: bold;太字の指定ができます。
通常のマーカーとして使うなら太字にしたほうが、バランスが良いでしょう。
テキストの高さに合わせるなら細字のままでも十分目立ちます

ストライプ柄のマーカー線を引く方法

<p><span class="marker-stripe">マーカー線をストライプ柄にしました。</span></p>
.marker-stripe {
  background: repeating-linear-gradient(-90deg, 
  #c1e0ff 0, #c1e0ff 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 40%;
  background-repeat: no-repeat;
}
  1. -90deg:ストライプの角度(90度)の指定
    45度に指定すれば斜めの線になります。
  2. #〇〇:色の指定(両方同じカラーに揃える)
    0〜2pxの範囲をこの色にしています。
  3. transparent:透明にする指定
    2px〜4px以降を透明にしています。
  4. background-position:線を引き始める場所の指定
    サンプルでは、左下にしています。
  5. background-size:線の横幅・線の縦幅の指定
    40%の値を変更することで、線の太さを変更できます。
  6. background-repeat:画像の繰り返しを防ぐ指定
    ないとストライプ柄のデザインが崩れます。

調整する場合は、色のついた部分のみ変更してください。
②と③の値を調整することで、ストライプの間隔を変更できます。

グラデーションマーカー線を引く方法

<p><span class="marker-gradation">グラデーションマーカー線を引いてみました。</span></p>
.marker-gradation {
  background: linear-gradient(120deg, #89f7fe 20%, #66a6ff 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
}

グラデーションのカラー選定は、ジェネレーターを活用すると良いでしょう。
カラーコードの%設定は、右側は基本100%で固定、左側の色をを何%伸ばすか?で調整します。
background-size30%の値で線の太さを調整できます。

スクロールに合わせてマーカー線を引く方法

当サイトではうまく実装できませんでしたが、こちらのサイトがわかりやすかったので紹介しておきます。
興味のある方は試してみてください。

マーカー線(蛍光ペン)のコピペサンプル7色3種類

各カラーごとに

  • 一色マーカー線
  • ストライプマーカー線
  • グラデーションマーカー線

の3パターンを作成しました。
どれもコピペで使えます。

HTMLはすべて<span>タグを使用し、テキストは太字に指定しました。

レッド系

一色マーカー線

カラー:#ffa8a8|太さ:65%

コードを表示する
<p><span class="marker-red"></span></p>
.marker-red {
  background: linear-gradient(transparent 65%, #ffa8a8 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー:#ff7f7f|太さ:35%|角度90度

コードを表示する
<p><span class="marker-stripe-red"></span></p>
.marker-stripe-red {
  background: repeating-linear-gradient(-90deg, 
  #ff7f7f 0, #ff7f7f 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー:#FEB692×#EA5455|太さ:30%

コードを表示する
<p><span class="marker-gradation-red"></span></p>
.marker-gradation-red {
  background: linear-gradient( 120deg, #FEB692 30%, #EA5455 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

ブルー系

一色マーカー線

カラー:#a8d4ff|太さ:65%

コードを表示する
<p><span class="marker-blue></span></p>
.marker-blue {
  background: linear-gradient(transparent 65%, #a8d4ff 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー:#80bfff|太さ:35%|角度90度

コードを表示する
<p><span class="marker-stripe-blue></span></p>
.marker-stripe-blue {
  background: repeating-linear-gradient(-90deg, 
  #80bfff 0, #80bfff 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー:#89f7fe×#66a6ff|太さ:30%

コードを表示する
<p><span class="marker-gradation-blue"></span></p>
.marker-gradation-blue {
  background: linear-gradient(120deg, #89f7fe 30%, #66a6ff 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

イエロー系

一色マーカー線

カラー:#fff799|太さ:65%

コードを表示する
<p><span class="marker-yellow"></span></p>
.marker-yellow {
  background: linear-gradient(transparent 65%, #fff799 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー:#ffec47|太さ:35%|角度90度

コードを表示する
<p><span class="marker-stripe-yellow></span></p>
.marker-stripe-yellow {
  background: repeating-linear-gradient(-90deg, 
  #ffec47 0, #ffec47 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー:#fcef97×fce232|太さ:30%

コードを表示する
<p><span class="marker-gradation-yellow"></span></p>
.marker-gradation-yellow {
  background: linear-gradient( 135deg, #fcef97 30%, #fce232 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

グリーン系

一色マーカー線

カラー:#bfff7f|太さ:65%

コードを表示する
<p><span class="marker-green"></span></p>
.marker-green {
  background: linear-gradient(transparent 65%, #bfff7f 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー:#7fff7f|太さ:35%|角度90度

コードを表示する
<p><span class="marker-stripe-green"></span></p>
.marker-stripe-green {
  background: repeating-linear-gradient(-90deg, 
  #7fff7f 0, #7fff7f 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー:#d4fc79×#96e6a1|太さ:30%

コードを表示する
<p><span class="marker-gradation-green"></span>[</p>
.marker-gradation-green {
  background: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

ピンク系

一色マーカー線

カラー:#ffadd6|太さ:65%

コードを表示する
<p><span class="marker-pink"></span></p>
.marker-pink {
  background: linear-gradient(transparent 65%, #ffadd6 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー:#ff7fbf|太さ:35%|角度90度

コードを表示する
<p><span class="marker-stripepink-"></span></p>
.marker-stripe-pink {
  background: repeating-linear-gradient(-90deg, 
  #ff7fbf 0, #ff7fbf 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー#ffc1e0:×#ff75ba|太さ:30%

コードを表示する
<p><span class="marker-gradation-pink"></span></p>
.marker-gradation-pink {
  background: linear-gradient( 120deg, #ffc1e0 20%, #ff75ba 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

オレンジ系

一色マーカー線

カラー:#ffd1a3|太さ:65%

コードを表示する
<p><span class="marker-orange"></span></p>
.marker-orange {
  background: linear-gradient(transparent 65%, #ffd1a3 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー:#ffb56b|太さ:35%|角度90度

コードを表示する
<p><span class="marker-stripe-orange"></span></p>
.marker-stripe-orange {
  background: repeating-linear-gradient(-90deg, 
  #ffb56b 0, #ffb56b 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー:#ffe985×#fa742b|太さ:30%

コードを表示する
<p><span class="marker-gradation-orange"></span></p>
.marker-gradation-orange {
  background: linear-gradient( 135deg, #FFE985 10%, #FA742B 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

パープル系

一色マーカー線

カラー:#dbb7ff|太さ:65%

コードを表示する
<p><span class="marker-purple"></span></p>
.marker-purple{
  background: linear-gradient(transparent 65%, #dbb7ff 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー:#b770ff|太さ:35%|角度90度

コードを表示する
<p><span class="marker-stripe-purple"></span></p>
.marker-stripe-purple {
  background: repeating-linear-gradient(-90deg, 
  #b770ff 0, #b770ff 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー:#ewb0ff×#9f44d3|太さ:30%

コードを表示する
<p></p><span class="marker-gradation-purple"></span>
.marker-gradation-purple{
  background: linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

複数色マーカー線の管理方法

ブロックエディタには、同期パターンという機能があります。
これはあらかじめ任意コンテンツを登録しておけるものです。

ここでは当サイトの活用方法を解説します。
※.テーマにより管理画面サイドバー名称が異なったり、使い方に若干の違いはあります。

すでにを使用中の方は、4色のマーカー線を投稿画面から選択できるため、基本は不要です。
グラデーションマーカーなど、テーマ側の設定にない装飾を使いたい方は参考にしてください。

WordPress同期パターン

①サイドバーの「パターン」をクリック
②「新規パターンを追加」をクリック

WordPress同期パターンステータス設定

③同期を「OFF」にする
④「生成」をクリック

同期はあとから変更できないため、必ずOFFにしてください。

WordPress同期パターン作成

タイトルはショートコードで呼び出す際の名称です。
本文に「/カスタム」と入力して”カスタムHTML“というブロックを選択してください。
その中にマーカー用のHTMLを貼り付けます。
公開をクリックして呼び出し用ブロックの完成です。

WordPress同期パターンショートカット呼び出し

投稿画面で「/マーカー赤」と入力すると、作成したマーカーブロックを選択できます。
複数色使いたい方は、マーカー青マーカー緑など色を判別できるタイトルを付け、同じ要領で登録しておきましょう。

<p>通常のテキストはここに書いて、<span class="marker-red">マーカーを引きたいところをこの中に書きます。</span></p>

このように書くことで、ブラウザでは以下のように表示されます。

通常のテキストはここに書いて、マーカーを引きたいところをこの中に書きます。

当サイトテーマでは、より直感的にマーカー線を引ける仕様になっています。
このほかにも大抵のカスタマイズは、マウス操作のみで完結するため、特に初心者の方には非常におすすめです。

結論:マーカー線は過度な装飾を避けテキストとのバランスを取ろう

以上、マーカー線のHTMLとCSSについて解説しました。
サイトの雰囲気と合うカラーを選択して、読んで欲しいところを強調してみましょう。

border下線も同じく、テキストにラインを引けますので、お好きな方を試してみてください。

蛍光ペン風マーカー線のCSS解説

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

コメント一覧 (1件)

  • はじめまして。
    パトモスといいます。
    数日前に「カゲサイ」ブログに出会いました。
    昔、多少 HTML・CSS をかじっていたのですが、復習を兼ねて「カゲサイ」をテキストとして、キャプチャしながら勉強のやり直しをしています。
    星の数ほどあるブログの中でも、わかりやすさ、ていねいさ、内容の広さ・深さなど群を抜いていると思います。
    コードなどは「VSCode」で実際に手打ちして、ブラウザで確認しながら作業を進めています。
    拙いながらも WordPress (テンプレートは賢威8.0)でブログを公開していますので、HTML・CSSの学習が済んだら、WordPress「STEP1」~「STEP10」にとりかかる予定です。

    優れたブログ、ありがとうございました。

コメントする

※日本語が含まれていないコメントは投稿できません。(スパム対策)

目次