私は長年サイト作成をしていますが、全て独学で必要な事だけ学んで来ましたので、詳しい事はプロの方ほど知りません。作業効率もプロの方には敵いません。
しかしこれでも数千のサイトを作ってきました。もちろんペラサイトも合わせてですが・・・
駆け出しは、HTMLのテンプレートなどを利用して手打ちでサイトを作っていました。そのうちSIRIUSなるサイト作成ソフトに出会い、数千のサイトの管理のし易さと、本格的サイトを簡単に作れる事からSIRIUSが手放せなくなりました。
ですので、長らくの間WordPressに触れることなくサイト作成してきましたので、2018年にやっと勉強しだしたところです。
なるほどSIRIUSには出来ない様々な便利な機能があり、まずはSIRIUSからの移行作業から入りました。
移行作業はある程度の回数を経ると、MultiReplaceという無料ソフトを使えば簡単にできるようになるのですが、移行した後の追加や編集し直しの際に、Affingerのビュジュアルエディターでしか出ないツールなどを使った際に、テキストエディターに戻すとPタグやbrタグが消えたりと（TinymceAdvancedを使っても解決しない場合がある）面倒なことになるので、テキストエディターだけで編集できるようソースコードの備忘録が必要になりましたので作りました。
WordPressテーマ 「WING（AFFINGER5）」
Contents
ビジュアルエディタ＞スタイル
ビジュアルエディタ＞スタイル＞で装飾できます
アニメーション
横揺れ
<span class="faa-horizontal animated fa st-animate">横揺れ</span>
45°揺れ
<span class="fa faa-wrench animated st-animate">45°揺れ</span>
ベル揺れ
<span class="fa faa-ring animated st-animate">ベル揺れ</span>
縦揺れ
<span class="fa faa-vertical animated st-animate">縦揺れ</span>
点滅
<span class="fa faa-flash animated st-animate">点滅</span>
バウンド
<span class="fa faa-bounce animated st-animate">バウンド</span>
回転
<span class="fa faa-spin animated st-animate">回転</span>
ふわふわ
<span class="fa faa-float animated st-animate">ふわふわ</span>
大小
<span class="fa faa-pulse animated st-animate">大小</span>
シェイク
<span class="fa faa-shake animated st-animate">シェイク</span>
シェイク（強）
<span class="st-shake st-animate">シェイク（強）</span>
拡大（ゆれ）
<span class="fa faa-tada animated st-animate">拡大（ゆれ）</span>
過ぎる
<span class="fa faa-passing animated st-animate">過ぎる</span>
戻る
<span class="fa faa-passing-reverse animated st-animate">戻る</span>
バースト
<span class="fa faa-passing-reverse animated st-animate">バースト</span>
落ちる
<span class="fa faa-falling animated st-animate">落ちる</span>
写真
枠線
<p style="text-align:center;"><span class="photoline"><img src="写真URL" alt="" /></span></p>
ポラロイド風
<p style="text-align:center;"><span class="st-photohu"><img src="写真URL" alt="" /></span></p>
ワイド
<div class="st-eyecatch-width"><img src="写真URL" alt="" /></div>
ボックス
<div class="yellowbox">
<p> </p>
</div>
<div class="redbox">
<p> </p>
</div>
<div class="graybox">
<p> </p>
</div>
<div class="inyoumodoki">
<p> </p>
</div>
チェックボックス（番号なしリスト）
- これはダミーのテキストです
- これはダミーのテキストです
<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]
ラベル
[st-label label="おすすめ" bgcolor="#FBC02D" color="#FFFFFF"]]
ラベル
ラベル
ラベル
ラベル
[[/st-label]
流れる文字
流れる文字
<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]
関連
[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]
メモ
[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]
ポイント
[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]]
[[/st-mybox]
注意ポイント
[st-mybox title="注意ポイント" fontawesome="fa-exclamation-circle" color="#ef5350" bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]]
[[/st-mybox]
はてな
[st-mybox title="はてな" fontawesome="fa-question-circle" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]]
[[/st-mybox]
ショートコードガイド
[st-mybox title="見出し" fontawesome="Webアイコン" color="見出し色" bordercolor="枠線カラー" bgcolor="背景色" borderwidth="枠線の太さ（px）" borderradius="角丸（px）" titleweight="見出しの太さ（bold）" fontsize="見出しのフォントサイズ" myclass="オリジナルクラス" margin="マージン"]
見出し付きフリーボックス
基本
見出しは全角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]
メモボックス
メモ
<div class="st-memobox2">
<p class="st-memobox-title">メモ</p>
<p> </p>
</div>
スライドボックス
[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 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"]
[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 url="リンク先URL" title="ボタンテキスト" rel="nofollow" fontawesome="Webアイコン（前）" target="リンク先を新しく開く(blank)" color="文字色" bgcolor="背景色（下）" bgcolor_top="背景色（上）" bordercolor="枠線カラー" borderwidth="枠線の太さ（px）" borderradius="角丸（px）" fontsize="文字サイズ（%）" fontweight="文字の太さ（bold）" width="幅（%）" fontawesome_after="Webアイコン（後）" 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』で反転）
[st-kaiwa1]会話1[/st-kaiwa1]
[st-kaiwa2]会話2[/st-kaiwa2]
[st-kaiwa3]会話3[/st-kaiwa3]
[st-kaiwa4]会話4[/st-kaiwa4]
[st-kaiwa5]会話5[/st-kaiwa5]
[st-kaiwa6]会話6[/st-kaiwa6]
[st-kaiwa7]会話7[/st-kaiwa7]
[st-kaiwa8]会話8[/st-kaiwa8]
[st-kaiwa1 r]会話1[/st-kaiwa1]
ランキング見出し一覧
[st-rank rankno="1" bgcolor="" color="#000" bordercolor="#ccc" radius="" star=""][/st-rank]
[st-rank rankno="2" bgcolor="" color="#000" bordercolor="#ccc" radius="" star=""][/st-rank]
[st-rank rankno="3" bgcolor="" color="#000" bordercolor="#ccc" radius="" star=""][/st-rank]
[st-rank rankno="4" bgcolor="" color="#000" bordercolor="#ccc" radius="" star=""][/st-rank]
ショートコードガイド
[st-rank rankno="ランキング（1～3又は空）" bgcolor="背景色" color="文字色" bordercolor="枠線カラー" radius="角丸（px）" star="スター（5,4,3,2,1）"]ここにテキスト[/st-rank]
レイアウト
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のコンテンツ
[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のコンテンツ
[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]
年月（自動更新）
2019年2月[st-date]
画像付きコメント
[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（前後に[]を付けてください）
記事一覧
記事一覧
-
-
サイトにコードやソースを表示したいときの備忘録
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"]
カテゴリ一覧
-
-
サイトにコードやソースを表示したいときの備忘録
Crayon Syntax Highlighterを使う HTMLやCSS・PHPなどの解説サイトで、よくソースやコード例をキレイに表示してくれているサイトがありますよね？ このように表示するには、W ...
-
-
賢威のデザインパーツ・スタイルの備忘録
このサイトはWING（AFFINGER5）をテーマに使っており、デザイン済みデータのINAZUMAを適用しています。 わざわざ賢威のデザインパーツ・スタイルの備忘録の為にマルチテーマ化するのも面倒なの ...
-
-
アフィンガーの記事パーツの備忘録
私は長年サイト作成をしていますが、全て独学で必要な事だけ学んで来ましたので、詳しい事はプロの方ほど知りません。作業効率もプロの方には敵いません。 しかしこれでも数千のサイトを作ってきました。もちろんペ ...
[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"]
カテゴリ一覧（スライドショー）
[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"]
タグ一覧
-
-
サイトにコードやソースを表示したいときの備忘録
Crayon Syntax Highlighterを使う HTMLやCSS・PHPなどの解説サイトで、よくソースやコード例をキレイに表示してくれているサイトがありますよね？ このように表示するには、W ...
-
-
賢威のデザインパーツ・スタイルの備忘録
このサイトはWING（AFFINGER5）をテーマに使っており、デザイン済みデータのINAZUMAを適用しています。 わざわざ賢威のデザインパーツ・スタイルの備忘録の為にマルチテーマ化するのも面倒なの ...
-
-
アフィンガーの記事パーツの備忘録
私は長年サイト作成をしていますが、全て独学で必要な事だけ学んで来ましたので、詳しい事はプロの方ほど知りません。作業効率もプロの方には敵いません。 しかしこれでも数千のサイトを作ってきました。もちろんペ ...
[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"]
タグ一覧（スライドショー）
[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"]
スライドショー画像のみ（※クラス）
<div class="st-slider-img"> </div>
おすすめ記事一覧
RECOMMEND
[st-osusume]
条件表示
コメントアウト
[st-out]コメントアウト[/st-out]
PC閲覧時のみ表示
PC閲覧時のみ表示[pc]PC閲覧時のみ表示[/pc]
PC閲覧時のみ非表示
[nopc]PC閲覧時のみ非表示[/nopc]
AMPページのみ表示
[st-amp]AMPページのみ表示[/st-amp]
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タグの見出しです
抜粋
これは抜粋のダミーです
スクロールテーブル
| ダミーのテキスト | ダミーのテキスト | ダミーのテキスト | ダミーのテキスト |
| ダミーのテキスト | ダミーのテキスト | ダミーのテキスト | ダミーのテキスト |
これはh5タグの見出しです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはh5タグの見出しです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはh4タグの見出しです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはh5タグの見出しです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはh5タグの見出しです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはh2タグの見出しです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはh3タグの見出しです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはh3タグの見出しです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
これはh4タグに「カウント」を設定しています
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはh4タグに「カウント」を設定しています
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これはh4タグに「カウント」を設定しています
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
これは「まとめ用」の見出しです
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
タイトル
◯代男性