あずきです🐥
このブログでも愛用中のWordPressテーマ、「WING（AFFINGER5）」における…
各種「ショートコード」のカスタマイズ方法
について、初心者さん向けに1から解説していきます（簡単です♪）
まず「WING（AFFINGER5）」におけるショートコードとは、例えば…
↑ こういったもの
ビジュアルエディタにおける…
↑ この「タグ」のなかから、「マイボックス」や「カスタムボタン」など使いたいパーツデザインを選択すると、専用のショートコードが挿入されます
「ビジュアルエディタってなに…？」という方は、↓ をどうぞ♪
-
WordPressの「ビジュアルエディタ＆テキストエディタ」とは？【クラシックエディタにおけるブログ記事編集】
続きを見る
で、これらのショートコードの最大の魅力は、「カスタマイズ」できること
テンプレのデザインももちろん便利ですが…
- タイトル名と色
- テキストのフォント
- WEBアイコンの種類と色
- 背景色
はもちろんのこと…
- 枠線の太さ
- 枠線の丸み
- 影のエフェクト
- 光るエフェクト
などなど、本当にさまざまなアレンジを簡単に加えられます
それではさっそく見ていきましょー🐥
当ブログのWordPress環境
- 使用してるテーマ：WING（AFFINGER5）
- 使用してるエディタ：クラシックエディタ
- 使用してるプラグイン：おすすめプラグイン16選 の記事をどーぞ♪
▼ 当ブログのWordPressテーマ AFFINGER5 ▼
プロフィール
あずき@ブロガー
フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました
・Twitter → @azuki_rinrin
・インスタ → azuki_rinrin
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"
おしまい♪
あずき🐥
▼ 当ブログのWordPressテーマ AFFINGER5 ▼
プロフィール
あずき@ブロガー
フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました
・Twitter → @azuki_rinrin
・インスタ → azuki_rinrin