AFFINGER5の各種「ショートコード」のカスタマイズ手順を解説【WordPressブログ】

あずきです🐥

このブログでも愛用中のWordPressテーマ、「WING（AFFINGER5）」における…

について、初心者さん向けに1から解説していきます（簡単です♪）

まず「WING（AFFINGER5）」におけるショートコードとは、例えば…

↑ こういったもの

ビジュアルエディタにおける…

↑ この「タグ」のなかから、「マイボックス」や「カスタムボタン」など使いたいパーツデザインを選択すると、専用のショートコードが挿入されます

「ビジュアルエディタってなに…？」という方は、↓ をどうぞ♪

で、これらのショートコードの最大の魅力は、「カスタマイズ」できること

テンプレのデザインももちろん便利ですが…

はもちろんのこと…

などなど、本当にさまざまなアレンジを簡単に加えられます

それではさっそく見ていきましょー🐥

AFFINGER5における、各種ショートコードのカスタマイズ方法

今回は例として、「WING（AFFINGER5）」における「カスタムボタン」のショートコードをもとに、コードのカスタマイズ方法を解説していきます

↑ こちらです

このショートコード内に含まれてる、「カスタマイズ項目」の…

を、1つ1つご紹介していきますね🐥

もちろん「カスタムボタン」以外でも…

↑ この「タグ」のなかから選べるパーツデザインのショートコードについては、基本同じ流れでカスタマイズできます

url=""【リンク先URLを設定】

url=""　⇒　「リンク先のURL」を設定できます

title=""【表示タイトルを設定】

title=""　⇒　「タイトル名」を設定できます

ここのタイトルのこと！

rel=""【follow・nofollowを設定】

rel=""　⇒　リンクの「follow」or「nofollow」を設定できます

「followとnofollowってなに…？」という方は、↓ をどうぞ♪

リンクを「nofollow」に設定したい場合は、　rel="nofollow"　と入力します

「follow」に設定したい場合は、何も入力しなければOKです

fontawesome=""【タイトルの頭に、WEBアイコンを挿入】

fontawesome=""　⇒　タイトル頭に「WEBアイコン」を挿入できます

サンプルボタン

↑ ハートアイコンをつけてみたよ！

これらの「WEBアイコン」の専用コードは、ビジュアルエディタ画面の上部にある…

から好きなパーツを選ぶことで、そのパーツ専用のコードが挿入されます

アイコンを何も挿入したくなければ、何も入力しなければOKです

fontawesome_after=""【タイトル末尾にWEBアイコンを挿入】

fontawesome_after=""　⇒　タイトル末尾に「WEBアイコン」を挿入できます

サンプルボタン

↑ 電球アイコンをつけてみたよ！

使い方も、1つ前の　fontawesome=""　とまったく一緒です

target=""【リンク先ページを新規タブで開く設定】

target=""　⇒　「リンク先のページを新規タブで開くかどうか」を指定できます

新規タブで開く設定にしたい場合は、　target="_blank"　と入力します

既存タブで開く設定にしたい場合は、何も入力しなければOKです

color=""【タイトルのテキスト色を指定】

color=""　⇒　「タイトルのテキスト色」を指定できます

サンプルボタン

↑ タイトルを赤色にしてみたよ！

好きな色のカラーコード6桁　#●●●●●●　を入力します（頭に　#　を付けるのを忘れずに！）

ちなみにこの「カラーコード」というのは、「色見本」系のサイトで簡単にチェックできます（例：「WEB色見本 原色大辞典」様）

bgcolor=""【メインエリアの背景色を指定】

bgcolor=""　⇒　「メインエリアの背景色」を指定できます

サンプルボタン

↑ メイン背景を赤色にしてみたよ！

好きな色のカラーコード6桁　#●●●●●●　を入力します

bgcolor_top=""【上側エリアの背景色を指定】

bgcolor_top=""　⇒　「上側エリアの背景色」を指定できます

サンプルボタン

↑ 上側エリアの背景を赤色にしてみたよ！

好きな色のカラーコード6桁　#●●●●●●　を入力します

bordercolor=""【枠線色を指定】

bordercolor=""　⇒　「枠線色」を指定できます

サンプルボタン

↑ 枠線を赤色にしてみたよ！

好きな色のカラーコード6桁　#●●●●●●　を入力します

borderwidth=""【枠線の太さを指定】

borderwidth=""　⇒　枠線の「太さ」を指定できます

サンプルボタン

↑ 枠線を太くしてみたよ！

0, 1, 2のように、数字をどれかしら入力します（細　0, 1, 2, 3, 4, 5…　太）

borderradius=""【枠線の丸みを指定】

borderradius=""　⇒　枠線の四隅の「丸み」を指定できます

サンプルボタン

↑ 四隅を四角くしてみたよ！

0, 1, 2のように、数字をどれかしら入力します（角　0, 1, 2, 3, 4, 5…　丸）

fontsize=""【タイトルのフォントサイズを指定】

fontsize=""　⇒　タイトルの「フォントサイズ」を指定できます

サンプルボタン

↑ フォントサイズを小さくしてみたよ！

80%, 90%, 110%, 120%のように、パーセント単位で入力します

何も入力しなければ、標準の100%になります

「%」の記号は入れなくてOK！

fontweight=""【タイトルのフォントの太さを指定】

fontweight=""　⇒　タイトルの「フォントの太さ」を指定できます

サンプルボタン

↑ 太字から標準に変えてみたよ！

太字にしたい場合は、　bold　と入力します

標準のままにしたい場合は、何も入力しなければOKです

width=""【ボタンの長さを指定】

width=""　⇒　全体の「長さ」を指定できます

サンプルボタン

↑ ボタンを短くしてみたよ！

0～100まで、どれかしらの数字を入力（短　0　～　100　長）

「100」で、横幅MAXです

shadow=""【ボタン下側に影を入れる】

shadow=""　⇒　下側に「影」を入れるかどうかの指定ができます

サンプルボタン

↑ 影を赤色にしてみたよ！

好きな色のカラーコード6桁　#●●●●●●　を入力します

ref=""【ボタンを光らせる】

ref=""　⇒　「光るエフェクト」を入れるかどうかの指定ができます

サンプルボタン

↑ 光る加工をなくしてみたよ！

光らせたい場合は、　on　と入力します

光らせたくない場合は、何も入力しなければOK

おしまい♪

あずき🐥