MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
◆ 神テーマ「SWELL」のすべて!◆ 特徴 ~ エディタ ~ 移行手順 ~ デメリット ~ 感想 ~ 比較まで!記事へ GO!

【SWELLブロックエディタ使い方】ボタン、ボックス、ふきだし

この記事では、SWELLの独自ブロックである、以下の3つのブロックについて解説します。

  • ボタン
  • ボックス(キャプション付きブロック)
  • ふきだし

SWELL独自の便利な機能がいっぱい!

\ 詳しく見てみる /

SWELLホームページ:swell-theme.com

目次

SWELLボタン|SWELLブロックエディタ

SWELLボタンの設定内容は以下の通りです。

SWELLボタンの設定画面

ボタンの形状や色は、下記で設定できます。

SWELL設定 > エディター設定ボタン > リスト項目

SWELL設定ーエディタ設定ーボタンの設定画面

設定内容は次の通りです。

スタイルボタンの形状を選べます。下記で事前に設定可能。
ボタンカラーの設定ボタンの色を選べます。下記で事前に設定可能。
ボタンサイズの設定小、標準、大 から選択。幅と高さが変わります。
リンク設定、新しいタブを開くリンク先を別のタブで開くかどうか。
リンクrel属性リンクタグのrel属性
<link rel="○○" ~
アイコン設定ボタンテキストの左側に表示されるアイコン
アイコンのクラスFont Awesomeなどを入力(例、fas fa-fish)
広告タグ設定、計測用imgタグの画像URL計測用に使用する(実際は表示されない)、ASP広告タグ内のimgタグを入力。
広告タグを直接入力アフィリエイト広告のタグをそのまま入力できる
ボタン計測設定、クリック率を計測するONにすると、この項目の下にクリック率のデータが表示されます。

これらの設定のうち、特に便利なのが「広告タグを直接入力」できる項目です。

通常ASPの広告タグは改変が禁止されていますので、一部のみを抽出してボタンに貼ることは、アフィリエイト規約違反になります。SWELLでは、広告タグをそのまま入力できますので、規約に違反しません。

ボタンデザインのサンプル

⇩カーソルを置いてみてください。ボタンが変化します。

\ ノーマルボタン、サイズ標準/

\立体ボタン、サイズ小/

\ 光るボタン、サイズ大 /

\ アウトライン、サイズ標準

\参考リンク/

SWELL記事:SWELL専用ボタンブロックの使い方

\ 詳しく見てみる /

SWELLホームページ:swell-theme.com

ふきだし|SWELLブロックエディタ

SWELLのふきだしブロックには、以下の設定があります。

SWELLふきだしの設定画面

ふきだしのキャラクターを事前に設定するには、以下から行います。

ふきだし > 新規追加

SWELLふきだしの新規追加画面

キャラクターの数は無制限に設定できます。

事前に設定していなくても、エディタ上でその都度設定することもできます。

発言、丸枠付き

心の声、枠なし

\参考リンク/

SWELL記事:SWELLのふきだしブロックの使い方

\ 詳しく見てみる /

SWELLホームページ:swell-theme.com

ボックス(キャプション付きブロック)|SWELLブロックエディタ

SWELLのボックス(キャプション付きブロック)には、以下の設定があります。

SWELLボックスの設定画面

ボタンの形状や色は、下記で設定できます。

SWELL設定 > エディター設定カラーセット > キャプションブロック設定

SWELL設定ーエディタ設定ーカラーセットの設定画面

SWELLのボックスブロックの素晴らしい点は、1つのブロックで様々な形状のボックスを選択できるということです。

通常、ボックスの形を変えるには、異なるブロックを選択しなければなりませんが、SWELLではクリック1つで簡単にボックスの形状を変えることができます。

サンプル

デフォルト サンプル

これはブロックのサンプルです。

小 サンプル

これはブロックのサンプルです。

枠上 サンプル

これはブロックのサンプルです。

枠上2 サンプル

これはブロックのサンプルです。

枠内 サンプル

これはブロックのサンプルです。

浮き出し サンプル

これはブロックのサンプルです。

内テキスト サンプル

これはブロックのサンプルです。

\参考リンク/

SWELL記事:SWELLの「キャプション付きブロック」の使い方 

\ 詳しく見てみる /

SWELLホームページ:swell-theme.com

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次