この記事には広告が含まれています。

SWELL:ボタンブロックの使い方と出来ること

SWELL:ボタンブロックの使い方と出来ること

この記事ではSWELL(スウェル)のボタンブロックの使い方・できることについて初心者向けに解説しています。

この記事がお勧めな方

  • SWELL(スウェル)のボタンブロックの使い方を知りたい方
  • SWELL(スウェル)のボタンブロックで出来ることを知りたい方
  • SWELL(スウェル)のボタン表示がどんな感じか知りたい方
SWELL:ボタンブロック

SWELL:ボタンブロックで出来ること

SWELL:ボタンブロック
① スタイルボタンのスタイルを設定可能
② ボタンサイズ設定ボタンのサイズを変更可能
③ カラー設定ボタンの色を変更可能
④ ボタンの計測設定ボタンのクリック率を計測可能
⑤ アイコン設定ボタンにアイコンを設定可能
⑥ 広告タグ設定広告タグを設定可能
⑦ デバイス制限スマホとPCで表示制限をすることが可能
⑧ ブロック下の余白量ブロック下の余白量を設定可能

① スタイル

ボタンのスタイルを5種類から変更することができます。

SWELL:ボタンブロック(スタイル)

ノーマル

SWELL:ボタンブロック(スタイル:ノーマル)

立体

SWELL:ボタンブロック(スタイル:立体)

キラッと

光る効果があるボタンです。

SWELL:ボタンブロック(スタイル:キラッと)

アウトライン

SWELL:ボタンブロック(スタイル:アウトライン)

MOREボタン

SWELL:ボタンブロック(スタイル:MOREボタン)

「SWELL設定」→「エディター設定」の「ボタン」でボタンの丸みを設定することができます。

「SWELL設定」→「エディター設定」の「ボタン」

ボタンの丸みを「すこし丸める」を設定するとこんな感じです。

SWELL:ボタンを少し丸めた表示

SWELL設定でボタンの丸みを変更することができますが、サイト全体のボタンに反映されるので個別のボタンごとに丸みを設定することはできません。

SWELLのボタンの実際の表示をSWELLで作成したサンプルサイトにて確認できますので、そちらも参考にしてみてください。

→ SWELLで作成したサンプルサイト(ボタンブロック)

② ボタンサイズ設定

ボタンのサイズを変更することができます。

SWELL:ボタンサイズ設定

小・標準・大の他にカスタムサイズに変更可能です。

SWELL:ボタンサイズを変更した表示

③ カラー設定

カラー設定でボタンの色を変更することができます。

SWELL:カラー設定

ボタンの色を変更するとこんな感じです。

SWELL:ボタンの色を変更した表示

カラー設定に表示される色は「SWELL設定」→「エディター設定」の「ボタン」で設定することができます。

「SWELL設定」→「エディター設定」の「ボタン」

④ ボタンの計測設定

「クリック率を計測する」のタブをオンにすると、そのボタンのクリック率を計測することができます。

SWELL:ボタンの計測設定

⑤ アイコン設定

アイコン設定でボタンにアイコンを表示させることができます。

SWELL:アイコン設定

表示するアイコンはテキストの左右を選択可能で、アイコンサイズも変更することができます。

SWELL:ボタンにアイコンを表示した例

⑥ 広告タグ設定

広告タグを入力して設定することができます。

アフィリエイトサイトを運営するうえでとても便利です。

SWELL:広告タグ設定

⑦ デバイス制限

スマホとPCで表示制限をすることができます。

SWELL:デバイス制限

⑧ ブロック下の余白量

ボタン下の余白量を設定することができます。

SWELL:ブロック下の余白量

初心者でもわかりやすい操作性で、SWELLでは簡単にボタンを記事内に表示させることができます。

ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。

ハムタ
ハムタ
パパくま
パパくま

現在は多くのAIライティングツールがあります。

そのほとんどが無料お試しでの利用が可能です。

お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。

無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。

無料お試しがずっと可能なAI記事作成ツール
無料お試しがずっと可能なAIライティングツール

2024/10/12    ,

「記事作成にAIを活用してみたいなぁ」 「でも料金はかけたくないなぁ」 そんな方に無料お試しがずっと可能なAIライティングツールをいくつか紹介します。 もちろん無料お試しなので、機能をフルに使用するこ ...

SWELLの購入とインストール方法

SWELLの設定関係

SWELLの使い方

SWELLのデザインカスタマイズ