CONTENTS
現在満枠のためご新規様のご相談は5月以降のご予約となります。

テーマ「SWELL」でできること一覧

私がクライアントさんに推しているワードプレステーマがあるんですが、その名は「SWELL(スウェル)」

もうね、他のテーマ使ってる人なんで?
って思うくらいに優れものなんです。

そんなSWELLで使えるパーツについて今日は解説していこうと思います!

目次

見出しの種類

見出しにはH2~H6まで、数種類あります。
記事を書く時に親子階層にしてつかうあれです。

SWELLでは、それぞれの見出しが「デフォルト」と「セクション用」が選べる。
セクション用は基本、飾りのないものと思ってもらえたらOKです!

デフォルトの見出し2~4はデザインを選ぶことができます。

見出し2(H2)デフォルト

見出し3(H3)デフォルト

見出し4(H4)デフォルト

フルワイド

フルワイド機能はこのように、画面幅いっぱいに背景色をしくことができます。
画像を背景に入れることも可能です!

グループ化

テキストなどをグループ化することで、おしゃれなフレームを使うことが可能です。

線の太さや色などは、
SWELL設定>エディター設定で変えられます!

グループ化(枠線)

グループデザイン01

グループデザイン02

グループデザイン03

グループデザイン04

グループ化(スタイル)

ストライプ

方眼

角に折り目

ステッチ

かぎ括弧

かぎ括弧(大)

窪み

浮き出し

ポイント

チェック

バツ印

はてな

アラート

メモ

リスト

箇条書きをするリスト

  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト

ナンバリングをするリスト

  1. 箇条書きリスト
  2. 箇条書きリスト
  3. 箇条書きリスト
  1. 箇条書きリスト
  2. 箇条書きリスト
  3. 箇条書きリスト
  1. 箇条書きリスト
  2. 箇条書きリスト
  3. 箇条書きリスト
  1. 箇条書きリスト
  2. 箇条書きリスト
  3. 箇条書きリスト

横並び

  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト

下線をつける

  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト

リスト入りグループ

  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト

アコーディオン

デフォルト

アコーディオンタイトル

アコーディオンを開いたときの内容が入ります。

アコーディオンタイトル

アコーディオンを開いたときの内容が入ります。

シンプル

アコーディオンタイトル

アコーディオンを開いたときの内容が入ります。

アコーディオンタイトル

アコーディオンを開いたときの内容が入ります。

囲い枠

アコーディオンタイトル

アコーディオンを開いたときの内容が入ります。

アコーディオンタイトル

アコーディオンを開いたときの内容が入ります。

メインカラー

アコーディオンタイトル

アコーディオンを開いたときの内容が入ります。

アコーディオンタイトル

アコーディオンを開いたときの内容が入ります。

バナーリンク

画像とテキストを入れることで、バナーのようなリンクを作成することができるパーツ。
リッチカラムと組わせて使うとこのように2つならびも、3つならびも簡単に作成できます。

ボックスメニュー

キャプションボックス

デフォルトタイプ(タイトルをここに記入)

内容をここに記載していきます。

小タイプ(タイトルをここに記入)

内容をここに記載していきます。

枠上タイプ(タイトルをここに記入)

内容をここに記載していきます。

枠上2タイプ(タイトルをここに記入)

内容をここに記載していきます。

枠内タイプ(タイトルをここに記入)

内容をここに記載していきます。

浮き出しタイプ(タイトルをここに記入)

内容をここに記載していきます。

内テキストタイプ(タイトルをここに記入)

内容をここに記載していきます。

+3色を自由に設定可能

デフォルトタイプ

内容をここに記載していきます。

デフォルトタイプ

内容をここに記載していきます。

デフォルトタイプ

内容をここに記載していきます。

説明リスト

デフォルト説明リスト

説明リストテキストが入ります

説明リストの内容をここに入れます

説明リストテキストが入ります

説明リストの内容をここに入れます

左に線説明リスト

説明リストテキストが入ります

説明リストの内容をここに入れます

説明リストテキストが入ります

説明リストの内容をここに入れます

横並び説明リスト

説明リストテキストが入ります

説明リストの内容をここに入れます

説明リストテキストが入ります

説明リストの内容をここに入れます

縦並び説明リスト

説明リストテキストが入ります

説明リストの内容をここに入れます

説明リストテキストが入ります

説明リストの内容をここに入れます

FAQ

SWELLのよくある質問は、SEOにおいて大切な「構造化マークアップ」の出力が可能です。

サービスについてなどでこのブロックを使うときは、この機能をONにして使うようにしましょう!

FAQ(デフォルト)

QやAの形や色も選んで使うことができます。

質問タイトルが入ります。

質問への解答を入力していきます。

FAQ(線あり)

質問タイトルが入ります。

質問への解答を入力していきます。

FAQ(ボックス)

質問タイトルが入ります。

質問への解答を入力していきます。

FAQ(ストライプ)

質問タイトルが入ります。

質問への解答を入力していきます。

ステップ表示(流れを説明するときなど)

ステップ表示(デフォルト)

STEP
タイトルがここに入ります。

ここにその内容が入ります。

STEP
タイトルがここに入ります。

ここにその内容が入ります。

ビッグ表示(デフォルト)

STEPというところは、「表記を自由に変更」「縦並び横並びを選択」することができます。

制作の流れ
タイトルがここに入ります。

ここにその内容が入ります。

制作の流れ
タイトルがここに入ります。

ここにその内容が入ります。

スモール表示(デフォルト)

STEP
タイトルがここに入ります。

ここにその内容が入ります。

STEP
タイトルがここに入ります。

ここにその内容が入ります。

タブ

タブ(デフォルト)

タブ1の内容が入ります。

タブ(ふきだし/タブ固定幅ver.)

タブ1の内容が入ります。

タブ(下線/タブ端まで並べるver.)

タブ1の内容が入ります。

ABテスト

ABテストは2つの表示をランダムに表示することができます。

Aブロックの内容が入ります。

ふきだし

このような「発言」ふきだし機能をつかうことができます。

名前

このような「心の声」「右から」ふきだし機能をつかうことができます。

色は5色設定可能

色は5色設定可能

色は5色設定可能

色は5色設定可能

色は5色設定可能

ブログパーツ

あらかじめ作成しておいた「ブログパーツ」をサイト内のどこでも利用可能です!
このパーツは、日程を更新する場合や、記事の中でのサービスの訴求に使うと一回の修正ですべてのページに同内容が反映されるため、とってもオススメの機能です!

リンクリスト

リンクリストはアイコンの左右や種類も変更することができます。

リンクリスト(デフォルト)

リンクリスト(デフォルト/横並び)

リンクリスト(デフォルト/ボーダー)

リンクリスト(ボタン)

リンクリスト(ボタン/横並び)

リンクリスト(ボタン/背景塗り)

投稿リスト

投稿リスト(カード型)

投稿リスト(サムネイル型)

投稿リスト(テキスト型)

関連記事

関連記事(デフォルト)

画像の有無が選択できます。

関連記事(スリム)

アイコンが2種類から選択可能です。

関連記事(テキスト)

商品レビュー

商品名
総合評価
( 4.5 )
メリット
  • メリットが入ります
  • メリットが入ります
デメリット
  • デメリットが入ります
  • デメリットが入ります
  • URLをコピーしました!

ホームページ保健室

「ホームページがわからなすぎる」とひとりで悩んでいませんか?

法人~個人まで2,500サイトを制作したWebサイト制作技術の専門家が、
ホームページの技術的なこと~運用方法まで、
なんでも解決する『ホームページ保健室』をご利用ください。

\ 何日も悩んでいたことが、一瞬で解決 /

この記事を書いた人

埼玉県川口市で、自営業や起業家のホームページ制作を行っいます。
Web制作会社に7年務めたのち独立。Web制作歴12年、2500件以上のサイト制作に携わり、WordPressサイトを得意とし「作って終わり」にしない、結果が出るサイトであることを大切にしてます。「10人いれば10通りの最適なサイトがある」という信念のもと、型にハマったサイトづくりではなく、マーケティングから考えた、その人のビジネスにとって一番最適なサイトをご提案。技術面で不安のあるWebデザイナーのシステム面のサポートも行っております。

目次