WordPress
その他
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
当記事ではブログで使用する蛍光ペン風マーカー線について
を解説しました。
ちなみに当サイトで使用中テーマSWELLでは、コードを書かずとも4色4種のマーカー線が最初から用意されています。
①細いマーカー
②太いマーカー
③細いストライプマーカー
④太いストライプマーカー
投稿画面から選択するだけなので、マウス操作のみで直感的に使用できます。
※.色も自由に指定可能
例えば、このマーカー線をHTMLで書くと以下になります。
<p>例えば、<span class="marker">このマーカー線をHTMLで書くと以下になります。</span></p>
プロパティの説明は割愛しますが、span
タグは改行されない性質を持ちます。
そのため、文章の間に入ってもブラウザ上のテキストが崩れることはありません。
※.p
やdiv
タグだと改行されてしまう。
.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
タグとはフォントを太字にするためだけのタグです。
<p>bタグとはフォントを<b>太字にするためだけ</b>のタグです。</p>
b {
background: linear-gradient(transparent 65%, #c1e0ff 65%);
}
上記のように指定すると、こんな風に見えます。
b
タグに指定できるのは1色だけです。
マーカーを複数色使いたい方は、最初のspan
タグと併用する必要があります。
strong
タグとは、重要を意味するタグです。b
タグとの違いは、検索エンジンにもその文言が重量であると伝えられることです。
またショートカットキーが用意されているため、キーボード操作から呼び出しやすいのも特徴です。
strong
タグのショートカットキー
テーマによると思いますが、デフォルトのstrong
タグは、このように太字になるだけです。
※.下の点線は当サイトテーマSWELLの設定。
strong {
background: linear-gradient(transparent 65%, #c1e0ff 65%);
}
上記のように指定すると、こんな風に見えます。
strong
タグに指定できるのも1色です。
マーカーを複数色使いたい方は、最初のspan
タグまたはb
タグと併用する必要があります。
HTML5からmark
タグが追加されました。
例えば、このように<mark>ここに文章</mark>囲むことで、マーカー線を引けるものです。
テーマ側で色の指定がなければ、デフォルトは黄色い線になります。
こちらもCSSで指定することができます。
mark {
background: linear-gradient(transparent 65%, #c1e0ff 65%);
}
上記の指定をすると、こんなふうに見えます。
マーカー線のサンプル
border下線のサンプル
マーカー線はテキストに被せて指定できるのに対し、border下線はテキストの下に引かれます。
border線の詳細については下記で解説しました。
マーカー線は、線の太さを自由に設定できます。
.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;
}
調整する場合は、色のついた部分のみ変更してください。
②と③の値を調整することで、ストライプの間隔を変更できます。
<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-size
30%の値で線の太さを調整できます。
当サイトではうまく実装できませんでしたが、こちらのサイトがわかりやすかったので紹介しておきます。
興味のある方は試してみてください。
各カラーごとに
の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;
}
ブロックエディタには、同期パターンという機能があります。
これはあらかじめ任意コンテンツを登録しておけるものです。
ここでは当サイトSWELLの活用方法を解説します。
※.テーマにより管理画面サイドバー名称が異なったり、使い方に若干の違いはあります。
すでにSWELLを使用中の方は、4色のマーカー線を投稿画面から選択できるため、基本は不要です。
グラデーションマーカーなど、テーマ側の設定にない装飾を使いたい方は参考にしてください。
①サイドバーの「パターン」をクリック
②「新規パターンを追加」をクリック
③同期を「OFF」にする
④「生成」をクリック
同期はあとから変更できないため、必ずOFFにしてください。
タイトルはショートコードで呼び出す際の名称です。
本文に「/カスタム」と入力して”カスタムHTML“というブロックを選択してください。
その中にマーカー用のHTMLを貼り付けます。
公開をクリックして呼び出し用ブロックの完成です。
投稿画面で「/マーカー赤」と入力すると、作成したマーカーブロックを選択できます。
複数色使いたい方は、マーカー青、マーカー緑など色を判別できるタイトルを付け、同じ要領で登録しておきましょう。
<p>通常のテキストはここに書いて、<span class="marker-red">マーカーを引きたいところをこの中に書きます。</span></p>
このように書くことで、ブラウザでは以下のように表示されます。
通常のテキストはここに書いて、マーカーを引きたいところをこの中に書きます。
当サイトテーマSWELLでは、より直感的にマーカー線を引ける仕様になっています。
このほかにも大抵のカスタマイズは、マウス操作のみで完結するため、特に初心者の方には非常におすすめです。
以上、マーカー線のHTMLとCSSについて解説しました。
サイトの雰囲気と合うカラーを選択して、読んで欲しいところを強調してみましょう。
border下線も同じく、テキストにラインを引けますので、お好きな方を試してみてください。
この記事が気に入ったら
フォローしてね!
記事への質問等はこちらからどうぞ
この記事へのコメント数 (1件)
はじめまして。
パトモスといいます。
数日前に「カゲサイ」ブログに出会いました。
昔、多少 HTML・CSS をかじっていたのですが、復習を兼ねて「カゲサイ」をテキストとして、キャプチャしながら勉強のやり直しをしています。
星の数ほどあるブログの中でも、わかりやすさ、ていねいさ、内容の広さ・深さなど群を抜いていると思います。
コードなどは「VSCode」で実際に手打ちして、ブラウザで確認しながら作業を進めています。
拙いながらも WordPress (テンプレートは賢威8.0)でブログを公開していますので、HTML・CSSの学習が済んだら、WordPress「STEP1」~「STEP10」にとりかかる予定です。
優れたブログ、ありがとうございました。