【SWELL非公式マニュアル】「カスタムバナー」機能の使い方

SWELLではショートコードを使って簡単にバナー画像を作成することができます。
この記事では、バナー画像の使い方を紹介します。

こんな感じです

カスタムバナーの使い方

ショートコードの呼び出しキーは

もしくは

です。

使用できる基本的な属性値

• title=""：バナータイトル
• text=""：バナータイトル下の文章
• link=""：バナーのリンク先
• icon=""：バナータイトルに付けるアイコンのクラス名
• バナー画像の指定
  • img_id=""：画像をIDから指定できます
  • img_url=""：画像をURLから指定できます
• サイズの指定
  • width=""：バナーの横幅を指定（%での指定を推奨）
  • height=""：バナーの高さ
  • height_sp=""：スマホ表示時のバナーの高さ（指定がない場合はスマホでもheight属性が有効）
• 特殊効果
  • blur="on"：画像にブラー効果を付けます
  • shadow="on"：画像にブラー効果を付けます

別ドメインへのリンクは自動で別タブで開くようになっています。

SWELLで標準で使用できるアイコンについては以下のページで確認してください。

投稿やカテゴリーへのバナーリンクも簡単に作成できます。

ショートコードの属性値に投稿IDやカテゴリーIDを指定することで、特定のページへのバナーを簡単に作成できます

IDの指定方法

• 投稿ページ：post_id=""
• カテゴリーページ：cat_id=""
• タグページ：tag_id=""

上記のようにIDの指定があると、自動で「タイトル」「アイキャッチ画像」「リンク先」が取得されます。

title=""やimg=""などの属性値を合わせて指定することで、自動取得された情報をさらに上書きできます。

SWELL公式マニュアル：画像編集の必要なし！便利なカスタムバナー機能の使い方