MENU
カテゴリー
【新年度応援セール!】期間限定で 20%OFF!

画像編集の必要なし!便利なカスタムバナー機能の使い方

2019 4/09
画像編集の必要なし!便利なカスタムバナー機能の使い方
記事上のウィジェットエリア

SWELLではショートコードを使って簡単にバナー画像を作成することができます。

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

カスタムバナーの使い方

ショートコードの呼び出しキーは[custom_banner]もしくは[カスタムバナー]です。

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

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


上記の属性値をうまく組み合わせると、以下のようなバナー画像も作成可能です。

上のバナーのショートコード

[カスタムバナー img_id="1446" title="サイズも調整可能!" text="ブラー効果やシャドウも簡単につけれます。" height="320px" width="80%" blur="on" shadow="on" link="https://swell-theme.com/" icon="icon-checkmark"]

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

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

IDの指定方法
  • 投稿ページ:post_id=""
  • カテゴリーページ:cat_id=""
  • タグページ:tag_id=""

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

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

[カスタムバナー post_id="投稿ID"]

[カスタムバナー post_id="カテゴリーID"]

※上記の2列表示はカスタムバナーの機能ではなく、カラムブロックを利用したものです。

記事下のウィジェットエリア

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

目次
閉じる