お知らせ

ブログやホームページで「バナー」のようなボタンを簡単に作る方法

投稿日:

こんなバナーを作りたい

できれば説明も入れたい

ブログでもサイトでも必ず欲しくなる「バナー」

アザらん
好きな画像を背景にして、好きな文字や説明の入ったバナーが簡単に作れたらなぁ!

そう思うことは少なくないのではないでしょうか?

でも、

アザらん
Photoshopとか難しい!
コン太
そもそもツールで作るのもメンドクサイ!

それが本音ですよね。

できれば投稿画面で「サクッ」と作りたい。

こんなバナーや

詳しい御案内はこちら

料金プランやサービスについて

カスタムボタンとの組み合わせでサイドバーに使えそうなバナーとか

泣ける!
漫画ランキング

本屋さんが選んだ泣けるマンガランキング1位は?

今すぐCHECK

シンプルに左寄せのバナーも可能です。

シンプルなバナー

WINGなら「簡単に」作れます

※当記事はWordPressテーマ「WING(AFFINGER5又はSTINGER PRO2)ver20180613以上」を対象としています

ショートコードで簡単バナー

WINGなら、

  1. 背景にしたい画像や色
  2. リンクしたいURL
  3. 表示したいテキスト

などを指定するだけで簡単にバナー風ボタンを作ることができます。

step
1
「バナーボックス」をクリック

step
2
「バナーボックス」をクリック

ショートコードで設定を決定

[st-flexbox url="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]

テキスト

[/st-flexbox]

各設定の意味

[st-flexbox url="リンク先のURL" fontawesome="アイコン" title="大きいタイトル" width="横幅" height="高さ" color="タイトルの色" fontsize="文字サイズ" radius="角丸" shadow="タイトルの影" bordercolor="枠線の色" borderwidth="枠線の太さ" bgcolor="背景色" backgroud_image="背景にしたい画像のURL" blur="ぼかしの有無" left="左寄せ" margin_bottom="0"]

ここに説明とかコンテンツを追加

[/st-flexbox]

背景にしたい画像のURLは「メディア」で確認できます。

アザらん
アイコンとか色とかもわからないし調べるのも面倒だわ
シカ子
大丈夫!クリック1つで挿入できるわよ

step
3
完成!

こんなバナーを作りたい

できれば説明も入れたい

[st-flexbox url="http://the-money.net/kantan_banar/" fontawesome="" title="こんなバナーを作りたい" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="" backgroud_image="http://the-money.net/stinger/wp-content/uploads/2018/05/shutterstock_464412665s-.jpg" blur="on" left="" margin_bottom="10"]できれば説明も入れたい[/st-flexbox]

背景画像の「ぼかし」はIEなど一部のブラウザやバージョンにより反映されません

マニュアルを見る(WINGユーザー専用)

ad

新プラグイン続々登場!「ステ子フェス」開催中!

便利プラグイン情報

WING WordPress プラグイン

2018/6/16

外部URLのコピペでブログカードをサムネイル付きで表示するWordPressプラグイン

URLを指定するだけでブログカード風のリンクにします。 外部のサイトも自動スクリーンショットによりサムネイル表示が可能です。 【サンプル例】 プラグインの使い方と注意事項 インストール ダウンロードした「st_card_url_file.zip」を一度だけ解凍して、中の「st-card-ex.zip」をZipファイルのままWordPressの「プラグイン」>「新規追加」よりアップロードして有効化して下さい。 テーマ設定 プラグインを有効化するとエディタに新しく「カードURL」というボタンが追加されます 任 ...

ReadMore

WING WordPress プラグイン

2018/6/16

投稿ごとに記事をバックアップ(エクスポート)できるWordPressプラグイン

シカ子あ~!前の文章の方が良かった!! ブログやアフィリエイトで反応(CVR)を見ていると、そう思うことは少なくないのではないでしょうか? ユーザーに行動を起こさせる文章はほんの少しの言い回しの変化で良くも悪くも大きく効果が変わります。そんな時に絶対に必要なのが「バックアップ」。いつでも簡単に1クリックでそれを行うことができたら、しかも「年月、時間、記事タイトル-サイト名」としてテキストファイルを残せたら凄く便利ではないでしょうか? 記事バックアップ「安心くん」はそんな想いから生まれました。 いつでも、ど ...

ReadMore

WING WordPress プラグイン

2018/6/16

記事(コンテンツ)内容を一括で置換するWordPressプラグイン

投稿画面のテキストモードの記事内容を一括置換します。gu検索フラグの正規表現にも対応。 例えばアップデートで挿入されるようになったTinyMCEAdvancedの不要なtableタグも簡単に削除でき便利です。 プラグインの使い方と注意事項 インストール ダウンロードした「st_replace_file.zip」を一度だけ解凍して、中の「st-replace-meta-box.zip」をZipファイルのままWordPressの「プラグイン」>「新規追加」よりアップロードして有効化して下さい。 専用フォームの ...

ReadMore

WING WordPress プラグイン

2018/6/16

iframe対応!SEOを配慮した遅延読込WordPressプラグイン「LasyLoadSEO」

SEOを配慮した遅延読込プラグインです。 通常のLazyLoadでは画像がスクロールされるまで表示されないため、Googleのロボットには「画像が無い」と判断されています。このプラグインでは<noscript>を付与することで遅延読込を行いつつ、画像の有無も認識させることができます。 また、iframeにも対応しているため多数のYouTube動画を貼り付けている記事などにも効果的です。 アザらんLasyLoad(遅延読込)はサイト表示速度の改善に効果があるとして人気なんだけど、Googleには ...

ReadMore

AFFINGER4 お知らせ バージョンアップ プラグイン

2017/9/23

AFFINGER4タグ管理マネージャー ver20170923アップデートのお知らせ

「AFFINGER4タグ管理マネージャー」をver20170923にアップデート致しました。ご購入済みユーザー様は無料でアップデートして頂けます。 参考AFFINGERタグ管理マネージャーについて 【主なアップデート内容】 ログ一覧で「ホスト名」が確認できるように UA(ユーザーエジェント)及びOSのother一括によるフィルタ除外の追加 ダウンロードに関する詳細は以下のページをご確認下さい。 https://on-store.net/contact/aftm-from/aftm-topics/ ※閲覧に ...

ReadMore

お知らせ バージョンアップ プラグイン

2017/9/1

「AFFINGERタグ管理マネージャー」「STINGERタグ管理プラグイン」「ABテストプラグイン」をアップデート致しました(ver20170828)

「AFFINGERタグ管理マネージャー」「STINGERタグ管理プラグイン」「ABテストプラグイン」をアップデート致しました 購入済みユーザー様のアップデート期限は平成29年9月14日までです。御注意下さいませ(商品はアップデート保証を行っておりません) ver20170828 「AFFINGERタグ管理マネージャー」「STINGERタグ管理プラグイン」 ※画像は「AFFINGERタグ管理マネージャー」 一覧の「スラッグ」のショートコード表示 IDに加えて「スラッグ」による検索の対応 他 「ABテストプラ ...

ReadMore

-お知らせ

Copyright© AFFINGER(WING) , 2018 All Rights Reserved.