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

SWELLブロックを利用したブロックパーツの制作・パターン1~10

目次

ブロックパーツの制作1  3カラム(サイト幅)

3カラム (コンテンツ幅⇒サイト幅)

  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力

ブロックパーツの制作2  3カラム(フルワイド)

3カラム (コンテンツ幅⇒フルワイド幅)

  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力

ブロックパーツの制作3  3カラム(記事幅)

3カラム(コンテンツ幅⇒記事幅)

  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力

ブロックパーツの制作4 フルワイド(背景) 

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

不透明度 50%

ここに文字

ここに文字

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

不透明度 50%

オーバレイカラー: 白

ここに文字

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

オーバレイカラー: 白

ここに文字

ここに文字

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

ここに文字

ここに文字

ここに文字

ブロックパーツの制作5 キャプション付きブロック 9種類

デフォルト

ここに文章1

ここに文章1

ここに文章1

ここに文章1

ここに文章1

ここに文章1

枠上

ここに文章1

ここに文章1

ここに文章1

枠上2

ここに文章1

ここに文章1

ここに文章1

枠内

ここに文章1

ここに文章1

ここに文章1

浮き出し

ここに文章1

ここに文章1

ここに文章1

ここに文章1

ここに文章1

ここに文章1

ブロックパーツの制作6 段落スタイルとグループ化スタイル

段落にスタイル

段落にスタイル

段落にスタイル

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

ここに文章1

ここに文章1

背景と色を変更

ここに文章1

ここに文章1

ブロックパーツの制作7 SWELLボタンのデザイン

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

ブロックパーツの制作8 段落スタイルとグループ化スタイル

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

オーバーレイ黒

オーバーレイ白

ブロックパーツの制作9 ステップ

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

ここに説明

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

ここに説明

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

ここに説明

ブロックパーツの制作10 FAQ

今日は何曜日ですか

8月30日

今は何時ですか

16時47分

この記事を書いた人

目次
閉じる