The Master of Swift App Coding

Swiftプログラミングでのアプリ作成方法やWordPressのテクニック解説

AFFINGER5で使えるオリジナルのカスタムボタンのショートコード

投稿日:2018年7月19日 更新日:

AFFINGER5で綺麗な色のボタンを設置したい
コピペだけで簡単にボタンを置きたい
こんな疑問に答えていきます。
AFFINGERシリーズを2年間使い倒している僕が解説していきます。

はじめに

AFFINGER5では簡単にボタンを作れる機能が備わっています。
色や形の組み合わせは自分でカスタマイズできます。

僕なりに色にこだわって、何パターンか作ってみました。
コードも載せるので、コピペして使ってみてください。

公式ページのカスタムボタンの説明

AFFINGER5(WING)会員専用ページ
http://affinger5.com/manual/post-5935/

 

ボタンとショートコード

フラットボタン(グラデーションなし、立体フチなし)

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817&preview=true" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#417489" bordercolor="#005B78" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

2

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817e" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#564289" bordercolor="#005B78" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

3

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#6D4289" bordercolor="#1D0077" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

4

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#87427B" bordercolor="#440077" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

5

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#88425A" bordercolor="#78002D" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

6

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#874642" bordercolor="#780500" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

7

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#895442" bordercolor="#771C01" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

8

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#876A42" bordercolor="#784301" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

9

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#877A43" bordercolor="#786000" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

10

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#888542" bordercolor="#787200" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

11

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#738843" bordercolor="#567800" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]

 

12

今すぐチェック

[消すst-mybutton url="https://appcoding.net/?p=817&preview=true" title="今すぐチェック" rel="" fontawesome="" target="blank" color="#fff" bgcolor="#458843" bordercolor="#097800" borderwidth="1" borderradius="5" fontsize="90" fontweight="bold" width="80" fontawesome_after="fa-angle-right" ref=""]


改行に注意

知らないうちに、コード内で改行していると、ずれます。
改行が反映されて、スペースになっちゃいます。
コードとしては見にくですが、最後に改行は消しましょう。

 

高さ指定はなしでOK

ここも作ってて迷っいました。
高さは指定しない方が、スマホの時に自動で収縮してくれます。

Ad-336px-stinger8

Ad-336px-stinger8

-WordPress, デザインテンプレート

Copyright© The Master of Swift App Coding , 2018 All Rights Reserved.