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

スポンサーリンク

 

 

カスタムボタン・ミニ
(ボタン位置のカスタマイズ例)

WordPressの有料テーマ Affinger5 のカスタムボタンの中で一番使い勝手が良い「ミニ」ボタンを多用しています。

でもこの「ミニ」ボタンは上下余白(margin)や右寄せ、センタリングを指定する(属性)設定がありません。 

そこで、カスタムボタンの「ミニ」を中心にボタン位置の設定方法をご参考迄に紹介します。

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

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

[/] 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=""]

ブラウザで見るとミニ・ボタンが
左寄せで配置されます。

ミニボタン・ポイント

ショートコードの属性と "" 内の指定

  • url="#" :頁内のアンカー先 または、リンク先のURL
  • title="詳しくはコチラ" :ボタンに表示するテキスト
  • rel="" :通常は無指定、relation(関係を示す)
  • fontawesome="" :Webアイコンをタイトルの(前)に設置
  • target="_blank" :アンダーバーを削除するとリンク先が新しいWindowで開く
  • color="#fff" :タイトル(テキスト)の文字色
  • bgcolor="#ef5350" :ボタンの背景色
  • bgcolor_top="" :背景色(上)
  • bordercolor="" :境界線の色
  • borderwidth="" :境界線の幅 px
  • borderradius="5" :角Rの指定
  • fontsize="" :タイトルの文字サイズ(%)文字サイズに合わせてボタンサイズも変化
  • fontweight="" :文字強調でboldを指定 デフォルトはnormal
  • fontawesome_after="fa-angle-right" :Webアイコンをタイトルの(後)に設置
  • shadow="#f44336" :影色指定
  • ref="" :on でキラリと光るアニメ指定
  • beacon="" :計測用imgを出力する属性(URL指定)
オペレータ
色々な属性設定ができカスタマイズできますが、残念ながら、ミニボタンの余白(位置)を調整する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です。

step
2
右寄せやセンタリングを行うには

今度は、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プラグインの設定画面(下の画面)で項目①〜⑥について説明し、囲み型ショートコードを作成して行きます。

Post Snippetsの設定画面

ショートコードの名前を記入:ここでは、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】を使った実例を示します。

事例-1

[/] 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]

事例-2

[/] 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]

事例-3

[/] 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]
以上、Affinger5(WordPressテーマ) カスタムボタン・ミニの位置(余白)調整方法でした。 ご参考にして頂ければと思います。

スポンサーリンク

 

関連記事(一部広告含む)

 

オススメ記事

レコードのハイレゾ化
オススメ記事

LPレコードのハイレゾ化のススメ(ハイレゾ録音のヒント集)

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

MCカートリッジとMMカートリッジの音質比較

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

DENON MCカートリッジ DL103Rのクロストーク「 原理編」

今更ながら、「我が家のB級プレーヤ」に取り付けた「DL103Rカートリッジのクロストーク(セパレーション)をテストレコード(AD-1 2面のバンド4:基準レベル、1kHz、3.54cm/sec(尖頭値 ...

テストレコード(AD-1)で出来ること

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

レコードをハイレゾ化するならDSDかPCMか?

ことの 発 端 ことの発端は、あるハイレゾDLサイトから、チャイコのバイオリンコンチェルトをPCM(Flacファイル 192Khz、24Bit)で購入しました。WAVファイルも平行販売されています。 ...

CD音質関連 その他
オススメ記事

アナログ・レコードのここがダメ「CD音質と比較して」

これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあまり言いたくは ...

CD音質のここがダメ「ハイレゾ(24bit)と比較して」

CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...

CD音質を凌ぐ?「ハイレゾ音源のAAC変換」を行うために

XLDサイトへ AAC (Advanced Audio Coding)音質はビットレートを最高品質の320kbpsでAAC変換しても漠然とCD音質には及ばないと思っていました。 ところが、ピュアー音源 ...

Apple Digital MastersのAAC音質(その1)

2019年7月付けの「Apple Digital Masters テクノロジー概要」によれば、iTunesやApple Musicで配信される楽曲は、「Apple Digital Masters テク ...

Post Snippets Pluginで出来ること(小技・事例集)

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わら ...

© 2021 ハイレコのブログ Powered by AFFINGER5