臨床工学技士による血液透析業務支援。透析効率や栄養、在宅血液透析など透析にかかわる様々なことを発信していきます。訪問看護の立ち上げもご相談ください。

CE Works Project

Wing(Affinger)

バナーボタンの作り方

更新日:

カッコいいバナーボタンを使っているサイト、たくさんありますよね。

Wing機能

装飾タグやバナー風ボックスを解説

かっこいい?とはいえませんが、これの作り方を一から解説します

準備するもの

バナーの背景に使う画像のURL(今回は以下の写真を使います。)

バナーボタンを配置しよう

タグ→ボックスデザイン→バナー風ボックス→基本を選択

[st-flexbox url="" rel="nofollow" target="" 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" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="バナーボタンのデザイン画像のURL" blur="on" left="" margin_bottom="0"]

[/st-flexbox]

このボタンを配置しただけだとこんな感じです。

タイトル

 

いやーとても味気ないですね。

 

外観の設定

ここではバナー風ボタンの外観を決めていきます。

まずは味気ないのでここに画像のURLを入れましょう。

画像のURLを入れる

[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="https://ceworks.info/wp-content/uploads/2019/06/2B1377AD-4215-4F90-B4B3-0413241F2C57.jpeg
" blur="on" left="" margin_bottom="0"]

[/st-flexbox]

タイトル

近づいてきました。次に、タイトルと説明文を入れていきます。

タイトルと説明文

[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="ここにタイトルを入れる" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="https://ceworks.info/wp-content/uploads/2019/06/2B1377AD-4215-4F90-B4B3-0413241F2C57.jpeg" blur="on" left="" margin_bottom="0"]

ここに説明文を入れる

[/st-flexbox]

タイトル:Wing機能
説明文:装飾タグやバナー風ボックスを解説

Wing機能

装飾タグやバナー風ボックスを解説

これだと説明文が背景の色とかぶって読みづらいですね。
文字色の変更を行うと

Wing機能

装飾タグやバナー風ボックスを解説

見た目が完成しました。

クリック時の動作

クリック時の動作

[st-flexbox url="ここにリンクするURLを入れる" rel="nofollow" target="" fontawesome="" title="Wing機能" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="https://ceworks.info/wp-content/uploads/2019/06/2B1377AD-4215-4F90-B4B3-0413241F2C57.jpeg" blur="on" left="" margin_bottom="0"]

装飾タグやバナー風ボックスを解説

[/st-flexbox]

WINGの機能は当サイトでは、https://ceworks.info/category/web/wing/ となっていますので、これを上記赤部に入れます。

Wing機能

装飾タグやバナー風ボックスを解説

これで完成です。

まとめ

バナー風ボタンを作る為に必要なもの

画像URL
リンク先URL
ボタンタイトルと説明文

最初はちょっと戸惑うかもしれませんが、簡単なので作って見て下さい。

  • この記事を書いた人

koch

CE Worksのkochです。全国の透析患者のみなさんや医療従事者のみなさんに、誰が見ても理解できる内容に拘って情報をお届けできるよう努力しています。 また、在宅透析支援も行っています。在宅透析の導入~管理まで、支援する環境が整っておりますので、お話だけでもさせて頂ければ幸いです。

-Wing(Affinger)

Copyright© CE Works Project , 2019 All Rights Reserved.