あずきです🐥
このブログでも愛用中のWordPressテーマ、「WING(AFFINGER5)」における…
各種「ショートコード」のカスタマイズ方法
について、初心者さん向けに1から解説していきます(簡単です♪)
まず「WING(AFFINGER5)」におけるショートコードとは、例えば…
↑ こういったもの
ビジュアルエディタにおける…
↑ この「タグ」のなかから、「マイボックス」や「カスタムボタン」など使いたいパーツデザインを選択すると、専用のショートコードが挿入されます
「ビジュアルエディタってなに…?」という方は、↓ をどうぞ♪
-
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】
続きを見る
で、これらのショートコードの最大の魅力は、「カスタマイズ」できること
テンプレのデザインももちろん便利ですが…
- タイトル名と色
- テキストのフォント
- WEBアイコンの種類と色
- 背景色
はもちろんのこと…
- 枠線の太さ
- 枠線の丸み
- 影のエフェクト
- 光るエフェクト
などなど、本当にさまざまなアレンジを簡単に加えられます
それではさっそく見ていきましょー🐥
このブログのWordPress環境
- 使用中のテーマ:WING AFFINGER5
- 使用中のエディタ:クラシックエディタ
- 使用中のプラグイン:おすすめプラグイン17選 の記事にて公開しています
About me
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
Contents
- 1 AFFINGER5における、各種ショートコードのカスタマイズ方法
- 1.1 url=""【リンク先URLを設定】
- 1.2 title=""【表示タイトルを設定】
- 1.3 rel=""【follow・nofollowを設定】
- 1.4 fontawesome=""【タイトルの頭に、WEBアイコンを挿入】
- 1.5 fontawesome_after=""【タイトル末尾にWEBアイコンを挿入】
- 1.6 target=""【リンク先ページを新規タブで開く設定】
- 1.7 color=""【タイトルのテキスト色を指定】
- 1.8 bgcolor=""【メインエリアの背景色を指定】
- 1.9 bgcolor_top=""【上側エリアの背景色を指定】
- 1.10 bordercolor=""【枠線色を指定】
- 1.11 borderwidth=""【枠線の太さを指定】
- 1.12 borderradius=""【枠線の丸みを指定】
- 1.13 fontsize=""【タイトルのフォントサイズを指定】
- 1.14 fontweight=""【タイトルのフォントの太さを指定】
- 1.15 width=""【ボタンの長さを指定】
- 1.16 shadow=""【ボタン下側に影を入れる】
- 1.17 ref=""【ボタンを光らせる】
AFFINGER5における、各種ショートコードのカスタマイズ方法
今回は例として、「WING(AFFINGER5)」における「カスタムボタン」のショートコードをもとに、コードのカスタマイズ方法を解説していきます
↑ こちらです
このショートコード内に含まれてる、「カスタマイズ項目」の…
- 役割
- カスタマイズ方法
- 具体例
を、1つ1つご紹介していきますね🐥
もちろん「カスタムボタン」以外でも…
↑ この「タグ」のなかから選べるパーツデザインのショートコードについては、基本同じ流れでカスタマイズできます
url=""【リンク先URLを設定】
url="" ⇒ 「リンク先のURL」を設定できます
例) url="https://azuki-sunsun.com/sitemap/"
title=""【表示タイトルを設定】
title="" ⇒ 「タイトル名」を設定できます
例) title="サイトマップはこちら!"
rel=""【follow・nofollowを設定】
rel="" ⇒ リンクの「follow」or「nofollow」を設定できます
「followとnofollowってなに…?」という方は、↓ をどうぞ♪
-
WordPressブログの「FOLLOW」と「NOFOLLOW」とは?設定手順と、使い分けのポイント【記事作成の超基本】
続きを見る
リンクを「nofollow」に設定したい場合は、 rel="nofollow" と入力します
「follow」に設定したい場合は、何も入力しなければOKです
例) rel="nofollow"
fontawesome=""【タイトルの頭に、WEBアイコンを挿入】
fontawesome="" ⇒ タイトル頭に「WEBアイコン」を挿入できます

これらの「WEBアイコン」の専用コードは、ビジュアルエディタ画面の上部にある…
タグ > ショートコード補助 > Webアイコン(クラス)
から好きなパーツを選ぶことで、そのパーツ専用のコードが挿入されます
アイコンを何も挿入したくなければ、何も入力しなければOKです
例) fontawesome="fa-heart"
fontawesome_after=""【タイトル末尾にWEBアイコンを挿入】
fontawesome_after="" ⇒ タイトル末尾に「WEBアイコン」を挿入できます

使い方も、1つ前の fontawesome="" とまったく一緒です
例) fontawesome_after="fa-heart"
target=""【リンク先ページを新規タブで開く設定】
target="" ⇒ 「リンク先のページを新規タブで開くかどうか」を指定できます
新規タブで開く設定にしたい場合は、 target="_blank" と入力します
既存タブで開く設定にしたい場合は、何も入力しなければOKです
例) target="_blank"
color=""【タイトルのテキスト色を指定】
color="" ⇒ 「タイトルのテキスト色」を指定できます

好きな色のカラーコード6桁 #●●●●●● を入力します(頭に # を付けるのを忘れずに!)
例) color="#f7f7f7"
ちなみにこの「カラーコード」というのは、「色見本」系のサイトで簡単にチェックできます(例:「WEB色見本 原色大辞典」様)
bgcolor=""【メインエリアの背景色を指定】
bgcolor="" ⇒ 「メインエリアの背景色」を指定できます

好きな色のカラーコード6桁 #●●●●●● を入力します
例) bgcolor="#f7f7f7"
bgcolor_top=""【上側エリアの背景色を指定】
bgcolor_top="" ⇒ 「上側エリアの背景色」を指定できます

好きな色のカラーコード6桁 #●●●●●● を入力します
例) bgcolor_top="#ffb049"
bordercolor=""【枠線色を指定】
bordercolor="" ⇒ 「枠線色」を指定できます

好きな色のカラーコード6桁 #●●●●●● を入力します
例) bordercolor="#f7f7f7"
borderwidth=""【枠線の太さを指定】
borderwidth="" ⇒ 枠線の「太さ」を指定できます

0, 1, 2のように、数字をどれかしら入力します(細 0, 1, 2, 3, 4, 5… 太)
例) borderwidth="3"
borderradius=""【枠線の丸みを指定】
borderradius="" ⇒ 枠線の四隅の「丸み」を指定できます

0, 1, 2のように、数字をどれかしら入力します(角 0, 1, 2, 3, 4, 5… 丸)
例) borderradius="2"
fontsize=""【タイトルのフォントサイズを指定】
fontsize="" ⇒ タイトルの「フォントサイズ」を指定できます

80%, 90%, 110%, 120%のように、パーセント単位で入力します
何も入力しなければ、標準の100%になります

例) fontsize="80"
fontweight=""【タイトルのフォントの太さを指定】
fontweight="" ⇒ タイトルの「フォントの太さ」を指定できます

太字にしたい場合は、 bold と入力します
標準のままにしたい場合は、何も入力しなければOKです
例) fontweight="bold"
width=""【ボタンの長さを指定】
width="" ⇒ 全体の「長さ」を指定できます

0~100まで、どれかしらの数字を入力(短 0 ~ 100 長)
「100」で、横幅MAXです
例) width="30"
shadow=""【ボタン下側に影を入れる】
shadow="" ⇒ 下側に「影」を入れるかどうかの指定ができます

好きな色のカラーコード6桁 #●●●●●● を入力します
例) shadow="#f7f7f7"
ref=""【ボタンを光らせる】
ref="" ⇒ 「光るエフェクト」を入れるかどうかの指定ができます

光らせたい場合は、 on と入力します
光らせたくない場合は、何も入力しなければOK
例) ref="on"
おしまい♪
あずき🐥
About me
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^