Swellのリスト項目で箇条書きをする際、「✔」や「・」などのマーカーしか選べず、選択の幅が狭いと感じたことはありませんか？
その結果、記事の情報が単調になり、読者が重要なポイントを直感的に把握しにくくなることも…。
そこで、htmlブロックとショートコードで、★や♥、🎯などのUnicodeシンボルをリスト項目のアイコンとして使います。
この方法を取り入れることで
- 視覚的なアクセントをつけ、情報の整理がしやすくなる
- 可読性も上がり、読者の滞在時間が伸びる可能性がある
- 記事デザインが向上し、読みやすくなる
初心者でも簡単に実装できる方法なので、難しいコードの知識は不要です。
WordPressのSwellリストをカスタマイズし、より魅力的な記事デザインを実現 してみませんか？🚀✨
- リスト項目のマーカーにUnicodeのシンボルや絵文字を活用する方法
- 使用できるシンボル絵文字
Unicodeのシンボル絵文字の活用
HTMLブロックやショートコードを使用することで、★や♥、🎯などのUnicodeシンボルを活用し、リスト項目のマーカーを自由にカスタマイズできます。
また、リストの構造を維持しながら、Unicodeシンボルを適用できるため、視覚的に分かりやすく、統一感のあるデザインを実現できます。
唯一の欠点は、本記事のコードをシンプルにしたために、長文に向かない、細かい細工ができないことです。
したがって、一行づつの箇条書きで使ってください。
Unicodeとは？
Unicodeは、世界中の文字や記号を統一的に扱うための標準規格です。
以下のようなシンボルや絵文字を利用できます。
★：黒い星
♥：黒いハート
🌟：輝く星
😊：笑顔の顔
このように、Unicodeシンボルを活用すれば、リストのマーカーとして使用できます。
この後、Swellテーマを活用した具体的な方法を解説していきます。
htmlコードでリストのマーカーを増やす方法
htmlブロックとショートコードにより、リスト項目の先頭に配置するマーカーにシンボルや絵文字を追加することができます。
以下のコードを使用して、任意のマーカーを表示します。
予習１層リスト
以下のhtmlコードをコピーします。
htmlコード
<ul style="list-style: none; padding-left: 0;">
<li>✨ おすすめの商品</li>
<li>✨ 人気のサービス</li>
<li>💖 大好きな映画</li>
<li>💖 おすすめのレストラン</li>
<li>✅ やるべきタスク</li>
<li>✅ チェックリスト</li>
<li>➡ 次に進む手順</li>
<li>➡ おすすめのルート</li>
<li>😊 楽しいイベント</li>
<li>😊 嬉しい出来事</li>
</ul>１層リストの階層構造表記タイプhtmlコード
記事作成
記事内にhtmlブロックを追加し、コピーしたコードをペーストします。
以下が出力結果です。
出力結果
- ✨ おすすめの商品
- ✨ 人気のサービス
- 💖 大好きな映画
- 💖 おすすめのレストラン
- ✅ やるべきタスク
- ✅ チェックリスト
- ➡ 次に進む手順
- ➡ おすすめのルート
- 😊 楽しいイベント
- 😊 嬉しい出来事
１層リスト出力
解説
📌 このようにシンボル・絵文字＋文章が表示されます。
応用
１層リストを基本にして、下記のような応用法があります。
- ➡ ２層リストの階層構造表記タイプ
- ➡ ２層リストの階層構造表記なし
- ➡ ３層リストのの階層構造表記なし
- ➡ 各階層の下に1行開ける方法
- ➡ 太文字にする方法
- ➡ 段落をつける方法
２層リストの階層構造表記タイプ
以上を基本にして、シンボルや絵文字後に読者の読ませたい文章を記述します。
自身が箇条書きする文章とその構造を考えて、htmlブロックに「htmlコード＋シンボル・絵文字＋文章」を記述してください。
文章とは「ホテルを予約する」や「フライトを確認する」になります。
使用するシンボルや絵文字は以下のシンボルの種類を参照してください。
以下が２層リストの例です。
注意して記述してください。
htmlコード
<ul style="list-style: none; padding-left: 0;">
<li>🚀 旅行の計画
<ul style="list-style: none; padding-left: 1.5em;">
<li>✅ ホテルを予約する</li>
<li>✅ フライトを確認する</li>
</ul>
</li>
<li>⌚ 仕事のタスク
<ul style="list-style: none; padding-left: 1.5em;">
<li>✅ 会議の準備をする</li>
<li>✅ 資料を整理する</li>
</ul>
</li>
</ul>２層リストの階層構造表記タイプhtmlコード
出力結果
- 🚀 旅行の計画
- ✅ ホテルを予約する
- ✅ フライトを確認する
- ⌚ 仕事のタスク
- ✅ 会議の準備をする
- ✅ 資料を整理する
２層リスト出力
解説
📌 この表記は複雑になるため下記の「２層リストの階層構造表記なし」をおすすめします。
２層リストの階層構造表記なし
こちらは出力結果は同じでも、階層構造で表記しない方法です。
すっきりしていて、誤記しなくなります。
階層構造で表記しないでmargin-left を使って階層を作ります。
htmlコード
<ul style="list-style: none; padding-left: 0;">
<li>🚀 旅行の計画</li>
<li style="margin-left: 1.5em;">✅ ホテルを予約する</li>
<li style="margin-left: 1.5em;">✅ フライトを確認する</li>
<li>⌚ 仕事のタスク</li>
<li style="margin-left: 1.5em;">✅ 会議の準備をする</li>
<li style="margin-left: 1.5em;">✅ 資料を整理する</li>
</ul>２層リストの階層構造表記なしタイプhtmlコード（margin-left使用）
解説
📌 margin-left: 1.5em; ：要素の左側に1.5em分の余白（マージン）を追加します。
1.5em は、その項目で使用しているフォントサイズの1.5倍のスペースを確保する単位です。
３層リストのの階層構造表記なし
以下が3層リストのコードです。
htmlコード
<ul style="list-style: none; padding-left: 0;">
<li>🚀 旅行の計画</li>
<li style="margin-left: 1.5em;">✅ ホテルを予約する</li>
<li style="margin-left: 3em;">🏨 宿泊先を決める</li>
<li style="margin-left: 3em;">📅 予約の日程を確認</li>
<li style="margin-left: 1.5em;">✅ フライトを確認する</li>
<li style="margin-left: 3em;">✈ 航空券を手配する</li>
<li style="margin-left: 3em;">🛄 受託手荷物の確認</li>
<li>⌚ 仕事のタスク</li>
<li style="margin-left: 1.5em;">✅ 会議の準備をする</li>
<li style="margin-left: 3em;">📝 資料を作成する</li>
<li style="margin-left: 3em;">📊 プレゼンのスライドを確認</li>
<li style="margin-left: 1.5em;">✅ 資料を整理する</li>
<li style="margin-left: 3em;">📂 必要なファイルを準備</li>
<li style="margin-left: 3em;">🔍 内容を最終チェック</li>
</ul>３層リストの階層構造表記なしタイプhtmlコード（margin-left使用）
出力結果
- 🚀 旅行の計画
- ✅ ホテルを予約する
- 🏨 宿泊先を決める
- 📅 予約の日程を確認
- ✅ フライトを確認する
- ✈ 航空券を手配する
- 🛄 受託手荷物の確認
- ⌚ 仕事のタスク
- ✅ 会議の準備をする
- 📝 資料を作成する
- 📊 プレゼンのスライドを確認
- ✅ 資料を整理する
- 📂 必要なファイルを準備
- 🔍 内容を最終チェック
3層リスト表示
各階層の下に1行開ける方法
こちらは階層の下に〇行開ける方法です。
見やすくなります。
margin-bottom を使います。
htmlコード
<ul style="list-style: none; padding-left: 0;">
<li style="margin-bottom: 0.8em;">🚀 旅行の計画</li>
<li style="margin-left: 1.5em; margin-bottom: 0.5em;">✅ ホテルを予約する</li>
<li style="margin-left: 3em; margin-bottom: 0.5em;">🏨 宿泊先を決める</li>
<li style="margin-left: 3em; margin-bottom: 1em;">📅 予約の日程を確認</li>
<li style="margin-left: 1.5em; margin-bottom: 0.5em;">✅ フライトを確認する</li>
<li style="margin-left: 3em; margin-bottom: 0.5em;">✈ 航空券を手配する</li>
<li style="margin-left: 3em; margin-bottom: 1em;">🛄 受託手荷物の確認</li>
<li style="margin-bottom: 0.8em;">⌚ 仕事のタスク</li>
<li style="margin-left: 1.5em; margin-bottom: 0.5em;">✅ 会議の準備をする</li>
<li style="margin-left: 3em; margin-bottom: 0.5em;">📝 資料を作成する</li>
<li style="margin-left: 3em; margin-bottom: 1em;">📊 プレゼンのスライドを確認</li>
<li style="margin-left: 1.5em; margin-bottom: 0.5em;">✅ 資料を整理する</li>
<li style="margin-left: 3em; margin-bottom: 0.5em;">📂 必要なファイルを準備</li>
<li style="margin-left: 3em; margin-bottom: 1em;">🔍 内容を最終チェック</li>
</ul>３層リストの階層構造表記なしタイプhtmlコード（margin-bottom使用）
出力結果
- 🚀 旅行の計画
- ✅ ホテルを予約する
- 🏨 宿泊先を決める
- 📅 予約の日程を確認
- ✅ フライトを確認する
- ✈ 航空券を手配する
- 🛄 受託手荷物の確認
- ⌚ 仕事のタスク
- ✅ 会議の準備をする
- 📝 資料を作成する
- 📊 プレゼンのスライドを確認
- ✅ 資料を整理する
- 📂 必要なファイルを準備
- 🔍 内容を最終チェック
margin-bottom の主力結果
解説
📌 margin-bottom を使って各階層の下に〇行開けます。
各所に、1emと0.5em開けています。
太文字にする方法
テキストを太字（B（bold））にするには、＜ｂ＞タグを使用します。
htmlコード
<ul style="list-style: none; padding-left: 0;">
<li style="margin-left: 1em;">🔬 <b>科学者や研究者</b>：実験や観察を通じて知見を得て、問題を解決していきます</li>
</ul>太文字出力コード
出力結果
- 🔬 科学者や研究者：実験や観察を通じて知見を得て、問題を解決していきます
＜ｂ＞の出力結果
解説
📌 ＜ｂ＞科学者や研究者＜／ｂ＞のように、＜ｂ＞と＜／ｂ＞の間のテキストが太字になります。
段落をつける方法
テキストに段落つけるには、＜ｐ＞タグを使用します。
htmlコード
<ul style="list-style: none; padding-left: 0;">
<li style="margin-left: 1em;">🔬 <b>科学者や研究者</b>：実験や観察を通じて知見を得て、問題を解決していきます。</li><li style="margin-left: 1em;"><p>科学者は、新しい技術や理論を探求し、世界の謎を解き明かすことを使命としています。</p><p>例えば、環境問題の研究を行う生物学者、新薬を開発する薬学研究者、宇宙の秘密を解き明かす天文学者など、さまざまな分野で活躍しています。</p><p>彼らの研究は、医学、環境、工学、情報技術など、私たちの生活に密接に関わる分野で応用され、新しい発見や革新をもたらします。</p><p>また、科学者の仕事はデータ収集や分析、実験の繰り返しが欠かせません。日々の観察と試行錯誤が、新しい発見につながるのです。</p>
</li>
</ul>段落出力コード
出力結果
- 🔬 科学者や研究者：実験や観察を通じて知見を得て、問題を解決していきます。
科学者は、新しい技術や理論を探求し、世界の謎を解き明かすことを使命としています。
例えば、環境問題の研究を行う生物学者、新薬を開発する薬学研究者、宇宙の秘密を解き明かす天文学者など、さまざまな分野で活躍しています。
彼らの研究は、医学、環境、工学、情報技術など、私たちの生活に密接に関わる分野で応用され、新しい発見や革新をもたらします。
また、科学者の仕事はデータ収集や分析、実験の繰り返しが欠かせません。日々の観察と試行錯誤が、新しい発見につながるのです。
＜ｐ＞の出力結果
解説
📌 ＜ｐ＞タグを使って段落をつけて読みやすくします。
これにより文章の流れがスムーズになります。
シンボル・絵文字の種類
以下は、見慣れたシンボルと絵文字なので、リストマーカーに使用できます。
また、リスト表示以外に以下のように一文のマーカーにも使えます。
✅ 片付け業者に頼めばすぐ解決！
📌 大事なポイントをメモしよう
⚠ 注意が必要な場合はこちら
よく使われる記号＆シンボル
- チェックマーク系：✔ ✖ ✅ ❌ ☑ ☒ 📌📍📝📛✖️🔴🟥
- 矢印系：→ ← ↑ ↓ ↔ ↕ ⇨ ⇦ ⇧ ⇩ ➡ ⬅ ⬆ ⬇ 🔽 🔼 ➡️ 🔜 🔝
- 星・評価系・ひらめき：★ ☆ ✪ ✭ ✰ 🌟✨💡✴️
- ハンドサイン：👍👎👌✌️🤞🤙🙏👏🫶👊✊🖐️🤟🫵
- 丸・点・四角系：○ ● ◯ ⚪ ⚫ ◉ ◍ ◘ ◙ ◎ ◻ ◼ ◾ ▪🔹
- 数字付き記号：➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓
- ハート・エモーション系：❤ 💖 💕 💞 💓 💗 💘 💝 💔 💜
- 注目・重要マーク：❗ ❕ ❓ ❔ ‼ ⁉ 🔥 ⚠ ⚡ ❄ ❆ 🆕 🆙 🆒 🆓🔖
- 旗・バナー系：🏴 🚩 🎌 🏁 🏳
- 環境・アイコン系：♻ ⚙ 🔧 🔨 🛠 🏠 🏡 🏢 🏦 🏛 🏨
- 通貨マーク：$ ¥ € £ ₩ ₹
- その他の便利なマーク： ✉ 📩 📞⌛ ⏰ ⌚ 🚀 🎯 😊 🤔 🔍 🔎 🏥 👩⚕️ 👨⚕️ 💉 🩺 ♿️ 💼 📊 👔 🖥️ 📝 💰 🧾 🎨 ✏️ 🖍️ 🖊️✍️ 📸 🎞️ 📖 🧑🔬 🔬 🧪 🧫 🛠️ 🧑💻 ⚙️ 📚 🧑🏫 🧠 💭 🚔 👮♂️ 🔦 🚒 🔥 👨🚒 ⚖️ 👨⚖️ 📜 👨🍳 🍽️ 🥘 🔑 🛎️ 💻 📟 🎭 🎬 🎤 🎸 🎹 🎻 💃 🕺 🎶 💪🌀 🧩 📣
まとめ
ブログ記事のリスト項目のマーカーにおいて、様々なシンボルや絵文字を効果的に活用することで、記事の視覚的魅力を高め、読者の興味を引きつけることができます。
Unicodeシンボル・絵文字と、Swellテーマのhtmlブロック機能を組み合わせることで、どんな項目内容にも合うデザインを実現できます。
ただし、程よい使用に止め、読者にとって読みやすい記事作成を心掛けましょう。
コメント