【保存版】SWELLテーマ装飾コード一覧！コピペで記事を劇的に見せる

SWELLテーマ装飾コード一覧！コピペで記事を劇的に見せる【保存版】

WordPressテーマの中でも特に人気が高い「SWELL」。デザインの美しさや機能性の高さはもちろん、何よりもブログ記事の装飾が簡単に行える点が大きな魅力です。ブロックエディタを使えば、CSSの知識がなくてもアイコンやボックス、マーカーなどを直感的に挿入できます。

しかし、HTMLとSWELL独自のCSSクラスの記述方法を知っておくと、さらに記事表現の幅が広がります。例えば、AIに特定のデザインのボックスを生成させたい場合や、細かいカスタマイズを行いたい場合に非常に役立ちます。

この記事では、SWELLでよく使う装飾機能に焦点を当て、そのHTMLコードとクラス名を一覧形式でまとめてご紹介します。

SWELLテーマの装飾で記事が劇的に変わる理由

SWELLの豊富な装飾機能を使いこなすことは、まさに記事の表現力をワンランクアップさせるための鍵となります。

【カテゴリ別】SWELL装飾コードと使い方

ここからは、SWELLで利用できる主要な装飾機能について、HTMLコードと対応するクラス名を具体的に見ていきましょう。

1. アイコンで情報を象徴的に伝える

SWELLには数多くのアイコンフォントが搭載されており、記事の様々な場所で視覚的なアクセントとして活用できます。

<i class="[アイコンのクラス名]"></i>

<i class="icon-info"></i> 情報です。

よく使うアイコンクラス名一覧 (一部)

| アイコン表示例（※） | クラス名 | 用途・説明 |
| :—————— | :————– | :——————————————- |
| | icon-info | お知らせ、情報ボックスのタイトルなどに |
| | icon-light-bulb | ヒント、アイデア、ポイントなどに |
| | icon-alert | 注意喚起、警告文などに |
| | icon-hatena | Q&A、疑問点提示などに |
| | icon-check | 確認事項、リストのチェックマークとして |
| | icon-pen | メモ、執筆、編集に関する記述に |
| | icon-book | 参考情報、書籍紹介などに |
| | icon-thumb_up | メリット、おすすめポイントなどに |
| | icon-thumb_down | デメリット、注意点などに |
| | icon-star-full | おすすめ度、評価などに |
| | icon-bubble | 会話、コメント、お客様の声などに |
| | icon-search | 検索機能、検索窓の案内に |

※実際の表示はSWELLテーマのバージョンや設定に依存します。上記以外にも多数のアイコンがあります。

アイコンの使い方例

• リストアイテムの先頭に: <li><i class="icon-check"></i> 確認事項</li>
• 見出しやタイトルの横に: <h3><i class="icon-star-full"></i> おすすめの機能</h3>
• 文中にちょっとしたマークとして: <i class="icon-light-bulb"></i> これがポイントです！

アイコンを効果的に使うことで、テキストだけの情報よりもはるかに視覚的に分かりやすく、読者の興味を引きつけることができます。

2. マーカーで視線を誘導！重要な箇所を強調

テキストにマーカーを引くことで、読者の視線を特定の重要な単語やフレーズに誘導できます。SWELLでは、様々な色のマーカーを簡単に適用できます。

<span class="swl-marker [色のクラス名]">強調したいテキスト</span>

<span class="swl-marker mark_yellow">このテキストは黄色マーカー</span>

主要なマーカークラス名一覧

| マーカーの色 | クラス名 |
| :———– | :——————– |
| 黄色 | swl-marker mark_yellow |
| オレンジ色 | swl-marker mark_orange |
| ピンク色 | swl-marker mark_pink |
| 水色 | swl-marker mark_blue |
| 緑色 | swl-marker mark_green |

3. 多彩なボックス・スタイルで内容を整理・目立たせる

SWELLのボックスデザインは非常に豊富で、情報を囲んで整理したり、特定のメッセージを強調したりするのに最適です。アイコン付きのボックスは、内容の種類（情報、注意、メリットなど）を視覚的に伝えるのに役立ちます。

<div class="[スタイルのクラス名]">
  <!-- ボックスのタイトル部分 -->
  <div class="swell-block-box__title">
    <i class="[アイコンのクラス名]"></i> ボックスのタイトル
  </div>
  <!-- ボックスの内容部分 -->
  <div class="swell-block-box__content">
    ここにボックス内のテキストや他の要素が入ります。
  </div>
</div>

主なボックス・スタイルクラス名一覧 (一部)

| デザイン種類 | クラス名 | 説明・用途 |
| :—————- | :——————– | :————————————————— |
| 背景スタイル | | |
| ストライプ背景 | is-style-bg_stripe | 背景をストライプ模様にします。 |
| 方眼背景 | is-style-bg_grid | 背景を方眼紙のようなグリッド模様にします。データや事例に。 |
| ボックス形状 | | |
| 角に折り目 | is-style-crease | ボックスの右上に折り目をつけたようなデザイン。 |
| スティッチ | is-style-stitch | ボックスの縁が縫い目のようなデザイン。 |
| かぎ括弧 | is-style-kakko_box | ボックスをかぎ括弧で囲んだようなデザイン。 |
| かぎ括弧（大） | is-style-big_kakko_box | 通常のかぎ括弧よりも大きなデザイン。まとめや結論に。 |
| 窪み | is-style-dent_box | ボックスが内側に窪んだように見えるデザイン。 |
| 浮き出し | is-style-emboss_box | ボックスが外側に浮き出て見えるデザイン。 |
| 左に縦線 | is-style-border_left | ボックスの左端に太めの縦線。引用や補足説明に。 |
| 付箋風 | is-style-sticky_box | 付箋紙のようなデザイン。メモやちょっとしたポイントに。 |
| 吹き出し風 | is-style-balloon_box | 会話形式の吹き出しデザイン。 |
| アイコン付きボックス | | (タイトルにアイコンとクラスを組み合わせて使用) |
| グッド (良いね) | is-style-icon_good | メリットや肯定的な情報を示すボックス。（ 使用） |
| バッド (悪いね) | is-style-icon_bad | デメリットや注意点を示すボックス。（ 使用） |
| インフォ (情報) | is-style-icon_info | お知らせや補足情報を示すボックス。（ 使用） |
| アナウンス (告知) | is-style-icon_announce | 重要なお知らせや告知事項を示すボックス。（ 使用） |
| ペン (メモ) | is-style-icon_pen | メモやポイント、解説などを示すボックス。（ 使用） |
| 本 (参考) | is-style-icon_book | 参考情報、文献、学習ポイントなど。（ 使用） |
| ポイント (大) | is-style-big_icon_point | 大きめのアイコンでポイントを目立たせるボックス。（ など使用） |
| チェック (大) | is-style-big_icon_check | 確認事項や達成項目を大きく示す。（ 使用） |
| バツ印 (大) | is-style-big_icon_batsu | 禁止事項や誤った情報を大きく示す。（ 使用） |
| はてな (大) | is-style-big_icon_hatena | Q&Aや疑問点を大きく提示する。（ 使用） |
| アラート (大) | is-style-big_icon_caution | 特に重要な警告や注意喚起を大きく示す。（ 使用） |

<div class="has-border -border01 is-style-icon_info">
  <div class="swell-block-box__title"><i class="icon-info"></i> 重要なお知らせ</div>
  <div class="swell-block-box__content">
    <p>ここに<span class="swl-marker mark_yellow">重要なお知らせ</span>の内容を記述します。</p>
    <ul>
      <li><i class="icon-check"></i> 確認事項１</li>
      <li><i class="icon-check"></i> 確認事項２</li>
    </ul>
  </div>
</div>

このように、ボックスは記事構成の要として、情報を区切り、種類を明確にし、読者の理解を助ける非常に便利な機能です。

4. ボーダー（囲み線）でコンテンツを区切る

シンプルな線でコンテンツを囲むことで、引用文や補足情報、特定のセクションを本文と区別し、見やすくすることができます。

<div class="has-border [線の種類のクラス名]">
  枠線で囲みたい内容が入ります。
</div>

<div class="has-border -border02">
  これはボーダー02の枠線です。
</div>

ボーダークラス名一覧

| 線の種類 | クラス名 | 説明 |
| :———– | :—————- | :——————- |
| シンプル線 | has-border -border01 | シンプルな実線の枠線 |
| やや太線 | has-border -border02 | やや太めの実線の枠線 |
| 点線 | has-border -border03 | 点線の枠線 |
| 二重線 | has-border -border04 | 二重線の枠線 |

SWELL装飾を効果的に使うためのヒント

SWELLの装飾機能は魅力的ですが、ただ使えば良いというものではありません。より読者に伝わる記事にするために、以下の点にも注意してみましょう。

まとめ

この記事で紹介したコードスニペットは、記事作成ツールやAIへの指示にも活用できます。効率よく高品質な記事を作成するためにも、ぜひブックマークしてご活用ください。