こんな悩みを持っている方に向けた記事になります。
本記事の内容
- タグ機能：条件表示とショートコード補助の種類と作成方法
僕もPCの知識や経験も仕事でエクセルやパワーポイントなどは使用していた程度で、
家ではPCはほとんど触れてこない人生でした。（現在も苦手です）
そんは僕でも他の記事や取説を勉強しながら覚えていきました。
初心者の方でも分かり易いように記事をまとめていますので役立ててもらえるはずです。
ではタグ内の条件表示・ショートコード補助の解説をしていきます。
もくじ
条件表示
条件表示には9個の機能があります。
下記のようなものがあります。
- コメントアウト
- エディタ用メモ
- PC閲覧時のみ表示
- PC閲覧時のみ非表示
- AMPページのみ表示
- AMPページのみ非表示
- フロントページのみ表示
- フロントページのみ非表示
- 指定したカテゴリーIDのみ表示
メモ
コードの間に文字やタグなどを入れることで、表示・非表示の設定が出来ます。
自分だけのメモの使い方や、PCとスマホそれぞれに対して表示・非表示出来るので便利です。
条件表示については以上になります。
ショートコード補助：デザインと設定方法
どんなデザイン・設定方法なのか確認したい方
ショートコード補助について解説していきます。
Webアイコン（クラス）
Webアイコンには29個の機能があります。
アイコンを自分で設定可能になります。
※アイコン設定用としてボックスデザインのしかく（枠のみ）を使用
ではアイコンのデザインを見ていきましょう。
メモ
チェック
チェック
注意
はてな
虫メガネ
虫メガネ（+）
矢印右
矢印下
矢印右2
矢印下2
矢印右3
矢印下3
ハート
ユーザー
コメント
電球
おしらせ
メール
コード
ギフト
ダイヤモンド
ダウンロード
YouTube
Amazon
王冠
初心者
ポイント
作成方法：『st-mybox title="" fontawesome=""』 titleの””内に名称入力 fontawesomeの""内にコード入力で完成
アイコンのデザインを参考にして使用してみて下さい。
webアイコンデザインと設定方法は以上になります。
アニメーション（クラス）
アニメーションには15個の機能があります。
アイコンにアニメーション（動き）を付ける設定が出来ます。
※クリップメモのメモで参考に載せます。
ベル揺れ
横揺れ
縦揺れ
点滅
バウンド
回転
ふわふわ
大小
シェイク
シェイク（大）
拡大（ゆれ）
過ぎる
戻る
バースト
落ちる
ポイント
作成方法：『fontawesome="fa-check-circle アニメーションのコード" 』fontawesomeのアイコンコード横にコードを追加することで完成
アニメーションについては以上になります。
HTMLカラーコード
HTMLカラーコードには17個の機能があります。
この機能を使えば色の変更が効率的に出来るようになります。
色の変更したいコードにこのカラーコードを変更すればOKです。
白（#ffffff）
赤濃（#e53935）
赤（#f44336）
赤薄（#ffebee）
青濃（#039BE5）
青（#03A9F4）
青薄（#E1F5FE）
緑濃（#43A047）
緑（#4CAF50）
緑薄（#E8F5E9）
橙濃（#FFB300）
橙（#FFC107）
橙薄（#FFF3E0）
黒濃（#212121）
黒（#424242）
黒薄（#FAFAFA）
このテキストは最後に消して下さい（50%）
黄薄（#FFFDE7）
どのな色なのか把握したい人はご活用ください。
HTMLカラーコード（ブランド）
HTMLカラーコード（ブランド）には6個の機能があります。
各ブランドの色コードに設定可能です。
使用方法は上記のカラーコードと同様です。
Twitter（#40a2f5）
Facebook（#415c9d）
hatena（#3290e1）
WordPress（#2d88c0）
Amazon（eb9100）
LINE（#39b900）
カラーコードについては以上になります。
定型文
定型文には4個の機能があります。
このタグで定型文を1発で入力することが出来ます。
①：＼ バンザイ ／
②：※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。
③：※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。
④：これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
定型文については以上になります。
条件表示とショートコード使用時の参考になれば幸いです。
今回の記事は以上になります。