WORDPRESS

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

AFFINGER5の各種「ショートコード」のカスタマイズ手順 アイキャッチ



あずきです🐥

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

各種「ショートコード」のカスタマイズ方法

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

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

AFFINGER5_ショートコードのカスタマイズ_top-01

↑ こういったもの

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

AFFINGER5_ショートコードのカスタマイズ_top-02

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

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

WordPressの「ビジュアルエディタ&テキストエディタ」とは? アイキャッチ
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】

続きを見る

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

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

  • タイトル名と色
  • テキストのフォント
  • WEBアイコンの種類と色
  • 背景色

はもちろんのこと…

  • 枠線の太さ
  • 枠線の丸み
  • 影のエフェクト
  • 光るエフェクト

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

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

このブログのWordPress環境

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

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

WordPressブログ「完全初心者」ガイド 見出し a-01

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

AFFINGER5_ショートコードのカスタマイズ_1-top-02

↑ こちらです

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

  • 役割
  • カスタマイズ方法
  • 具体例

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

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

AFFINGER5_ショートコードのカスタマイズ_1-top-01

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

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」とは?設定手順と、使い分けのポイント アイキャッチ
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%になります

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

例) 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"

おしまい♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ