ものづくり推進部

AFFINGER5の記事作成パーツ(タグ編②)

2020年4月10日

AFFINGER5の記事作成パーツ(タグ編②)
きのぷー
きのぷー
先日ご紹介した「WING」の記事作成パーツ紹介第3弾。今日はタグ編第2回をお届けします。

販売元サイト

カスタムボタン

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

ノーマルタイプ

基本形

ボタン

[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 url="#" title="人気ランキング" rel="" fontawesome="st-svg-oukan" target="" color="#fff" bgcolor="#FBC02D" bgcolor_top="#fbc846" bordercolor="#FBC02D" borderwidth="1" borderradius="5" fontsize="110" fontweight="bold" width="90" fontawesome_after="" shadow="" ref="on"]

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

ランキングはコチラ

[st-mybutton url="#ranking" title="ランキングはコチラ" rel="" fontawesome="fa-angle-double-down" target="" color="#1a1a1a" bgcolor="#fdef4e" bgcolor_top="" bordercolor="#fceb1c" borderwidth="1" borderradius="" fontsize="95" fontweight="" width="" fontawesome_after="" shadow="" ref=""]

ミニタイプ

基本形

ボタン

[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のコンテンツ

んごおおー!

[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)などが可能。

【悲報】国道398号のタコ親子、ピンチ。

気になるモノ

【悲報】国道398号のタコ親子、大ピンチ。

2023/7/14

2013年3月頃の写真と、2023年7月の写真を見比べてみます。 このまま消えてなくなる運命なのでしょうか💦

道の駅さんさん南三陸 記念きっぷ

気になるモノ

道の駅さんさん南三陸 記念きっぷ

2023/5/10

発見!現存する旧志津川町時代の子ども向け警告看板

気になるモノ

発見!現存する旧志津川町時代の子ども向け警告看板

2022/8/28

きけん あそばない 「すいろ」や「ためいけ」

WINGのタグ機能一覧 ⑤記事一覧、ブログカード、条件表示、ショートコード補助編

ものづくり推進部

WINGのタグ機能一覧 ⑤記事一覧、ブログカード、条件表示、ショートコード補助編

2023/5/7

その他パーツ Googleアイコン Mac/iPhone/tablet    タイマー/MAP/自転車    走る/車/電車    地下鉄/飛行機/駐車場    レストラン/ストア/ケーキ    タバ ...

WINGのタグ機能一覧 ④会話ふきだし、ランキング、レイアウト編

ものづくり推進部

WINGのタグ機能一覧 ④会話ふきだし、ランキング、レイアウト編

2023/5/7

会話ふきだし ※ r]で反対向き 会話1 会話2 会話3 会話4 会話5 会話6 会話7 会話8 ランキング [st-rank rankno="ランキング(1~3又は空)" bgcolor="背景色" ...

[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"]

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

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

【悲報】国道398号のタコ親子、ピンチ。

気になるモノ

2023/7/14

【悲報】国道398号のタコ親子、大ピンチ。

2013年3月頃の写真と、2023年7月の写真を見比べてみます。 このまま消えてなくなる運命なのでしょうか💦

ReadMore

道の駅さんさん南三陸 記念きっぷ

気になるモノ

2023/5/10

道の駅さんさん南三陸 記念きっぷ

ReadMore

発見!現存する旧志津川町時代の子ども向け警告看板

気になるモノ

2022/8/28

発見!現存する旧志津川町時代の子ども向け警告看板

きけん あそばない 「すいろ」や「ためいけ」

ReadMore

WINGのタグ機能一覧 ⑤記事一覧、ブログカード、条件表示、ショートコード補助編

ものづくり推進部

2023/5/7

WINGのタグ機能一覧 ⑤記事一覧、ブログカード、条件表示、ショートコード補助編

その他パーツ Googleアイコン Mac/iPhone/tablet    タイマー/MAP/自転車    走る/車/電車    地下鉄/飛行機/駐車場    レストラン/ストア/ケーキ    タバコ/矢印(左)/矢印(下)    矢印(右)/矢印(上)/マル    バツ/顔(笑顔)/顔(悪い)    顔(満足)/顔(不満)/手(Like)    手(Bad)/!(error)/!(new)    スター 5、4.5、4、3.5、3、2、1があり。             画像付きコメント そげだたっけ ...

ReadMore

WINGのタグ機能一覧 ④会話ふきだし、ランキング、レイアウト編

ものづくり推進部

2023/5/7

WINGのタグ機能一覧 ④会話ふきだし、ランキング、レイアウト編

会話ふきだし ※ r]で反対向き 会話1 会話2 会話3 会話4 会話5 会話6 会話7 会話8 ランキング [st-rank rankno="ランキング(1~3又は空)" bgcolor="背景色" color="文字色" bordercolor="枠線カラー" radius="角丸(px)" star="スター(5,4,3,2,1)"]ここにテキスト[/st-rank] ランキング1位(基本) ランキング2位 ランキング3位 ランキング4位以下 ID よく使うコンテンツをテンプレート(ショートコード) ...

ReadMore

[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」でカラーを変更可

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

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

ショートコード補助

HTMLカラーコード

※ご参考までに

#e53935

#f44336

#ffebee

#03A9F4

#03A9F4

#E1F5FE

#43A047

#4CAF50

#E8F5E9

#FFC107

#FFF3E0

#212121

#424242

#FAFAFA

#FFFDE7

[likeme]
  • この記事を書いた人
  • 最新記事

きのぷー

2010年南三陸町初訪問。震災後もボランティア活動等を通じて地元との交流を重ね、2012年4月より「いいね!南三陸町」をスタート。町内各地を訪ねて見つけた町の魅力を伝えます。

-ものづくり推進部
-,