コピペで簡単！ブログ文字を蛍光ペン風マーカーで目立たせる方法

こんにちは。岐阜の拠点から、今日もWeb制作とブログ運営のリアルな情報をお届けする当ブログです。

前回の「検証ツール」の解説で、安全にCSSをテストし反映する準備が整いました。いよいよ今回から、具体的なデザインのカスタマイズに入っていきます。

初心者ブロガーが最初にやりたくなる装飾の筆頭が「文字への蛍光ペン（マーカー）風ライン」です。テーマの標準機能にも備わっていることが多いですが、独自の太さや色に変更したい場合はCSSでの実装が必要になります。

今回は、プラグインに頼らず、コピペだけで実装できるシンプルで管理しやすいマーカーCSSと、SEOを意識した正しいHTMLタグの使い分けをプロ目線で解説します。

【コピペでOK】CSSで蛍光ペン風マーカーを作る基本コード

蛍光ペン風の装飾は、CSSの背景をグラデーションにする linear-gradient というプロパティを使って実装します。以下のコードを前回の記事で紹介した「追加CSS」に貼り付けるだけで準備完了です。

1. 追加CSSに貼り付けるコード

/* 黄色のマーカー（太さ60%） */
.marker-yellow {
    background: linear-gradient(transparent 40%, #ffff66 40%);
}

/* 水色のマーカー（太さ60%） */
.marker-blue {
    background: linear-gradient(transparent 40%, #66ccff 40%);
}

※クラス名は、長期的なメンテナンスを考慮し、誰が見ても分かりやすい marker-yellow といったシンプルな命名にしています。

2. 記事の作成画面（HTML）での使い方

記事を書く際、カスタムHTMLブロック等を使用して、マーカーを引きたい文字を <span> タグで囲み、先ほどのクラス名を指定します。

<p>ここは普通のテキストですが、<span class="marker-yellow">ここからマーカーが引かれます</span>。</p>

See the Pen コピペで簡単！ブログ文字を蛍光ペン風マーカーで目立たせる方法 by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

マーカーの「太さ」と「色」をカスタマイズする仕組み

現場のWebデザインでは、ブログの雰囲気やブランドカラーに合わせて線の太さや色を微調整します。linear-gradient の仕組みを理解すれば、あなただけのオリジナルマーカーが簡単に作れます。

SEO評価を落とさない！strongタグとspanタグの使い分け

Web制作者として必ずお伝えしたいのが、装飾目的で安易に <strong> タグ（太字タグ）に直接CSSを当てないということです。

Googleの検索エンジン（ロボット）にとって、<strong> は「この記事の中で特に重要なキーワード」を意味する構造的なタグです。単に「見た目を目立たせたい」という理由で、長い文章や無関係な単語に何度も使うと、スパム判定を受けて検索順位が下がるリスクがあります。

純粋に「見た目だけを装飾したい」場合は、今回紹介したように意味を持たない <span> タグに対してCSSクラスを当てるのが、SEOにおいて最も安全で論理的なルールです。

ブログのアクセントになる蛍光ペン風マーカー。自分でCSSの数値をいじって色や太さが変わる瞬間は、Web制作の楽しさを実感できる第一歩です。

次回は、ブログの「箇条書き（リスト）」をCSSでさらにおしゃれなデザインにカスタマイズする方法を解説します。