エディターで使える簡単デザイン! – ボタン装飾編

エディターで使える簡単デザイン! - ボタン装飾編
記事上のウィジェットエリア

この記事では、SWELLのエディタで使用できるデザイン実装機能について解説していきます。

今回はその中でも「ボタン装飾」に焦点を当てて解説していきます。

クラシックエディター・ブロックエディターのどちらからも、簡単にボタンを設置できますので、ぜひご活用ください。

目次前広告表示エリア
目次

ボタンデザイン一覧

実際にどのようなボタンが使用できるのか、最初に見ていただこうと思います。

ノーマルボタン

立体ボタン

キラッとボタン

ボタンの使い方

ブロックエディターの場合

「ブロックの追加」ボタンをクリックし、「SWELLブロック」のタブの中から「ボタンブロック」を選択してください。

ボタンブロックを選択
ボタンブロックを選択

「ボタンブロック」を選択すると、下の画像のように、グレーのノーマルボタンが挿入されます。

ボタンブロックの使い方
画像の説明
  1. ボタンに表示するテキストを入力
  2. ボタンのリンク先のURLを入力
  3. ボタンのデザインを選択
  4. ボタンの色を選択
  5. リンク先を新しいタブで開くかどうかの設定

クラシックエディターの場合

ツールバーの「スタイル」>「ボタン装飾」から、使用したいボタンを選択します。

ボタンの選択

すると、以下のように点線枠で囲まれたボタンエリアが挿入されます。

ボタンエリア

このエリア内でリンクを作成することで、ボタンとなります。

ボタンのリンクを作成
エリア内にテキストを入力し、リンクを挿入

テキストを入力した状態で「リンクを挿入」ボタンを使用するか、URLをコピーした状態でペーストするとリンクを作成できます。

リンクが作成されると、以下のようにボタンが出現します。

ボタンの完成
あとはURLを入力して完了です

ツールバーが1段しか表示されていない場合

ツールバーが1段しか表示されていない場合は、1段目の一番右にある「ツールバー切り替えボタン」をクリックすると全ての段が表示されます。

ツールバー切り替えボタン
ツールバー切り替えボタン

ボタンのデザイン設定

SWELLで使える装飾ボタンは、カスタマイザーから「丸み」と「」を設定できます。

「外観」>「カスタマイズ」>「投稿・固定ページ設定」と進むと、「装飾ボタンのデザイン」という項目が下の方にあります。

丸みは3種類から選ぶことができ、色は「赤」「青」「緑」をそれぞれ好みの色合いに設定可能です。

ボタンのデザイン設定
カスタマイザー >「投稿・固定ページ設定」

「丸み」の設定による見た目の変化

丸みの違い
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次