Affinger5（WordPressテーマ） カスタムボタン・ミニの位置（余白）調整方法

Affinger5 の「カスタムボタン・ミニ」について

WordPress のビジュアルエディタで、「タグ」> 「カスタムボタン」 > 「ミニ」 ＞ ５種類の「ボタン」の一つを選択すると、「ミニ」ボタンのショートコードが下の様に挿入されます。　下のショートコードは、「詳しくはコチラ（レッド）」を選択した場合です。

 shortcode
[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#f44336" ref="" beacon=""]

オペレータ

色々な属性設定ができカスタマイズできますが、残念ながら、ミニボタンの余白（位置）を調整するmargin属性がありませんし、左寄せやセンタリングを指定できませんね！！

手っ取り早く「ミニ」ボタンの余白（位置）を調整する

step
1上下の余白（位置）を調整するには

WordPress のビジュアルエディタからテキストエディタに移行して「ミニ」ボタンのショートコードを下の様に、style 指定した divタグ で囲えば余白調整ができます。

（注記）こちらのAffinger5 の環境では、Pタグで囲うとボタンの縦サイズが大きくなってしまいました。divタグ にすること。

 shortcode
<div style="margin:0 0 0 0 ;">[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#f44336" ref="" beacon=""]</div>

margin:0 0 0 0 は上 右 下 左 の余白 px（ピクセル） に対応しますので、上の余白を30pxに取りたければ、margin:30px 0 0 0 とすればOKです。

今度は、divタグのスタイルを style="text-align:center;"にすれば「ミニ」ボタンがセンタリングし、centerを right にすれば、右寄せできます。

 shortcode
<div style="text-align:center;">[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#f44336" ref="" beacon=""]</div>

オペレータ

一々、テキストエディタに移るのも面倒ですので、PostSnippets プラグインを使って、囲み型ショートコードを作成しておくと便利です。　以下はその作成方法です。

PostSnippetsを使った囲み型ショートコードの作成

PostSnippets Pluginの基本的使い方は、以下の記事を参照してください。

ここでは、PostSnippetsプラグインの設定画面（下の画面）で項目①〜⑥について説明し、囲み型ショートコードを作成して行きます。

①ショートコードの名前を記入：ここでは、mini_BTN_margin としました。

② HTMLコードと{ }で囲った変数を以下の様に記入。は囲み型ショートコードにするために {content} を指定しています。

 HTMLcode
<div style="margin: {up} {right} {down} {left}; text-align:{center} ;">{content} </div>

③ Variablesは　up=0px,right=0px,down=0px,left=0px,center=center　を指定

④ のShortcodeはレ点を入れます。 ⑤ のPHPはレ点を付けません。

⑥ Descriptionは、適当にわかり易いショートコードの説明文を記入します。

以上の設定が終わったらSave ボタンを押して保存すれば、「囲みショートコード」【mini_BTN_margin】が完成します。　

ビジュアルエディタでPost Snippets ボタンを押して、mini_BTN_margin を選択すると、【mini_BTN_margin up="0px" right="0px" down="0px" left="0px" center="center"】が挿入されるので、下の様に「ミニ」ボタンのショートコードの終わりに【/mini_BTN_margin】を付加してサンドイッチします。

 shortcode
[mini_BTN_margin up="0px" right="0px" down="0px" left="0px" center="center"][「ミニ」ボタンのショートコード][/mini_BTN_margin]

囲みショートコードによる「ミニ」ボタンの余白（位置）調整の事例

PostSnippetsプラグインで作成した囲みショートコード【mini_BTN_margin】を使った実例を示します。

 shortcode
[mini_BTN_margin up="50px" right="0px" down="0px" left="0px" center="center"][st-mybutton-mini url="#" title="上に余白50px センタリング配置" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="70" fontweight="bold" fontawesome_after="fa-angle-right" shadow="#f44336" ref="on" beacon=""][/mini_BTN_margin]

 shortcode
[mini_BTN_margin up="0px" right="0px" down="0px" left="0px" center="right"][st-mybutton-mini url="#" title="右寄せ配置" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="70" fontweight="bold" fontawesome_after="fa-angle-right" shadow="#f44336" ref="on" beacon=""][/mini_BTN_margin]

 shortcode
[mini_BTN_margin up="0px" right="0px" down="0px" left="50px" center=""][st-mybutton-mini url="#" title="左に余白50px" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="70" fontweight="bold" fontawesome_after="fa-angle-right" shadow="#f44336" ref="on" beacon=""][/mini_BTN_margin]