・設定方法や英語の意味を知りたい！
・デザインの使い勝手とかは、どんな感じ？
今回は、こんな声に応えていきます。
AFFINGER5（WING）の初期設定や特典、移行した経緯、トップページなどについては以下の記事をどうぞ！
-
-
【AFFINGER】ブログ初心者必見！デザイン性や特典などについて
AFFINGER5の購入を迷ってて･･･。無料テーマとの違いは何なの？どんな機能が備わっているの？ 今回は、こんな声に応えていきます。 当記事で分かる ...
続きを見る
私も導入して8日目なので、操作性を確認しつつ分かる範囲で説明します。
mobileの方は、左右で違いが分かるのでPC版の方が見易いです！
デザインの一覧では無く、設定方法を見たい場合は、以下よりジャンプできます。
設定
本記事の内容について
・スタイルの実際の動きについて
・一部使用方法不明なスタイルは抜きました
・タグ（テキストパーツ）一覧や設定方法について
・私の使用感やオススメなどについて
目次
AFFINGER5って？
WordPressテーマ 「WING（AFFINGER5）」
様々な優良（有料）テーマの中の1つです。詳しくは下記記事を参考にしてくださいね。
-
-
【AFFINGER】ブログ初心者必見！デザイン性や特典などについて
AFFINGER5の購入を迷ってて･･･。無料テーマとの違いは何なの？どんな機能が備わっているの？ 今回は、こんな声に応えていきます。 当記事で分かる ...
続きを見る
スタイル
テキスト
赤字 太字 赤字（太字） 大文字 小文字 ドット線
参照リンク
参考 必須 打消し Code Code風
NotoSans Rounded M+1c
アイコン
はてな
注意
人物
チェック
メモ
王冠
初心者マーク
見出し
記事タイトル
h2風
h3風
h4風
h5風
まとめ
カウント
目次などに影響を与えず目立たせるには良いですね。
写真
枠線
ポラロイド風
ワイド
アニメーション
45度 faa-wrench animated
ベル faa-ring animated
横 faa-horizontal animated
縦 faa-vertical animated
点滅 faa-flash animated
バウンド faa-bounce animated
回転 faa-spin animated
ふわふわ faa-float animated
大小 faa-pulse animated
シェイク faa-shake animated
シェイク強 st-shake
拡大 faa-tada animated
過ぎる faa-passing animated
戻る faa-passing-reverse animated
バースト faa-burst animated
落ちる faa-falling animated
スタイルから入れると、上記の様に動きを出せます。コードの場合は、fontawesomeの後にアイコン名を入れて、半角空けて入力します（詳細後述）。
この一覧みたいにアニメーションが多過ぎると目障りになるのもよく分かります。特に4種類程、主張が強いなあ･･･（笑
ランキング
1位 AFFINGER5
2位
3位
4位
マーカー
黄マーカー黄マーカー（細）
赤マーカー赤マーカー（細）
青マーカー青マーカー（細）
鼠マーカー鼠マーカー（細）
ボックス
黄色
グレー
引用風
ワイド背景
ワイド背景（左寄）
ワイド背景（右寄）
タグ＞テキストパーツ
クリップメモなど、多くのタグの構成は以下の様になっています。
[ st-cmemo fontawesome="" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize="" ] 文章 [/st-cmemo ]
これを分解してカスタマイズをする場合、下の通りです。慣れないうちは「文章」の部分を打つだけでも使えるので、気にせず徐々に慣れれば良いと思います。
fontawesome="アイコン（+アニメーション）"
⇒ fontawesome4（Webフォント）：初期設定以外のアイコンはコチラ ※Ver5.0以降は未対応
初期設定は、タグ＞ショートコード補助＞Webアイコンで呼び出せます。
⇒ アニメーションは半角空けて上述したテキストを入力すると設定できます。
初期設定は、タグ＞ショートコード補助＞アニメーションで呼び出せます。（呼び出すと自動で半角空けてくれるので、連続入力でOK）
iconcolor="#919191" アイコンカラー
bgcolor="#fafafa" 背景カラー
color="#000000" 文字カラー
bordercolor="#" ボーダー（枠線）カラー
⇒Material Design Colors（マテリアルカラーのパレット）：materialui.co（クリックでコピー可能）
カラー系は「#+英数字6文字」の形式で設定します。
borderwidth="数字" ボーダー（枠線）の幅
iconsize="数字" アイコンサイズ
クリップメモ
メモ
外部リンク
ブックマーク
おしらせ
はてな
コメント
コード
ポイント
ユーザー
初心者
注意文
注意文（グレー）
ミニふきだし
基本
オレンジ
ピンク
ブルー
グリーン
レッド
マイボックス
まるもじ（小）
基本 オレンジ ピンク ブルー うすい注意 注意まるもじ（大）
基本
オレンジ
ピンク
ブルー
はてな
チェック
うすい注意
注意
HTML＞ルビ（ふりがな）
ルビ（ふりがな）
カスタムフォント
デフォルト
白影
ステップ
step
1test
step
2test
step
3test
クリップメモ（テキスト）
メモ
参考
関連
注意
Check
次へ進む
前に戻る
質問
回答
複合（+アイコンなし）
自由なメモ
自由なメモ
自由なメモ
ココがポイント
ココがポイント
ココがポイント
ココがおすすめ
ココがおすすめ
ココがおすすめ
ココがダメ
ココがダメ
ココがダメ
ココに注意
ココに注意
ココに注意
さらに詳しく
もっと詳しく
もっと詳しく
つまづきポイント
◯才女性
女性コメント
◯才男性
男性コメント
ポイント
ポイント
ラベル
ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。ここに文章を入力します。
流れる文章
流れる文章（marquee風）
タグ＞ボックスデザイン
WordPressテーマ 「WING（AFFINGER5）」
画像URLは、ワードプレス＞メディアライブラリ＞画像選択＞画像のURLコピーで引用できます。
全てを貼り付けると、編集画面で画像が表示されてしまうので、私は最後のアルファベットだけ残してコピー＞貼り付け＞手打ちをしています。
下の赤字は初期設定です。
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 url="" ：リンク先設定
rel="nofollow" ：リンク属性設定
target="" ：新しいタブでの開閉設定
fontawesome="" ：アイコン
title="タイトル" ：見本「タイトル」
width="" ：幅
height="" ：高さ
color="#fff" ：文字色
fontsize="200" ：文字の大きさ
radius="0" ：角丸
shadow="#424242" ：影
bordercolor="#ccc" ：枠線色
borderwidth="1" ：枠線幅
bgcolor="#ccc" ：背景色
backgroud_image="" ：背景画像（メディアURL）
blur="on" ：ぼかし（OFF：空欄）
left="" ：左寄せ
margin_bottom="0" ：隣との間隔
バナー風ボックス
タイトル
基本（ボタン設置など可能）
タイトル
背景無し
タイトル
左寄せ
バナーの設定について
バナーリンク「ClickでTopに飛びます」（st-flexbox url）、新しいタブで開く（target：on）、アイコン「ハート」+アニメーション「バウンド」（fontawesome）、バナーの設定について（title）、#000000（color）、150（fontsize）、20（radius）、#673AB7（bordercolor）、#E0F7FA（bgcolor）
背景無し
画像付（backgroud_image）、off（blur）、文章中にボタン機能挿入済
左寄せ
画像付（backgroud_image）、""「空欄」（blur）
マイボックス
ポイント
基本
しかく（枠のみ）
まるみ
参考
参考
関連
関連
メモ
メモ
ポイント
ポイント
注意ポイント
注意ポイント
はてな
はてな
ふきだしテキスト
＋ミニふきだし
ショートコード
見出し付きフリーボックス
見出し（全角15文字）
基本
注意
注意
はてな
はてな
ポイント
ポイント
メモ
メモ
見出し（全角15文字）
基本（タイトル幅100%）
こんな方におすすめ（v）
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
チェックボックス（番号なしリスト）
番号なしリスト
こんな方におすすめ[v]
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
マイボックス（+CSSクラス）
メモ
メモ
メモ
メモ（下線のみ）
メモ
メモ（枠のみ）
メモ
メモ（枠・下線あり）
ここに注意
注意（下線のみ）
必要なモノ
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
必要なモノ（ドット下線）
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
チェックリスト
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
チェックリスト（ドット下線）
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
簡単な流れ
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
簡単な流れ（ドット下線）
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
メモボックス
メモ
メモボックス
スライドボックス
+ クリックして下さい
ガイドマップメニュー
pre
html
pre
pre:terminal
command
pre:terminal
pre:shortcode
[/] shortcode
pre:shortcode
タグ＞カスタムボタン
ボックスメニュー
[ st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type="" ]
[ st-box-btn-list icon_image="" fontawesome="fa-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold" ]
カスタマイズ＞メニューのカラー設定＞ボックスメニューでも色は変えられます。
myclass="" ：CSS設定
pc_show="4" ：列数（PC）
margin= ：周囲との間隔
type="vertical" ：空欄で横並び（左だと縦並び）
icon_image="" ：アイコン画像（URL）
fontawesome="" ：文字アイコン
icon_size="" ：アイコンサイズ
text=" ：文章
subtext="" ：サブ文章
url="" ：リンク
target="blank" ：新規タブで開く（off：空欄）
rel="" ：nofollow設定
bgcolor="#ccc" ：背景色
color="#fff" ：文字色
fontsize="200" ：文字の大きさ
fontweight="bold" ：太さ
適当ですけど、こんな感じにカスタムできます！
（pc_show="2"で2列表示）
会話ふきだし
AFFINGER5管理画面＞会話・ファビコン等＞会話風アイコンで設定しましょう。アイコン名を入れると、アイコンの下に表示されます。
私はアイコン名を入れていないので、表示されないです。
タグ＞ランキング
1位（基本）
2位
3位
4位以下
ID：[ st_af id="" ]
Slug：[ st_af name="" ]
Rank：[ st-rankgroup id="" label="" name="" ]
タグ＞レイアウト
WordPressテーマ 「WING（AFFINGER5）」
当サイトのトップページ（新着記事以下）も、この機能を使っています。結構使います＾＾
全サイズ
50%
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
50%
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
PCとTab（959px以上）
70%
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
30%
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
DIV
メイン
サブ
タイムライン
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
タイムライン（センター）
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
背景ワイド
背景ワイド
タブ（切替ボタン）
タブ1のコンテンツ
タブ2のコンテンツ
タブ2つ
タブ1のコンテンツ
タブ2のコンテンツ
タイムライン（カウント）
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
タイムライン（基本ステップ）
step.1
ここにコンテンツ
step.2
ここにコンテンツ
step.3
ここにコンテンツ
タイムライン（ブログカード）
タグ＞その他パーツ
Googleアイコン
有効にしないと･･･
desktop_macphone_iphonetablet_mactimerlocation_ondirections_bikedirections_rundirections_cardirections_transitsubwayflightlocal_parkingrestaurantstore_mall_directorycakesmoking_roomsarrow_backarrow_downwardarrow_forwardarrow_upwardradio_button_uncheckedclosemoodmood_badsentiment_satisfiedsentiment_very_dissatisfiedthumb_up_altthumb_down_alterrornew_releases
スター
・・・・・・
画像付きコメント
目次（カスタム）
目次（+TOC）
[ toc ]
アドセンス
[ adsense ]
オリジナルショートコード
YouTube
三角（下矢印）
スクロールナビ
タグ＞記事一覧/カード
[ st-catgroup cat="0" page="2" 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="2" ：表示記事数
order="desc" ：降順・昇順
orderby="id" ：並び順
child="on" ：子カテゴリー設定
slide="off" ：スライド設定
slides_to_show="3,3,2" ：スライド枚数（画面の大きさを”大、中、小”の順で指定できる）
slide_date="" ：日付
slide_more="ReadMore" ：任意の言葉でClick誘導ができる
slide_center="off" ] ：onだとmobileで両端が切れる
記事一覧
-
-
【AFFINGER】ブログ初心者必見！デザイン性や特典などについて
2021/5/27 生活
AFFINGER5の購入を迷ってて･･･。無料テーマとの違いは何なの？どんな機能が備わっているの？ 今回は、こんな声に応えていきます。 当記事で分かる ...
-
-
【簡単即解決】YouTubeの埋め込みを中央（センター）表示にする方法
YouTubeの埋め込み後のセンター表示が分からない･･･。 色々調べて、試してみたのに全然中央にならないよ？ 今回は同じ悩みを抱えた方に、記事として ...
-
-
【便利】看護記録や仕事が早く終わるパソコンショートカットキー10選
仕事が定時に終わらない･･･。レポートを早く終わらせたいな。厳選したショートカットキーを知りたいな。 今回は、こんな声に応えていきます。パソコンを使っ ...
おすすめ記事一覧
[ st-osusume ]
ブログカード（参考）
-
-
参考【保存版】初心者必見！AFFINGERデザイン一覧とカスタマイズの方法
・AFFINGER5の文章スタイルを一覧で見たいな。 ・設定方法や英語の意味を知りたい！ ・デザインの使い勝手とかは、どんな感じ？ 今回は、こんな声に ...
続きを見る
カテゴリ一覧
-
-
【医療学生】iPad・タブレット・アプリなどを活かした図解ノート作成方法について
iPadを使っているんだけど、良いノートのまとめ方は無いかな？ 今回は、こんな声に応えていきます。 当記事で分かること iPad活用術 目次 iPad ...
-
-
糖新生とは？ダイエット・筋肉・アミノ酸・肝臓・血糖値などとの関係について
糖新生って何のこと？ 今回は、こんな声に応えていきます。 当記事で分かること 糖新生とは アミノ酸・グリセロールって？ 肝臓での代謝について 筋肉・血 ...
カテゴリ一覧（スライドショー）
ブログカード（チェック）
こちらもCHECK
-
-
【保存版】初心者必見！AFFINGERデザイン一覧とカスタマイズの方法
・AFFINGER5の文章スタイルを一覧で見たいな。 ・設定方法や英語の意味を知りたい！ ・デザインの使い勝手とかは、どんな感じ？ 今回は、こんな声に ...
続きを見る
タグ＞条件表示
・コメントアウト
・エディタ用メモ
・PC閲覧時のみ表示
・PC閲覧時のみ非表示
・AMPページのみ表示
・AMPページのみ非表示
・フロントページのみ表示
・フロントページのみ非表示
・指定したカテゴリーIDのみ非表示
・ログイン時のみ表示
・ログアウト時のみ表示
タグ＞ショートコード補助
Webアイコン（クラス）
fontawesome
メモ：fa-file-text-o
チェック：fa-check
チェック（v）：fa-check-circle
チェック[v]：st-svg-checkbox
注意：fa-exclamation-circle
はてな：fa-question-circle
虫メガネ：fa-search
虫メガネ（+）：fa-search-plus
矢印右：fa-chevron-right
矢印下：fa-chevron-down
矢印右2：fa-angle-double-right
矢印下2：fa-angle-double-down
矢印右3：fa-angle-right
矢印下3：fa-angle-down
ハート：fa-heart
ユーザー：fa-user
コメント：fa-comments
電球：fa-lightbulb-o
おしらせ：fa-bullhorn
メール：fa-envelope
コード：fa-code
ギフト：fa-gift
ダイアモンド：fa-diamond
ダウンロード：fa-download
Twitter：fa-twitter
Facebook：fa-facebook-square
YouTube：fa-youtube-play
Amazon：fa-amazon
王冠：st-svg-oukan
初心者：st-svg-bigginer_l
アニメーション（クラス）
HTMLカラーコード
白#ffffff
赤濃#e53935
赤#f44336
赤薄#ffebee
青濃#039BE5
青#03A9F4
青薄#E1F5FE
緑濃#FFB300
緑#4CAF50
緑薄#E8F5E9
橙濃#FFB300
橙#FFC107
橙薄#FFF3E0
黒濃#212121
黒#424242
黒薄#FAFAFA
黄薄#FFFDE7
HTMLカラーコード（ブランド）
Twitter#40a2f5
Facebook#415c9d
はてな#3290e1
WordPress#2d88c0
Amazon#eb9100
LINE#39b900
定型文
＼ バンザイ ／ ：＼ バンザイ ／
詳細は公式サイトにて：※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。
無断利用禁止：※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。
ダミーテスト：これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
まとめ
まとめ
今回は、文章デザイン全般の設定や見栄えなどを解説しました。Cocoon3ヶ月、AFFINGER8日目の私でも簡単に使えています。悩んでいる方は、是非参考にしてみてくださいね＾＾ｖ
WordPressテーマ 「WING（AFFINGER5） AFFINGER PACK3（WING対応）
-
-
【AFFINGER】ブログ初心者必見！デザイン性や特典などについて
AFFINGER5の購入を迷ってて･･･。無料テーマとの違いは何なの？どんな機能が備わっているの？ 今回は、こんな声に応えていきます。 当記事で分かる ...
続きを見る
タイトル
◯代男性