アフィンガーの記事パーツの備忘録

私は長年サイト作成をしていますが、全て独学で必要な事だけ学んで来ましたので、詳しい事はプロの方ほど知りません。作業効率もプロの方には敵いません。

しかしこれでも数千のサイトを作ってきました。もちろんペラサイトも合わせてですが・・・

駆け出しは、HTMLのテンプレートなどを利用して手打ちでサイトを作っていました。そのうちSIRIUSなるサイト作成ソフトに出会い、数千のサイトの管理のし易さと、本格的サイトを簡単に作れる事からSIRIUSが手放せなくなりました。

ですので、長らくの間WordPressに触れることなくサイト作成してきましたので、2018年にやっと勉強しだしたところです。

なるほどSIRIUSには出来ない様々な便利な機能があり、まずはSIRIUSからの移行作業から入りました。

移行作業はある程度の回数を経ると、MultiReplaceという無料ソフトを使えば簡単にできるようになるのですが、移行した後の追加や編集し直しの際に、Affingerのビュジュアルエディターでしか出ないツールなどを使った際に、テキストエディターに戻すとPタグやbrタグが消えたりと（TinymceAdvancedを使っても解決しない場合がある）面倒なことになるので、テキストエディターだけで編集できるようソースコードの備忘録が必要になりましたので作りました。

WordPressテーマ「WING（AFFINGER5）」

Contents

1 ビジュアルエディタ＞スタイル
2 ビジュアルエディタ＞タグ
3 これはh2タグの見出しです
- 3.1 これはh3タグの見出しです
4 これはh2タグの見出しです
- 4.1 これはh3タグの見出しです
- 4.2 これはh3タグの見出しです

ビジュアルエディタ＞スタイル

ビジュアルエディタ＞スタイル＞で装飾できます

アニメーション

横揺れ

45°揺れ

ベル揺れ

縦揺れ

点滅

バウンド

回転

ふわふわ

大小

シェイク

シェイク（強）

拡大（ゆれ）

過ぎる

戻る

バースト

落ちる

写真

枠線

ポラロイド風

ワイド

ボックス

チェックボックス（番号なしリスト）

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

<div class="st-square-checkbox st-square-checkbox-nobox">
<ul>
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>

チェックリスト（番号なしリスト）

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

<div class="maruck">
<ul>
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>

ナンバリング（番号付きリスト）

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

<div class="maruno">
<ol>
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ol>
</div>

レイアウト

回り込み解除

センター寄せ

センター寄せ（スマホのみ）

下に余白

カードスタイル

※記事ID2で設定されています（ない場合は適宜変更して下さい）

ブログカードに別のデザインを設定します（全サイズで縦型）

カードスタイルB

ブログカードに別のデザインを設定します（PC、タブレット閲覧時のみ縦型）

width100％リセット

max-width: initial; display: inline;を設定してmax-widthをリセットします。

imgインラインボックス

display: inline;を指定します。

テーブル

横スクロール

スティンガー	アッフィンガー	アッフィンガーEX

中央配置

スティンガー	アッフィンガー	アッフィンガーEX

装飾なし

スティンガー	アッフィンガー	アッフィンガーEX

マーカー

アッフィンガー

ビジュアルエディタ＞タグ

テキストパーツ

クリップメモ

外部リンク

[st-cmemo fontawesome="fa-external-link" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"]外部リンク[/st-cmemo]

ブックマーク

[st-cmemo fontawesome="fa-bookmark" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" iconsize="100"]ブックマーク[/st-cmemo]

おしらせ

[st-cmemo fontawesome="fa-bullhorn" iconcolor="#FFEB3B" bgcolor="#FFFDE7" color="#000000" iconsize="100"]おしらせ[/st-cmemo]

はてな

[st-cmemo fontawesome="fa-question-circle" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="100"]はてな[/st-cmemo]

[st-cmemo fontawesome="fa-comments" iconcolor="#F48FB1" bgcolor="#FCE4EC" color="#000000" iconsize="100"]コメント[/st-cmemo]

コード

[st-cmemo fontawesome="fa-code" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="150"]コード[/st-cmemo]

ポイント

[st-cmemo fontawesome="fa-lightbulb-o" iconcolor="#FFA726" bgcolor="#FFF3E0" color="#000000" iconsize="100"]ポイント[/st-cmemo]

ユーザー

[st-cmemo fontawesome="fa-user" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="150"]ユーザー[/st-cmemo]

初心者

[st-cmemo fontawesome="fa-user" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" iconsize="150"]ユーザー[/st-cmemo]

注意文

[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="100"]注意文[/st-cmemo]

注意文（グレー）

[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]注意文（グレー）[/st-cmemo]

ショートコードガイド

[st-cmemo fontawesome="Webアイコン" iconcolor="アイコンの色" bgcolor="背景色" color="文字色" iconsize="アイコンサイズ（%）"]

ミニふきだし

基本

[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#f3f3f3" color="#000000" margin="0 0 20px 0"]基本[/st-minihukidashi]

オレンジ

[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#FFB74D" color="#fff" margin="0 0 20px 0"]オレンジ[/st-minihukidashi]

ピンク

[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#F48FB1" color="#fff" margin="0 0 20px 0"]ピンク[/st-minihukidashi]

ブルー

[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#4FC3F7" color="#fff" margin="0 0 20px 0"]ブルー[/st-minihukidashi]

グリーン

[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#7CB342" color="#fff" margin="0 0 20px 0"]グリーン[/st-minihukidashi]

レッド

[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#f44336" color="#fff" margin="0 0 20px 0"]レッド[/st-minihukidashi]

ショートコードガイド

[st-minihukidashi fontawesome="Webアイコン" fontsize="文字サイズ（%）" fontweight="文字の太さ（bold）" bgcolor="背景色" color="文字色" margin="余白（上右下左）"]

複合

自由なメモ

[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#FFC107" color="#fff" margin="0 0 0 -6px"]自由なメモ[/st-minihukidashi]

[st-cmemo fontawesome="fa-file-text-o" iconcolor="#FFC107" bgcolor="#FFFDE7" color="#000000" iconsize="200"]コメント[/st-cmemo]

ココがポイント

[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがポイント[/st-minihukidashi]

[st-cmemo fontawesome="fa-hand-o-right" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]コメント[/st-cmemo]

ココがおすすめ

[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがおすすめ[/st-minihukidashi]

[st-cmemo fontawesome="fa-thumbs-o-up" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]コメント[/st-cmemo]

ココがダメ

[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#3F51B5" color="#fff" margin="0 0 0 -6px"]ココがダメ[/st-minihukidashi]

[st-cmemo fontawesome="fa-thumbs-o-down" iconcolor="#3F51B5" bgcolor="#E8EAF6" color="#000000" iconsize="200"]コメント[/st-cmemo]

ココに注意

[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#ef5350" color="#fff" margin="0 0 0 -6px"]ココに注意[/st-minihukidashi]

[st-cmemo fontawesome="fa-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" iconsize="200"]コメント[/st-cmemo]

もっと詳しく

[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#66BB6A" color="#fff" margin="0 0 0 -8px"]もっと詳しく[/st-minihukidashi]

[st-cmemo fontawesome="fa-search" iconcolor="#66BB6A" bgcolor="#E8F5E9" color="#000000" iconsize="200"]コメント[/st-cmemo]

女性コメント

[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#F06292" color="#fff" margin="0 0 0 -9px"]女性コメント[/st-minihukidashi]

[st-cmemo fontawesome="fa-user" iconcolor="#F06292" bgcolor="#FCE4EC" color="#000000" iconsize="200"]コメント[/st-cmemo]

男性コメント

[st-minihukidashi fontawesome="" fontsize="80" fontweight="" bgcolor="#42A5F5" color="#fff" margin="0 0 0 -9px"]男性コメント[/st-minihukidashi]

[st-cmemo fontawesome="fa-user" iconcolor="#42A5F5" bgcolor="#E3F2FD" color="#000000" iconsize="200"]コメント[/st-cmemo]

複合（アイコンなし）

自由なメモ

[st-minihukidashi fontawesome="fa-file-text-o" fontsize="90" fontweight="bold" bgcolor="#FFC107" color="#fff" margin="0 0 0 0"]自由なメモ[/st-minihukidashi]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#FFFDE7" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]コメント[/st-mybox]

ココがポイント

[st-minihukidashi fontawesome="fa-hand-o-right" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがポイント[/st-minihukidashi]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]コメント[/st-mybox]

ココがおすすめ

[st-minihukidashi fontawesome="fa-circle-o" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがおすすめ[/st-minihukidashi]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]コメント[/st-mybox]

ココがダメ

[st-minihukidashi fontawesome="fa-times" fontsize="90" fontweight="bold" bgcolor="#3F51B5" color="#fff" margin="0 0 0 0"]ココがダメ[/st-minihukidashi]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8EAF6" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]コメント[/st-mybox]

ココに注意

[st-minihukidashi fontawesome="fa-exclamation-circle" fontsize="90" fontweight="bold" bgcolor="#ef5350" color="#fff" margin="0 0 0 0"]ココに注意[/st-minihukidashi]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#ffebee" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]コメント[/st-mybox]

もっと詳しく

[st-minihukidashi fontawesome="fa-search" fontsize="90" fontweight="bold" bgcolor="#66BB6A" color="#fff" margin="0 0 0 0"]もっと詳しく[/st-minihukidashi]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E8F5E9" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]コメント[/st-mybox]

はてなマーク

[st-minihukidashi fontawesome="fa-question-circle" fontsize="90" fontweight="bold" bgcolor="#03A9F4" color="#fff" margin="0 0 0 0"]はてなマーク[/st-minihukidashi]

[st-mybox title="" fontawesome="" color="#757575" bordercolor="" bgcolor="#E1F5FE" borderwidth="0" borderradius="5" titleweight="bold" fontsize=""]コメント[/st-mybox]

まるもじ（小）

基本

[st-marumozi fontawesome="" bgcolor="#f3f3f3" color="#000000" radius="30" margin="0 10px 0 0"]基本[/st-marumozi]

オレンジ

[st-marumozi fontawesome="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 0 0"]オレンジ[/st-marumozi]

ピンク

[st-marumozi fontawesome="" bgcolor="#F48FB1" color="#fff" radius="30" margin="0 10px 0 0"]ピンク[/st-marumozi]

ブルー

[st-marumozi fontawesome="" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 0 0"]ブルー[/st-marumozi]

うすい注意

[st-marumozi fontawesome="fa-exclamation-circle" bgcolor="#ffebee" color="#ef5350" radius="30" margin="0 10px 0 0"]うすい注意[/st-marumozi]

注意

[st-marumozi fontawesome="fa-exclamation-circle" bgcolor="#ef5350" color="#fff" radius="30" margin="0 10px 0 0"]注意[/st-marumozi]

ショートコードガイド

[st-marumozi fontawesome="Webアイコン" bgcolor="背景色" color="文字色" radius="角丸（px）" margin="余白（上右下左）"]

まるもじ（大）

基本

[st-marumozi-big fontawesome="" bgcolor="#f3f3f3" color="#000000" radius="30" margin="0 10px 10px 0"]基本[/st-marumozi-big]

オレンジ

[st-marumozi-big fontawesome="" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]オレンジ[/st-marumozi-big]

ピンク

[st-marumozi-big fontawesome="" bgcolor="#F48FB1" color="#fff" radius="30" margin="0 10px 10px 0"]ピンク[/st-marumozi-big]

ブルー

[st-marumozi-big fontawesome="" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"]ブルー[/st-marumozi-big]

はてな

[st-marumozi-big fontawesome="fa-question-circle" bgcolor="#4FC3F7" color="#fff" radius="30" margin="0 10px 10px 0"]はてな[/st-marumozi-big]

チェック

[st-marumozi-big fontawesome="fa-check-circle" bgcolor="#FFB74D" color="#fff" radius="30" margin="0 10px 10px 0"]チェック[/st-marumozi-big]

うすい注意

[st-marumozi-big fontawesome="fa-exclamation-circle" bgcolor="#ffebee" color="#ef5350" radius="30" margin="0 10px 10px 0"]うすい注意[/st-marumozi-big]

注意

[st-marumozi-big fontawesome="fa-exclamation-circle" bgcolor="#ef5350" color="#fff" radius="30" margin="0 10px 10px 0"]注意[/st-marumozi-big]

ショートコードガイド

[st-marumozi-big fontawesome="Webアイコン" bgcolor="背景色" color="文字色" radius="角丸（px）" margin="余白（上右下左）"]

カスタムフォント

[st-designfont myclass="" fontawesome="" fontsize="150" fontweight="bold" color="#000" textshadow="" webfont="" margin="0 0 20px 0"]カスタムフォント[/st-designfont]

カスタムフォント白影

[st-designfont myclass="" fontawesome="" fontsize="150" fontweight="bold" color="#fff" textshadow="#424242" webfont="on" margin="0 0 20px 0"]カスタムフォント白影[/st-designfont]

ステップ

step
11

step
22

step
33

[st-step step_no="1"]1[/st-step]

[st-step step_no="2"]2[/st-step]

[st-step step_no="3"]3[/st-step]

ポイント

[st-point fontsize="" fontweight="bold" bordercolor=""]ポイント[/st-point]

ラベル

流れる文字

<div class="st-marquee">
<p>流れる文字</p>
</div>

ボックスデザイン

バナー風ボックス

基本

[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="基本" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]]

[[/st-flexbox]

背景なし高さ400px

[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="背景なし高さ400px" width="" height="400" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="" borderwidth="0" bgcolor="" backgroud_image="" blur="" left="" margin_bottom="0"]]

[[/st-flexbox]

左寄せ

[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="左寄せ" width="" height="" color="#fff" fontsize="120" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#29B6F6" backgroud_image="" blur="" left="on" margin_bottom="0"]]

[[/st-flexbox]

ショートコードガイド

[st-flexbox url="リンク先URL" rel="nofollow" target="リンクを新しく開く（target）" fontawesome="Webアイコン" title="タイトル" width="幅（%）" height="高さ（px）" color="文字色" fontsize="文字サイズ（%）" radius="角丸（px）" shadow="タイトルの影色" bordercolor="枠線カラー" borderwidth="枠線の太さ（px）" bgcolor="背景色" backgroud_image="背景画像のURL" blur="背景画像のぼかし" left="左寄せ（on）" margin_bottom="下の余白（px）"]

マイボックス

基本

[st-mybox title="基本" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]]

[[/st-mybox]

しかく（枠のみ）

title部分に文字入れなければ枠のみになります。

[st-mybox title="しかく（枠のみ）" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]]

[[/st-mybox]

まるみ

[st-mybox title="まるみ" fontawesome="" color="#757575" bordercolor="#BDBDBD" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]]

[[/st-mybox]

参考

[st-mybox title="参考" fontawesome="fa-file-text-o" color="#757575" bordercolor="" bgcolor="#fafafa" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]]

[[/st-mybox]

見出し付きフリーボックス

基本

見出しは全角15文字まで

[st-midasibox title="基本" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]]

見出しは全角15文字まで

[[/st-midasibox]

注意

[st-midasibox title="注意" fontawesome="fa-exclamation-circle faa-flash animated" bordercolor="#f44336" color="" bgcolor="#ffebee" borderwidth="" borderradius="5" titleweight="bold"]]

[[/st-midasibox]

はてな

[st-midasibox title="はてな" fontawesome="fa-question-circle faa-ring animated" bordercolor="#03A9F4" color="#fff" bgcolor="#E1F5FE" borderwidth="" borderradius="5" titleweight="bold"]]

[[/st-midasibox]

ポイント

[st-midasibox title="ポイント" fontawesome="fa-check-circle faa-ring animated" bordercolor="#FFC107" color="" bgcolor="#FFFDE7" borderwidth="" borderradius="5" titleweight="bold"]]

[[/st-midasibox]

メモ

[st-midasibox title="メモ" fontawesome="fa-file-text-o faa-float animated" bordercolor="#757575" color="" bgcolor="#FAFAFA" borderwidth="" borderradius="5" titleweight="bold"]]

[[/st-midasibox]

メモボックス

メモ

スライドボックス

+ クリックして下さい

[st-slidebox text="+ クリックして下さい" bgcolor="" color="#1a1a1a" margin_bottom="20"]]

[[/st-slidebox]

チェックボックス（番号なしリスト）

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

[st-square-checkbox bgcolor="" bordercolor="" fontweight="" borderwidth="3"]]

<ul>
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>

[[/st-square-checkbox]

こんな方におすすめ（v）

こんな方におすすめ

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

<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>

こんな方におすすめ[v]

こんな方におすすめ

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

<div class="st-blackboard square-checkbox">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>
<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>

ガイドマップメニュー

<div class="st-link-guide st-link-guide-post">
<ul class="st-link-guide-menu">
<li><a href="#">ダミーリンク</a></li>
<li><a href="#">ダミーリンク</a></li>
<li><a href="#">ダミーリンク</a></li>
</ul>
</div>

カスタムボタン

ノーマル

基本

[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="" 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ボタン

太字のテキスト

今すぐ申し込む

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

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

会話ふきだし（ r『半角スペース・小文字r』で反転）

INAZUMA

会話1

[st-kaiwa1]会話1[/st-kaiwa1]

会話2

[st-kaiwa2]会話2[/st-kaiwa2]

会話3

[st-kaiwa3]会話3[/st-kaiwa3]

会話4

[st-kaiwa4]会話4[/st-kaiwa4]

会話5

[st-kaiwa5]会話5[/st-kaiwa5]

会話6

[st-kaiwa6]会話6[/st-kaiwa6]

会話7

[st-kaiwa7]会話7[/st-kaiwa7]

会話8

[st-kaiwa8]会話8[/st-kaiwa8]

会話1

INAZUMA

[st-kaiwa1 r]会話1[/st-kaiwa1]

レイアウト

PCとtab三分割

左側のコンテンツ33%

真ん中のコンテンツ33%

右側のコンテンツ33%

<div class="clearfix responbox33">
<div class="lbox">
<p>左側のコンテンツ33%</p>
</div>
<div class="lbox">
<p>真ん中のコンテンツ33%</p>
</div>
<div class="lbox">
<p>右側のコンテンツ33%</p>
</div>
</div>

PCとtab40％：60％

左側のコンテンツ40%

右側のコンテンツ60%

<div class="clearfix responbox">
<div class="lbox">
<p>左側のコンテンツ40%</p>
</div>
<div class="rbox">
<p>右側のコンテンツ60%</p>
</div>
</div>

PCとtab50％：50％

左側のコンテンツ50%

右側のコンテンツ50%

<div class="clearfix responbox50">
<div class="lbox">
<p>左側のコンテンツ50%</p>
</div>
<div class="rbox">
<p>右側のコンテンツ50%</p>
</div>
</div>

全サイズ30％：70％

左側のコンテンツ30%

右側のコンテンツ70%

<div class="clearfix responbox30 smart30">
<div class="lbox">
<p>左側のコンテンツ30%</p>
</div>
<div class="rbox">
<p>右側のコンテンツ70%</p>
</div>
</div>

全サイズ50％：50％

左側のコンテンツ50%

右側のコンテンツ50%

<div class="clearfix responbox50 smart50">
<div class="lbox">
<p>左側のコンテンツ50%</p>
</div>
<div class="rbox">
<p>右側のコンテンツ50%</p>
</div>
</div>

全サイズfree％

左側のコンテンツ%

右側のコンテンツ%

<div class="clearfix responboxfree smartfree">
<div class="lbox" style="width: 50%;">
<p>左側のコンテンツ%</p>
</div>
<div class="rbox" style="width: 50%;">
<p>右側のコンテンツ%</p>
</div>
</div>

均等並び

横並びコンテンツ
横並びコンテンツ
横並びコンテンツ

<div class="kintou">
<ul>
<li>横並びコンテンツ</li>
<li>横並びコンテンツ</li>
<li>横並びコンテンツ</li>
</ul>
</div>

マージン

[st-margin margin="0 0 20px 0"]]

[[/st-margin]

テーブル（シンプル）

テキスト

[st-table][st-tr][st-td]テキスト[/st-td][/st-tr][/st-table]

テーブル（属性あり）

テキスト

[st-table width="100" bordercolor=""][st-tr bgcolor="" color="" fontweight="" center=""][st-td width="" bordercolor="" bgcolor="" color="" fontweight="" center="" colspan=""]テキスト[/st-td][/st-tr][/st-table]

タブ（2つ）

タブ1タブ2

タブ1のコンテンツ

タブ2のコンテンツ

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

タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor="" value="2"]

タブ2のコンテンツ
[/st-tab-main][/st-tab-content]

タブ（3つ）

タブ1タブ2タブ3

タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ

[st-tab-content memo="全体を包むボックスです"][st-input-tab text="タブ1" bgcolor="#fff" color="#1a1a1a" fontweight="" width="30" value="1" checked="checked"][st-input-tab text="タブ2" bgcolor="#fff" color="#1a1a1a" fontweight="" width="30" value="2" checked=""][st-input-tab text="タブ3" bgcolor="#fff" color="#1a1a1a" fontweight="" width="30" value="3" checked=""][st-tab-main bgcolor="" bordercolor="" value="1"]

タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor="" value="2"]

タブ2のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor="" value="3"]

タブ3のコンテンツ
[/st-tab-main][/st-tab-content]

ワイドデザインforEX

ワイド（1カラム・LP用）

[st-widecolumn bgcolor="" shadow="on"]]

ワイド（1カラム・LP用）

[[/st-widecolumn]

ワイドカラー（1カラム・LP用）

[st-widecolumn bgcolor="#fafafa" shadow="on"]]

ワイドカラー（1カラム・LP用）

[[/st-widecolumn]

ワイドアイキャッチ（左右影あり）

<div class="st-lp-wide-eyecatch">ワイドアイキャッチ（左右影あり）</div>

その他パーツ

スター

[star5]

[star45]

[star4]

[star35]

[star3]

[star2]

[star1]

年月（自動更新）

2020年6月

[st-date]

画像付きコメント

画像（60×60）

タイトル

◯代男性

[st-user-comment-box title="タイトル" user_text="◯代男性" color="" star="5"]画像（60×60）[/st-user-comment-box]

アドセンス

[adsense]

オリジナルシュートコード

[originalsc]

youtube

[youtube id=]

三角（下矢印）

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

目次（カスタム）

<div id="st_toc_container">
<p class="st_toc_title">目次</p>
<ol class="st_toc_list st-original-toc">
<li><a href="#">これはダミーです</a></li>
<li><a href="#">これはダミーです</a></li>
<li><a href="#">これはダミーです</a></li>
</ol>
</div>

目次（toc+）

toc（前後に[]を付けてください）

記事一覧

: Facebook広告を始める！

2020/06/01

まずはペルソナ作成プロフィール画像とヘッダー画像の推奨サイズプロフィール画像の推奨サイズ・・・180x180px（ピクセル）ヘッダー画像の推奨サイズ・・・851x315px（ピクセ ...

: Twitter広告を始める！

2020/06/01

Twitter広告を始めました。広告配信用の新しいアカウントを作ったのですが、このアカウントにはTwitter広告プログラムへの参加資格がありません。詳細はこちらTwitter広告への参加資格につ ...

: ZOOMなどを利用したリモートワーク・在宅勤務で品薄・高騰のWEBカメラを購入してみた

2020/05/15

在庫のある中国製っぽい安価なWEBカメラで大丈夫なのか購入してみたこのコロナ禍の影響で、できる職種はZOOMなどを利用したリモートワーク・在宅勤務がされるようになり、急激にWEBカメラの需要が高まり ...

: デザイン済みデータ

2019/04/12

アフィンガーにはあらかじめデザインされたテンプレートがあり、無料で配布されています。関連デザイン済みデータ配布サイト私のおすすめはINAZUMAなんですが、使い方が分かり辛い。だいたいアフィンガー ...

: 検索システム『サプラス』に関する備忘録

2019/03/06

サプラスのサーバー引越しサプラスの対応サーバーはエックスサーバーとさくらサーバーということになっていますが、テンプレートの変更などは出来ないですがロリポップでも動かす事は出来ます。しかしPHPの7 ...

: ワードプレスのサーバー引越しの際の備忘録

2019/03/06

ワードプレスのサーバー引越しの際はまず、 PHPMyAdominでデータベースのデータをバックアップするワードプレスのファイルを丸ごとダウンロードしてバックアップする以上の手順となります。バック ...

: サイトにコードやソースを表示したいときの備忘録

2019/02/04

Crayon Syntax Highlighterを使う HTMLやCSS・PHPなどの解説サイトで、よくソースやコード例をキレイに表示してくれているサイトがありますよね？このように表示するには、W ...

: 賢威のデザインパーツ・スタイルの備忘録

2019/02/03

このサイトはWING（AFFINGER5）をテーマに使っており、デザイン済みデータのINAZUMAを適用しています。わざわざ賢威のデザインパーツ・スタイルの備忘録の為にマルチテーマ化するのも面倒なの ...

: アフィンガーの記事パーツの備忘録

2019/02/02

私は長年サイト作成をしていますが、全て独学で必要な事だけ学んで来ましたので、詳しい事はプロの方ほど知りません。作業効率もプロの方には敵いません。しかしこれでも数千のサイトを作ってきました。もちろんペ ...

[st-postgroup id="" rank="" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]

カテゴリ一覧

: Facebook広告を始める！

まずはペルソナ作成プロフィール画像とヘッダー画像の推奨サイズプロフィール画像の推奨サイズ・・・180x180px（ピクセル）ヘッダー画像の推奨サイズ・・・851x315px（ピクセ ...

: Twitter広告を始める！

Twitter広告を始めました。広告配信用の新しいアカウントを作ったのですが、このアカウントにはTwitter広告プログラムへの参加資格がありません。詳細はこちらTwitter広告への参加資格につ ...

: ZOOMなどを利用したリモートワーク・在宅勤務で品薄・高騰のWEBカメラを購入してみた

在庫のある中国製っぽい安価なWEBカメラで大丈夫なのか購入してみたこのコロナ禍の影響で、できる職種はZOOMなどを利用したリモートワーク・在宅勤務がされるようになり、急激にWEBカメラの需要が高まり ...

: デザイン済みデータ

アフィンガーにはあらかじめデザインされたテンプレートがあり、無料で配布されています。関連デザイン済みデータ配布サイト私のおすすめはINAZUMAなんですが、使い方が分かり辛い。だいたいアフィンガー ...

: 検索システム『サプラス』に関する備忘録

サプラスのサーバー引越しサプラスの対応サーバーはエックスサーバーとさくらサーバーということになっていますが、テンプレートの変更などは出来ないですがロリポップでも動かす事は出来ます。しかしPHPの7 ...

[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" slide_center="off"]

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

2020/6/3

Facebook広告を始める！

まずはペルソナ作成プロフィール画像とヘッダー画像の推奨サイズプロフィール画像の推奨サイズ・・・180x180px（ピクセル）ヘッダー画像の推奨サイズ・・・851x315px（ピクセル）

2020/6/1

Twitter広告を始める！

Twitter広告を始めました。広告配信用の新しいアカウントを作ったのですが、このアカウントにはTwitter広告プログラムへの参加資格がありません。詳細はこちらTwitter広告への参加資格について。と表示されて前に進めず。Twitterに問い合わせしようにも、お問合せにTweetできない・・・ネットで調べてみると、アカウントの審査があり、2～3週間は広告運用できないとのこと。プロフィール画像とヘッダー画像の推奨サイズプロフィール画像の推奨サイズ・・・400x400px（ピクセル）ヘッダー ...

2020/5/17

ZOOMなどを利用したリモートワーク・在宅勤務で品薄・高騰のWEBカメラを購入してみた

在庫のある中国製っぽい安価なWEBカメラで大丈夫なのか購入してみたこのコロナ禍の影響で、できる職種はZOOMなどを利用したリモートワーク・在宅勤務がされるようになり、急激にWEBカメラの需要が高まりました。更に緊急事態宣言の延長に伴い、塾や学校などのオンライン授業も増えて、Yahooショッピングや楽天・AMAZONなどでも知名度があるメーカーの在庫のあるWEBカメラは1万円超のものしかありませんでした。正直通常販売価格はそこまで高いものではないのですが、転売ヤー（せどり）のおかげでマスク同様価格が吊 ...

2019/4/12

デザイン済みデータ

アフィンガーにはあらかじめデザインされたテンプレートがあり、無料で配布されています。関連デザイン済みデータ配布サイト私のおすすめはINAZUMAなんですが、使い方が分かり辛い。だいたいアフィンガー自体が、購入サイトや公式サイト、マニュアルサイトなどありややこしいので、どこに何が書いてあるのか分かり辛い節があります。導入方法も少し難解で、やり方はこちらに書かれています。関連デザインサンプルDLページ（β）の使い方と注意事項ここまで来ても、初めからあるヘッダー部分のリンクとか、コンテンツトップにある ...

2019/4/12

検索システム『サプラス』に関する備忘録

サプラスのサーバー引越しサプラスの対応サーバーはエックスサーバーとさくらサーバーということになっていますが、テンプレートの変更などは出来ないですがロリポップでも動かす事は出来ます。しかしPHPの7以上のバージョンには対応していないので、アップデートされるのを待つしかありません。今回ロリポップからエックスサーバーへの引越し。それ程難しくはありません。することは、サプラスの本体のsearchフォルダをダウンロードサプラスのデータベースをバックアップ以上を新しいサーバー（エックスサーバー）にアップす ...

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

タグ一覧

: Facebook広告を始める！

まずはペルソナ作成プロフィール画像とヘッダー画像の推奨サイズプロフィール画像の推奨サイズ・・・180x180px（ピクセル）ヘッダー画像の推奨サイズ・・・851x315px（ピクセ ...

: Twitter広告を始める！

Twitter広告を始めました。広告配信用の新しいアカウントを作ったのですが、このアカウントにはTwitter広告プログラムへの参加資格がありません。詳細はこちらTwitter広告への参加資格につ ...

: ZOOMなどを利用したリモートワーク・在宅勤務で品薄・高騰のWEBカメラを購入してみた

在庫のある中国製っぽい安価なWEBカメラで大丈夫なのか購入してみたこのコロナ禍の影響で、できる職種はZOOMなどを利用したリモートワーク・在宅勤務がされるようになり、急激にWEBカメラの需要が高まり ...

: デザイン済みデータ

アフィンガーにはあらかじめデザインされたテンプレートがあり、無料で配布されています。関連デザイン済みデータ配布サイト私のおすすめはINAZUMAなんですが、使い方が分かり辛い。だいたいアフィンガー ...

: 検索システム『サプラス』に関する備忘録

サプラスのサーバー引越しサプラスの対応サーバーはエックスサーバーとさくらサーバーということになっていますが、テンプレートの変更などは出来ないですがロリポップでも動かす事は出来ます。しかしPHPの7 ...

[st-taggroup tag="0" page="5" order="desc" orderby="id" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]

タグ一覧（スライドショー）

2020/6/3

Facebook広告を始める！

2020/6/1

Twitter広告を始める！

2020/5/17

ZOOMなどを利用したリモートワーク・在宅勤務で品薄・高騰のWEBカメラを購入してみた

2019/4/12

デザイン済みデータ

2019/4/12

検索システム『サプラス』に関する備忘録

[st-taggroup tag="0" page="5" order="desc" orderby="id" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on"]

スライドショー画像のみ（※クラス）

条件表示

コメントアウト

[st-out]コメントアウト[/st-out]

PC閲覧時のみ表示

[pc]PC閲覧時のみ表示[/pc]

PC閲覧時のみ非表示

[nopc]PC閲覧時のみ非表示[/nopc]

AMPページのみ表示

[st-amp]AMPページのみ表示[/st-amp]

AMPページのみ非表示

[st-no-amp]AMPページのみ非表示[/st-no-amp]

フロントページのみ表示

[frontonly]フロントページのみ表示[/frontonly]

フロントページのみ非表示

[no-frontonly]フロントページのみ非表示[/no-frontonly]

指定したカテゴリIDのみ非表示

[catonly cat="0"]指定したカテゴリIDのみ非表示[/catonly]

ショートコード補助

Webアイコン（クラス）

左側のアイコンのclass名です。

fa-file-text-o

fa-check-circle

st-svg-checkbox

fa-exclamation-circle

fa-question-circle

fa-search

fa-search-plus

fa-chevron-right

fa-chevron-down

fa-angle-double-right

fa-angle-double-down

fa-heart

fa-user

fa-comments

fa-lightbulb-o

fa-bullhorn

fa-envelope

fa-code

fa-gift

fa-diamond

fa-download

fa-twitter

fa-facebook-square

fa-youtube-play

fa-amazon

st-svg-oukan

st-svg-bigginer_l

見出し一覧

これはh2タグの見出しです

これはh3タグの見出しです

これはh4タグの見出しです

これはh5タグの見出しです

抜粋

これは抜粋のダミーです