AFFINGER5の記事作成パーツ（タグ編②）

きのぷー

先日ご紹介した「WING」の記事作成パーツ紹介第３弾。今日はタグ編第２回をお届けします。

販売元サイト

AFFINGER（WING）

AFFINGER（WING）

https://the-money.net

「稼ぐ」に特化したアフィリエイトテーマ

カスタムボタン

幅や色、アイコンなどボタンごとに自由なカスタマイズが可能。

ノーマルタイプ

基本形

ボタン

[st-mybutton url="#" title="ボタン" rel="" fontawesome="" target="" color="#000000" bgcolor="#FFF" bgcolor_top="" bordercolor="#CCC" borderwidth="3" borderradius="0" fontsize="" fontweight="" width="100" fontawesome_after="" shadow="" ref=""]

詳しくはコチラ（オレンジ）

※左から右へ✨キラーン✨って光ります

詳しくはコチラ

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#FFB300" ref="on"]

詳しくはコチラ（レッド）

詳しくはコチラ

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="bold" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#c62828" ref="on"]

詳しくはコチラ（グリーン）

詳しくはコチラ

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#43A047" bgcolor_top="#66BB6A" bordercolor="#81C784" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#388E3C" ref="on"]

詳しくはコチラ（ブルー）

詳しくはコチラ

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#039BE5" ref="on"]

お問い合わせ

[st-mybutton url="#" title="お問い合わせ" rel="" fontawesome="fa-envelope" target="" color="#fff" bgcolor="#03A9F4" bgcolor_top="#14b4fc" bordercolor="#039BE5" borderwidth="1" borderradius="5" fontsize="" fontweight="" width="90" fontawesome_after="" shadow="#039BE5" ref="on"]

もっと詳しく（オレンジ）

もっと詳しく

[st-mybutton url="#" title="もっと詳しく" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFD54F" bgcolor_top="#ffdb69" bordercolor="#FFEB3B" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="fa-angle-right" shadow="" ref="on"]

もっと詳しく（ピンク）

もっと詳しく

[st-mybutton url="#" title="もっと詳しく" rel="" fontawesome="" target="" color="#fff" bgcolor="#F48FB1" bgcolor_top="#f6a6c1" bordercolor="#F48FB1" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="fa-angle-right" shadow="" ref="on"]

もっと詳しく（ブルー）

もっと詳しく

[st-mybutton url="#" title="もっと詳しく" rel="" fontawesome="" target="" color="#fff" bgcolor="#4FC3F7" bgcolor_top="#67cbf8" bordercolor="#4FC3F7" borderwidth="1" borderradius="30" fontsize="85" fontweight="" width="90" fontawesome_after="fa-angle-right" shadow="" ref="on"]

ミニタイプ

基本形

ボタン

[st-mybutton-mini url="#" title="ボタン" rel="" fontawesome="" target="" color="#000000" bgcolor="#f3f3f3" bgcolor_top="" borderradius="3" fontsize="" fontweight="" fontawesome_after="" shadow="#BDBDBD" ref=""]

詳しくはコチラ（オレンジ）

詳しくはコチラ

[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="" color="#fff" bgcolor="#FFB74D" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#FFB300" ref=""]

詳しくはコチラ（レッド）

詳しくはコチラ

[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#f44336" ref=""]

詳しくはコチラ（グリーン）

詳しくはコチラ

[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#9CCC65" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#8BC34A" ref=""]

詳しくはコチラ（ブルー）

詳しくはコチラ

[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#4FC3F7" bgcolor_top="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#03A9F4" ref=""]

MCボタン（AFFINGER又はEX版のみ）

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

[st-mcbutton url="#" title="今すぐ申し込む" rel="" fontawesome="" target="" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#c62828" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="太字のテキスト"]※マイクロコピーを書いてみよう[/st-mcbutton]

会話ふきだし

設定数最大8件。ワンクリックで呼び出すことが可能。

歌津りょう

ここにテキストを入力

志津川美帆

きのぷー

ここにテキストを入力

[st-kaiwa1]ここにテキストを入力[/st-kaiwa1] [st-kaiwa2 r]ここにテキストを入力[/st-kaiwa2] [st-kaiwa3]ここにテキストを入力[/st-kaiwa3] [st-kaiwa4 r]ここにテキストを入力[/st-kaiwa4] [st-kaiwa5]ここにテキストを入力[/st-kaiwa5] [st-kaiwa6 r]ここにテキストを入力[/st-kaiwa6] [st-kaiwa7]ここにテキストを入力[/st-kaiwa7] [st-kaiwa8 r]ここにテキストを入力[/st-kaiwa8]

レイアウト

PCとTab3分割

<div class="clearfix responbox33"> <div class="lbox"> <p><img src="#" width="100%" /></p> </div> <div class="lbox"> <p><img src="#" width="100%" /></p> </div> <div class="lbox"> <p><img src="#" width="100%" /></p> </div> </div>

PCとTab左右40：60%

<div class="clearfix responbox"> <div class="lbox"> <p><img src="#" width="100%" /></p> </div> <div class="rbox"> <p><img src="#" width="100%" /></p> </div> </div>

PCとTab左右50%

<div class="clearfix responbox50"> <div class="lbox"> <p><img src="#" width="100%" /></p> </div> <div class="rbox"> <p><img src="#" width="100%" /></p> </div> </div>

PCとTab左右30：70%

<div class="clearfix responbox30 smart30"> <div class="lbox"> <p><img src="#" width="100%" /></p> </div> <div class="rbox"> <p><img src="#" width="100%" /></p> </div> </div>

全サイズ左右50%

<div class="clearfix responbox50 smart50"> <div class="lbox"> <p><img src="#" width="100%" /></p> </div> <div class="rbox"> <p><img src="#" width="100%" /></p> </div> </div>

均等横並び

<div class="kintou"> <ul> <li><img src="#" width="100%" /></li> <li><img src="#" width="100%" /></li> <li><img src="#" width="100%" /></li> </ul> </div>

その他パーツ

タブ(AFFINGER又はEX版のみ）

タブ1タブ2

タブ1のコンテンツ

んごおおー！

[st-tab-content memo="全体を包むボックスです"] [st-input-tab text="タブ1" bgcolor="#fff" color="#1a1a1a" fontweight="" width="45" value="1" checked="checked"][st-input-tab text="タブ2" bgcolor="#fff”" color="#1a1a1a" fontweight="" width="45" value="2" checked=""][st-tab-main bgcolor="" bordercolor="" value="1"] <div style="padding: 20px; background: #fafafa;"> <p>タブ1のコンテンツ</p> </div> [/st-tab-main][st-tab-main bgcolor="" bordercolor="" value="2"] <div style="padding: 20px; background: #fafafa;"> <p>タブ2のコンテンツ</p> </div> [/st-tab-main][/st-tab-content]

スター

[star5] [star45] [star4] [star35] [star3] [star2] [star1]

年月（EX版のみ）

[st-date]

[[st-date]]

画像付きコメント(AFFINGER又はEX版のみ）

タイトル

◯代男性

これはダミーのテキストです

[st-user-comment-box title="タイトル" user_text="◯代男性" color="" star="5"]<img class="alignnone size-st_kaiwa_image wp-image-6206" src="#" alt="" width="60" height="60" />[/st-user-comment-box] <p>ここにテキストを入力</p>

タイトル

◯代男性

これはダミーのテキストです

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#f3f3f3" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"] [st-user-comment-box title="タイトル" user_text="◯代男性" color="" star="4"]<img class="alignnone size-st_kaiwa_image wp-image-6206" src="#" alt="" width="60" height="60" />[/st-user-comment-box] <p>ここにテキストを入力</p> [/st-mybox]

YouTube動画の貼り付け

直接URLを貼り付ける方法

レスポンシブな動画として自動表示。

サムネイルをリンク

IDを指定し「サムネイル画像」リンクとして表示。
複数でも表示が遅くなるのを軽減できるが、クリックするとYouTubeに飛んでしまう点に注意。

[youtube id=2MNL2mU8pBE]

三角（下矢印、カラー変更可）

[st-under-t color="#000"]

スクロールナビ(AFFINGER又はEX版のみ）

<div id="st_listnavi_wrapper"> <ul class="st-sc-listnavi-box"> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> <li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li> </ul> </div>

カテゴリ一覧

任意のカテゴリの一覧を所定内であれば好きな位置に表示できます。
表示する記事数やカテゴリの除外、閲覧サイズによる列数の指定（3~1）などが可能。

: 高速バス体験記（北日本限定）

地元民が函館駅前バスターミナルを詳しく解説！

2022/9/30

きのぷー今日は、函館駅前バスターミナルについて、詳しくご紹介します(*> ᴗ •*)ゞ函館駅は「改札が１箇所、かつ、地上にあるので階段やエレベータを使わなくていい、導線もシンプル」と、観光客 ...

: Duolingo奮戦記

Duolingo 英語学習記録 Unit2-9 私の一日

2022/9/26

きのぷーDuolingo Unit2の9つめのカテゴリは「私の一日」です。ここでは、毎日、毎朝の習慣に関する表現を中心に学習します。顔を洗う、〜を食べる、宿題をすると言った行動面の他、「〜はつまらな ...

: Duolingo奮戦記

Duolingo 英語学習記録 Unit2-8 天気

2022/9/16

きのぷーDuolingo Unit2の8つめのカテゴリは「天気」です。ここでは、天候に関する表現や季節感を表す表現を中心に学習します。早速いってみましょう！予めご了承下さい核になる表現はそのま ...

: Duolingo奮戦記

Duolingo 英語学習記録 Unit2-7 方向

2022/9/16

きのぷーDuolingo Unit2の7つめのカテゴリは「方向」です。ここでは、「左右に曲がって！」「道に迷いました」「郵便局はここから3マイルです」など、方向に関する表現を中心に学習します。これ ...

: Duolingo奮戦記

Duolingo Unit2-6 パーティー傾向と対策

2022/9/26

きのぷーDuolingo Unit2の6つめのカテゴリは「パーティー」です。ここでは、「お誕生日おめでとう！」「ワクワクしています」「このプレゼントは最高です！」と言った、パーティーに関する表現を中 ...

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore"]

カテゴリ一覧スライドショー

上記の一覧を簡易にスライドショーに変えることもできます。

高速バス体験記（北日本限定）

2022/9/30

地元民が函館駅前バスターミナルを詳しく解説！

きのぷー今日は、函館駅前バスターミナルについて、詳しくご紹介します(*> ᴗ •*)ゞ函館駅は「改札が１箇所、かつ、地上にあるので階段やエレベータを使わなくていい、導線もシンプル」と、観光客の皆さんにとってわかりやすいところが強みだと思っております。駅ビルの目の前にバス乗り場とタクシー乗り場がありますので、目的地へのアクセスが超便利です！現役バリバリの地元民ならではの視点で情報をお届けしますよ！是非最後までお付き合い下さい(＾∀＾)ノ早速いってみましょう！予めご了承下さい 2022年9月2 ...

Duolingo奮戦記

2022/9/26

Duolingo 英語学習記録 Unit2-9 私の一日

きのぷーDuolingo Unit2の9つめのカテゴリは「私の一日」です。ここでは、毎日、毎朝の習慣に関する表現を中心に学習します。顔を洗う、〜を食べる、宿題をすると言った行動面の他、「〜はつまらない」と言った表現も登場します。早速いってみましょう！予めご了承下さい核になる表現はそのままで、単語や細かな言い回し等が変わることもございます日本語及び英語の文章表記は、公式の表現をそのまま使用しております最新の情報につきましては、公式ホームページやアプリをご確認下さい参考情報としてご利用ください。 ...

Duolingo奮戦記

2022/9/16

Duolingo 英語学習記録 Unit2-8 天気

きのぷーDuolingo Unit2の8つめのカテゴリは「天気」です。ここでは、天候に関する表現や季節感を表す表現を中心に学習します。早速いってみましょう！予めご了承下さい核になる表現はそのままで、単語や細かな言い回し等が変わることもございます日本語及び英語の文章表記は、公式の表現をそのまま使用しております最新の情報につきましては、公式ホームページやアプリをご確認下さい参考情報としてご利用ください。本情報のご利用に基づくいかなる損害に対しても責任は負いかねます本ユニットで登場した表現別の ...

Duolingo奮戦記

2022/9/16

Duolingo 英語学習記録 Unit2-7 方向

きのぷーDuolingo Unit2の7つめのカテゴリは「方向」です。ここでは、「左右に曲がって！」「道に迷いました」「郵便局はここから3マイルです」など、方向に関する表現を中心に学習します。これまでに登場したカテゴリ同様、構文の基本的な形はシンプルですが、似たような単語の組み合わせがとっかえひっかえ登場してしてきます。早速いってみましょう！予めご了承下さい核になる表現はそのままで、単語や細かな言い回し等が変わることもございます日本語及び英語の文章表記は、公式の表現をそのまま使用しております ...

Duolingo奮戦記

2022/9/26

Duolingo Unit2-6 パーティー傾向と対策

きのぷーDuolingo Unit2の6つめのカテゴリは「パーティー」です。ここでは、「お誕生日おめでとう！」「ワクワクしています」「このプレゼントは最高です！」と言った、パーティーに関する表現を中心に学習します。これまでに登場したカテゴリ同様、構文の基本的な形はシンプルですが、似たような単語の組み合わせがとっかえひっかえ登場してしてきます。早速いってみましょう！予めご了承下さい核になる表現はそのままで、単語や細かな言い回し等が変わることもございます日本語及び英語の文章表記は、公式の表現をその ...

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore"]

角丸背景

角丸のマイボックスを設定します。

[st-mybox title="" fontawesome="" color="#757575" bordercolor="#f3f3f3" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold"] <p>ここにテキストを入力</p> [/st-mybox]

ボタンA・ボタンB

HTMLでボタンデザインA・Bを挿入
※AFFINGERの場合「ランキング管理」＞「CSS」でカラーを変更可

ボタンA

<div class="rankstlink-r2"> <p><a href="#">ボタンA</a></p> </div>

ボタンB

<div class="rankstlink-l2"> <p><a href="#">ボタンB</a></p> </div>

ショートコード補助

HTMLカラーコード

※ご参考までに

#e53935

#f44336

#ffebee

#03A9F4

#E1F5FE

#43A047

#4CAF50

#E8F5E9

#FFC107

#FFF3E0

#212121

#424242

#FAFAFA

#FFFDE7

AFFINGER5の記事作成パーツ（タグ編②）

カスタムボタン

ノーマルタイプ

基本形

詳しくはコチラ（オレンジ）

詳しくはコチラ（レッド）

詳しくはコチラ（グリーン）

詳しくはコチラ（ブルー）

お問い合わせ

もっと詳しく（オレンジ）

もっと詳しく（ピンク）

もっと詳しく（ブルー）

人気ランキング

ランキングはコチラ(AFFINGER又はEX版のみ）

ミニタイプ

基本形

詳しくはコチラ（オレンジ）

詳しくはコチラ（レッド）

詳しくはコチラ（グリーン）

詳しくはコチラ（ブルー）

MCボタン（AFFINGER又はEX版のみ）

会話ふきだし

レイアウト

PCとTab3分割

PCとTab左右40：60%

PCとTab左右50%

PCとTab左右30：70%

全サイズ左右50%

均等横並び

その他パーツ

タブ(AFFINGER又はEX版のみ）

スター

年月（EX版のみ）

画像付きコメント(AFFINGER又はEX版のみ）

YouTube動画の貼り付け

直接URLを貼り付ける方法

サムネイルをリンク

三角（下矢印、カラー変更可）

スクロールナビ(AFFINGER又はEX版のみ）

カテゴリ一覧

カテゴリ一覧スライドショー

角丸背景

ボタンA・ボタンB

ショートコード補助

HTMLカラーコード