社内サイト管理者を育てる会社、中小企業119専門家、デジタル化応援隊専門家

WordPress学習でのSWELLテーマ用教材ページ!学習内容25例

こんな方はお読みください。

SWELLの使い方を独自で学習し始めた方
WordPressの経験値が浅い方
WordPressでのSEO対策投稿を学びたい方
時間に追われているので短期間で学習したい方
SWELLブロックで何が出来るか判りたい方

\ 5時間程、一緒に学習しませんか /

目次

1. フルワイドブロック(サイドバー無し)

下記の画像の上にテキスト、カラム、画像、バナーリンクを重ねる事が簡単に出来ます。
ブロックエディターだから簡単に出来ます。
レイヤーのような4層のデザインブロック制作を考えながらNO5までお進みください。

背景透明度50% Paddeing 上40、下40

不透明度 50%

オーバレイカラー: 白

ここに文字

背景透明度80% Paddeing 上0、下0

オーバレイカラー: 白

ここに文字

ここに文字

背景透明度80% Paddeing 上0、下0

オーバレイカラー: 白

ここに文字

ここに文字

背景透明度65% オーバーレイカラー:緑

ここに文字

ここに文字

ここに文字

2. フルワイドブロック 画像を重ねる

3. フルワイドブロック 2カラムを重ねる

2カラム
スマホで見ると1カラム毎に
スクロールで出てきます。

1番目のカラム背景:白

2番目のカラム背景:グラデーション

4. フルワイドブロック カラムに画像を重ねる

1層目:フルワイド、2層目カラム背景
3層目カラム内画像

1番目のカラム背景:白

2番目のカラム背景:グラデーション

5. フルワイドブロック カラムにバナーリンクを重ねる

1層目:フルワイド、2層目カラム背景
3層目カラム内バナー、4層目バナ内文字

1番目のカラム背景:白

2番目のカラム背景:グラデーション

画像だけで3層、バナーリンク文字1層
合計4層

6. キャプション付きブロック 9種類

ブログ記事を読みやすくするには、キャプションブロックと文字編集機能を重ねて使いましょう。

デフォルト

ここに文章1

ここに文章1

ここに文章1

ここに文章1

ここに文章1

ここに文章1

枠上

ここに文章1

ここに文章1

ここに文章1

枠上2

ここに文章1

ここに文章1

ここに文章1

枠内

ここに文章1

ここに文章1

ここに文章1

浮き出し

ここに文章1

ここに文章1

ここに文章1

ここに文章1

ここに文章1

ここに文章1

7. SWELLのショートカットを利用すれば作業時間が短縮できる。

Shift + Alt + H でショートカット一覧が表示されます。

グローバルショートカット

グローバルショートカット

選択ショートカット

選択ショートカット

ブロックショートカット

ブロックショートカット

中級者なら次のショートカットは必ず使いましょう。
Ctrl + Shift + D : 選択したブロックは複製
Ctrl + Alt + Y : 選択したブロックの後ろに新しいブロックを挿入

書式ショートカット

書式ショートカット

8. マウス選択よりも上矢印↑キーを使うと便利

3つのカラムを全て選ぶとき等、選択が微妙に調整必要な場合は上矢印を使いましょう。
この操作は全てのWordpressテーマで共通です。便利な操作なのに初心者の方に
おすすめな操作情報なので8番目にしました。
下記の3カラムを全て選んだり、複製したり、削除する時に使います。

段落にスタイル

段落にスタイル

段落にスタイル

3つの段落をグループ化してスタイル変更

ここに文章1

ここに文章1

背景と色を変更

ここに文章1

ここに文章1

9. SWELLボタンとマイクロコピー

ボタンをクリク後に、新しいタブで開く設定にも出来ます。

\ ぼたんだよ /

上記、 \ ぼたんだよ / の短い説明部分がマイクロコピーです。
ボタンクリック率があがるので、多用するべきです。程々に

10. バナーリンクが直ぐに挿入できます。(マウスで簡単操作)

バナーに重なる文字 リンク設定が出来る。

オーバーレイ黒

オーバーレイ白

11. ステップ  (マウスで簡単操作)

STEP
左の文字や色を自由に変更可能

ここに説明

ステップ
コピペをしてみよう!

ここに説明

ステップ
コピペで追加された部分

ここに説明

12. FAQ  (マウスで簡単操作)

今日は何曜日ですか

8月30日

今は何時ですか

16時47分

13. ふきだし (マウスで簡単操作)

発言、枠線あり、背景薄緑、左寄せ

心ぞ声、枠線なし、背景薄青、右寄せ

アイコンスマホ表示は縦並び
アイコン下文字なし

受付担当

アイコン文字横並び
アイコンに丸枠
アイコン下文字あり

14. アコーディオン (マウスで簡単操作)

15. ABブロック (マウスで簡単操作)

16. タブブロック (マウスで簡単操作)

TAB1を最初に表示

TAB2を最初に表示

17. 説明リストブロック (マウスで簡単操作)

1番目の説明

詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容

2番めの説明

詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容 詳細な説明内容

18. 投稿ブロック (マウスで簡単操作)

19. 関連記事ブロック (マウスで簡単操作)

20. ブログパーツブロック (複数の同じ内容を簡単配置)

サイト内で色々な場所に同じ内容を配置する事があります。
コピペーストで解決できますが、プログパーツを利用すると修正箇所は1箇所するだけで
全ての箇所が修正反映されます。
ブログ数の多い方は必ず使いましょう。

下記内容は全て投稿の最後に入れているブログパーツです。

サイト制作教室 KS志
中小企業119専門家

連絡先 090-1487-2959
MAIL kosunji@gmail.com

URL https://kskokorozasi.com
問合せフォームはこちら

現在20個を表現しました。50個を表現するのが目標です。
あと30個!アイデア、情報を募集します。

\ 応援してね /

21. グループ設定後に、SWELLスタイル・ボーダー変更、背景色変更

SWELLスタイルとSWELLボーダーを掛け合わせて色々なスタイルを作りましょう。
掛け合わせの後に、背景色を色々とアレンジして見てください。

SWELLスタイル
ポイント

SWELLスタイル
チェック

SWELLスタイル
バツ

SWELLスタイル
深み

SWELLスタイル
かぎ括弧

SWELLスタイル
ブラウザ

SWELLスタイル
ポイント

SWELLボーダー
NO2

SWELLスタイル
チェック

SWELLボーダー
NO3

SWELLスタイル
バツ

SWELLボーダー
NO3

SWELLスタイル
ポイント

SWELLボーダー
NO2

SWELLスタイル
チェック

SWELLボーダー
NO3

SWELLスタイル
バツ

SWELLボーダー
NO3

22. 投稿リストブロックの型4つ 

カード型

リスト型

リスト型(左右交互)

サムネイル型

テキスト型

23. ブロック内でのテーブル(表)のスタイル

会社概要

項目1項目2
会社名○○○株式会社
住所 ○○○市○○町1-1-1
電話090-1234-5678
キャプションブロック内のテーブル
項目1項目2
会社名○○○株式会社
住所 ○○○市○○町1-1-1
電話090-1234-5678

お店外観

店名「焼き肉とワイン」
項目1項目2
会社名○○○株式会社
住所 ○○○市○○町1-1-1
電話090-1234-5678

店名「焼き肉とワイン」

ここの説明文を挿入

主なメニュー炭火焼ステーキとワインのコース
場所 ○○○市○○町1-1-1
金額帯 3000~5000円
営業時間PM 5~12時

お店の特徴をお書きください。

24. カラーパレットの配色をカスタマイズする方法

25. ブロックにアニメーション効果を設定する方法

この記事を書いた人

目次
閉じる