ウェブ制作

WING(AFFINGER5)のキラリと光るボタンを自在に操る

投稿日:2019年2月12日 更新日:

ボタンのイメージ画像

こんにちは、ブジカエル(@buji_kaeru)です。

このブログや他のアフィリサイト全てで、今のところWING(AFFINGER5)を使っています。

隠すつもりは全然ないし、むしろ自分の支持するテーマが今後も広がれば私にいいことがありそうなので、このブログではフッタのクレジットも敢えて消していません。

HTMLページを作るにしても、WordPressで記事を書くにしても、あまり飾りつけをする方ではないのですが、WING(AFFINGER5)の光るボタンは有効に利用したいと思っています。

思っているのですが、なぜかこの光るボタンの入れ方が毎度わからなくて、WING(AFFINGER5)の公式ページに行って、ボタン部分のソースをコピペして入れたりしていました。

ブジカエル
何のためのクラシックエディタだ。

WING(AFFINGER5)公式サイトやマニュアルに掲載されていたのかもしれませんが、見つけられなかったので、自分でいじってみて光らせられるようになりました。今後WING(AFFINGER5)を購入する人にとってもご参考となれば幸いです。

エディタでクリック、で入れられる。

あまり意識しないでボタンを使っていたのですが、今日ようやく法則がわかりました。

エディタのタグ>カスタムボタン から入れるコードの最後「ref=""」の部分で、""にonを入れれば光るし、入れなければ光らない。

というだけのことでした。

「ref="on"」にすれば、光る意味があまりなさそうなノーマルボタンすら光っているふりをしている風になります。

ノーマルボタン

オレンジのボタンも

ボタン

詳しくはコチラボタンも

青いお問合せのボタンも

薄いグレーの目立たないボタンも

「ref="on"」にすれば、みんな光れちゃうのでした。

ちなみに、光らないとこんな感じ。

光るのやめたノーマルボタン

光るのやめたオレンジのボタン

ボタン

光るのやめた詳しくはコチラ

光るのやめた青いお問合せのボタン

光るのやめた薄いグレーの目立たないボタン

ミニボタンも光れる。

デフォルトでは光らないミニボタン。

でも、ref="on"にすればミニボタンも光れます。

やったー!

あとは色を調整して、自在に自分好みに!

デフォルトでもある程度の色の種類がありますが、デザインにこだわる場合は色調整が必須。

コードを見れば分かる方が多いかもしれませんが、一応ボタンのコードの中身について書いておきます。
それぞれ""の中に色のコードを入れれば、好きなようにアレンジできます。

color="文字の色"
bgcolor="背景の色"
bgcolor_top="背景色の、上の方" ※グラデーションの時に使うんだと思います。
bordercolor="ボタンの周りの線の色"
shadow="ボタンの影の色"

ちなみに以下は色ではありませんが、数字を調整するとアレンジの幅がさらに広がります。

borderwidth="ボタンの周りの線の太さ"
borderradius="ボタンの四隅の丸み" ※数字が大きいほど丸くなります。
fontsize="文字の大きさ"
fontweight="文字の太さ"
width="ボタンの幅"

上記の属性は、ボタンだけではなく、HTMLやCSS全般に共通で使えるものが多いので(ちょっと違うのもあるけど、ほぼ同じ)、覚えて慣れてしまえばサイト全体のカスタマイズが楽しくなるかもしれません。

と書いている私は、ウェブサイトのデザインやカスタマイズは面倒に感じるタチで、なるべくやりたくない派だったりしますが。

なお、色のコードを知りたい時、私はいつも下記サイトにお世話になっています。
https://www.colordic.org/
昔からあるので慣れているから使い続けているだけかもしれませんが、個人的にはとても便利で使いやすいと思うので、それなりにハードユーザです。

-ウェブ制作
-

Copyright© ブジカエルブログ , 2020 All Rights Reserved Powered by AFFINGER5.