WordPress のテーマ「AFFINGER」には、独自デザインのボタン「STINGER: カスタムボタン」があります。
さらにユーザーの設定によって見た目（デザイン）を変えることができるので、使い方と変更方法を解説します。
ポイント
＼「STINGER: カスタムボタン」／
「STINGER: カスタムボタン」のサンプル
「STINGER: カスタムボタン」を使ったデザインです。
ポイント
標準のデザイン
ポイント
光るボタン
ポイント
フラットデザイン（青）
ポイント
フラットデザイン（赤）
ポイント
フラットデザイン（背景薄青）
ポイント
フラットデザイン（背景薄赤）
基本的には「標準」の赤いリッチデザインのボタンになりますが、ボタンの設定を変えることでフラットデザインなどのように簡単に見た目を変えることができます。
「STINGER: カスタムボタン」の使い方
「STINGER: カスタムボタン」の配置方法
「STINGER: カスタムボタン」はブロックを配置することで使えます。
「STINGER: カスタムボタン」の主な設定
カスタムボタンは右側のブロックの設定項目から詳細を設定します。
主な設定項目です。
| 設定項目 | 初期値 | 概要 |
|---|---|---|
| テキスト | ボタン | ボタン名です。ボタン上に表示す文字列を入力します。 |
| アイコン (前) | （未設定） | ボタン名の左横に表示するアイコンを選択します。初期値は、アイコン無しです。 |
| アイコン (後) | 矢印右 | ボタン名の右側に表示するマークです。初期値は右側を示す矢印です。 |
| テキストサイズ（%） | 100 | ボタン名のフォントの大きさを変更します。一緒にボタンのサイズも変わります。 |
| 太字 | チェック | ボタン名を太字（ボールド）にします。 |
| リンク先 URL | # | ボタンをクリックした場合のページ移動先のURLを指定します。 |
| 影 | 非チェック | ボタンに影を付けます |
| 光る演出 | 非チェック | ボタンに光る演出を追加します。初期値は演出無しです。 |
| 太さ（ボーダー設定） | 0 | ボタンの周りにボーダー（枠線）を引きます。枠線の太さを指定します。 |
| 文字色 | 白 | ボタンの文字色を指定します。 |
| 背景色１ | 赤 | ボタンの背景色を指定します。 |
| 背景色２ | なし | ボタンの色をグラデーションしたい場合に指定します。 |
| ボーダー | 灰色 | ボタンの縁取り（ボーダー色）を指定します。 |
| ボタンシャドウ | 赤 | 影を付ける演出をした場合の、影の色を指定します。 |
標準のデザインで利用した場合は、「テキスト」と「リンク先 URL」だけを設定すれば問題ありません。
※ボタンを光らせたい場合は「光る演出」をチェックします。
「STINGER: カスタムボタン」で「光る演出」をする場合
ポイント
光るボタン
ボタンを光らせる（光る演出）をする設定です。
設定項目「光る演出」をONにすることで、ボタンが光ります。
フラットデザイン
スマホの普及に伴い、インターネット上のデザインもフラット（ひらべったい・淡白な）デザインが主流となりました。
ポイント
フラットデザイン（青）
ポイント
フラットデザイン（赤）
ポイント
フラットデザイン（背景薄青）
ポイント
フラットデザイン（背景薄赤）
フラットデザインにする設定です。
| 設定項目 | フラットボタン （青） | フラットボタン （赤） | フラットボタン （背景薄青） | フラットボタン （背景薄赤） |
|---|---|---|---|---|
| 太字 | 非チェック （しない） | 非チェック （しない） | 非チェック （しない） | 非チェック （しない） |
| 光る演出 | 非チェック （しない） | 非チェック （しない） | 非チェック （しない） | 非チェック （しない） |
| 太さ（ボーダー設定） | 2 | 2 | 2 | 2 |
| 文字色 | 青 | 赤 | 青 | 赤 |
| 背景色１ | 白 | 白 | 薄い青 | 薄い赤 |
| 背景色２ | なし | なし | なし | なし |
| ボーダー | 青 | 赤 | 青 | 赤 |
文字色やボーダーの「青」または「赤」は、100％真っ青（または真っ赤）ではなく、１トーン落とした青（赤）にするのがコツです。
まとめ：STINGER: カスタムボタンの見た目を編集する方法
WordPress のテーマ「AFFINGER」には、独自デザインのボタン「STINGER: カスタムボタン」を使うことで、ボタン風のリンクを表現することができます。
- 「STINGER: カスタムボタン」は 設定でデザインを多様に変えられます
- 「STINGER: カスタムボタン」は 専用のブロックを配置することで使えます
- 設定を変えることでフラットなデザインにすることができます
AFFINGER を使って素敵なサイトをデザインしてくださいね。
Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。
