この記事では、Web サイトで使えるおしゃれマーカー装飾 20個を紹介します。
すべてコピペで使えるので、WordPress初心者でも5秒で再現可能！
「シンプルなマーカー」から「個性的なデザイン」まで幅広く揃えていますので、ぜひ活用してみてください。
目次
オリジナルのマーカーを引く方法【プラグイン不要】
まずは、WordPressの記事内に5秒でマーカー装飾を適用する手順を紹介します。
- WordPressの投稿画面で「コードエディター」を開く
- 本記事のサンプルコードをコピペする
- 「ビジュアルエディター」に切り替える
- 好きな文言に編集する
画像ベースでもっと詳しく知りたい人は、以下のボタンをクリックして、内容を展開してください。
画像ベースで分かりやすい手順を見る
WordPress の投稿画面を開きます。
投稿画面の右上「︙（オプション）」をクリックして、「コードエディター」を選択します。
「ビジュアルエディター」 ⇒ 「コードエディター 」に切り替わることを確認してください。
以下のコードをコピーして、好きな場所に貼り付けてください。
⇒ 記事の後半で20個以上のサンプルコードを紹介しています。
再度「︙（オプション）」をクリックして「ビジュアルエディター」に戻すと、マーカー装飾が適用されます。
最後に文章を編集したら完成です！
※ 「クラシック」と表示される場合は、次の手順で「通常版のブロック」に変換しましょう。
マーカーの装飾手順は以上になります！
おしゃれなマーカーデザイン集【コピペOK】
ここからは、記事がおしゃれになるマーカーデザインを20個紹介します！
サンプルコードをコピペするだけで適用できるでぜひ使ってみてください！
シンプルなマーカー
１．黄色のマーカー
この文章の <span style="background: yellow; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
２．半透明の黄色マーカー
この文章の <span style="background: rgba(255, 255, 0, 0.5); padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
３．オレンジ色のマーカー
この文章の <span style="background: #ffcc00; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
４．ピンク色のマーカー
この文章の <span style="background: pink; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
５．水色のマーカー
この文章の <span style="background: lightblue; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
６．緑色のマーカー
この文章の <span style="background: lightgreen; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
７．紫色のマーカー
この文章の <span style="background: lavender; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
８．黒背景＆白文字のマーカー
この文章の <span style="background: black; color: white; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
９．グレーのマーカー
この文章の <span style="background: lightgray; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
オシャレなマーカー
１０．斜線の入ったオシャレのマーカー
この文章の <span style="background: repeating-linear-gradient(45deg, yellow, yellow 10px, transparent 10px, transparent 20px); padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
１１．枠付き付きのマーカー
この文章の <span style="background: yellow; border: 2px solid orange; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
１２．ふんわり影がついたマーカー
この文章の <span style="background: yellow; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
１３．色が変わるグラデーションマーカー
この文章の <span style="background: linear-gradient(to right, yellow, orange); padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
１４．アウトライン付きマーカー
この文章の <span style="background: yellow; outline: 3px solid red; padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
１５．立体感が出る影風マーカー
この文章の <span style="text-shadow:3px 3px 5px rgb(87 87 81);">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
１６．ストライプ模様のおしゃれなマーカー
この文章の <span style="background: repeating-linear-gradient(90deg, #ffff003d, #ffff0047 10px, #ffebbf 10px, #ffa90059 20px); padding: 2px;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
アンダーライン系
１７．蛍光ペン風マーカー
この文章の <span style="background: linear-gradient(transparent 50%, #fdfd0d5e 50%);">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
１８．黄色のアンダーライン
この文章の <span style="background: linear-gradient(transparent 90%, #fdfd0d 10%)">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
１９．二重線のアンダーライン
この文章の <span style="border-bottom: double 6px orange;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
２０．水色ドットのアンダーライン
この文章の <span style="border-bottom: 3px dotted blue;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
２１．色が変わるアンダーライン
この文章の <span style="border-bottom: 5px solid; border-image: linear-gradient(to right, yellow, orange) 1;">ここだけ</span> マーカーを引きます。この文章の ここだけ マーカーを引きます。
HTML、CSS の仕組みを理解してもっと便利に！
今回紹介した方法を使えば、簡単に文字マーカーを引けますが、HTMLやCSS の仕組みを理解しておくと、より容易にカスタマイズできるようになりますよ。
タグで囲んだ部分にデザインが適用される！
HTMLでは タグ（ <span>など）で囲んだ部分に対して、装飾デザインが適用されます。
例えば、以下のHTMLを使うと、「ここだけ」の部分に黄色いマーカーが引かれます。
style="" の中身を変えるとデザインを自由にカスタマイズできる！
上記のHTMLでは、style="" の中に「background（背景色） 」を指定することで、テキストに背景色をつています。
この backgroundで指定する「カラーコード」を変えことで、テキストの背景色を自由ににカスタマイズできます。
- オレンジ：background: #ffcc00;
- 水色：background: lightblue;
- ピンク：background: pink;
⇒ HTMLカラーコード一覧 でお好みの背景色を探そう！
このように、HTMLとCSSの基本を押さえることで、より自由度の高いデザインカスタマイズが可能になります。
デザインを登録して「ワンクリック」で使いまわそう！
何度も同じマーカーや装飾を使いたい場合に、毎回HTMLコードを手入力するのは面倒ですよね。
そんな時に便利なのが、WordPressの「非同期パターン」機能です！
装飾を「非同期パターン」に登録すれば、それ以降、ボタン1つで簡単に装飾を入れ込めるようになります。
ここからは、非同期パターンを活用して「ワンクリックでマーカー装飾を適用する手順」を紹介します。
- 装飾を作成する
- 非同期パターンとして登録する
- 登録した非同期パターンを使う
まずは非同期パターンに登録したい装飾を作成しましょう。
今回は、黄色のマーカーを引くHTMLコード を登録します。
先ほど作成したブロックを選択して、ツールバーの「︙」ボタンをクリック。「パターンを作成」を選択します。
＜
新規パターン追加画面が出てきたら、次の通り入力して「追加」ボタンをクリックしてください。
- 名称：好きな名前を入力
- カテゴリー：空白
- 同期：OFF
これで「黄色マーカー」の装飾が、非同期パターンとして登録されました！ 🎉
次は登録した非同期パターンを使ってみましょう。
投稿ページ左上の 
ボタンをクリックしてください。
左側コンテンツ一覧の「パターン」タブを開き、マイパターンから「STEP２で登録した装飾」を選ぶと、装飾コンテンツが追加されます。
お疲れさまでした。非同期パターンについての説明はこれで完了です。
この方法で、次回からはワンクリックで装飾を適用 できますよ！
まとめ
この記事では、プラグイン不要で簡単にオリジナルのマーカーを引く方法を解説しました。
HTMLやCSSの基本を押さえることで、より自由度の高いデザインカスタマイズが可能になります。
また、20種類のおしゃれなマーカーサンプルも紹介しているので、ぜひコピペでご活用ください。
自分好みの文字装飾でおしゃれなブログ記事を目指していきましょう！