・設定方法や英語の意味を知りたい！
・デザインの使い勝手とかは、どんな感じ？
今回は、こんな声に応えていきます。
AFFINGER5（WING）の初期設定や特典、移行した経緯、トップページなどについては以下の記事をどうぞ！
私も導入して8日目なので、操作性を確認しつつ分かる範囲で説明します。
mobileの方は、左右で違いが分かるのでPC版の方が見易いです！
デザインの一覧では無く、設定方法を見たい場合は、以下よりジャンプできます。
設定
本記事の内容について
・スタイルの実際の動きについて
・一部使用方法不明なスタイルは抜きました
・タグ（テキストパーツ）一覧や設定方法について
・私の使用感やオススメなどについて
AFFINGER5って？
WordPressテーマ 「WING（AFFINGER5）」
様々な優良（有料）テーマの中の1つです。詳しくは下記記事を参考にしてくださいね。
-
-
【AFFINGER】ブログ初心者必見！デザイン性や特典などについて
続きを見る
スタイル
＞テキスト
赤字 太字 赤字（太字） 大文字 小文字 ドット線
参照リンク
参考 必須 打消し 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
メイン
サブ
＞タイムライン
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
＞タイムライン（センター）
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
＞タイムライン（基本ステップ）
step.1
ここにコンテンツ
step.2
ここにコンテンツ
step.3
ここにコンテンツ
＞背景ワイド
背景ワイド
＞タブ（切替ボタン）
タブ1のコンテンツ
タブ2のコンテンツ
＞タブ2つ
タブ1のコンテンツ
タブ2のコンテンツ
＞タイムライン（ブログカード）
＞タイムライン（カウント）
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
タグ＞その他パーツ
＞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】ブログ初心者必見！デザイン性や特典などについて
2020/9/24
-
-
【簡単即解決】YouTubeの埋め込みを中央（センター）表示にする方法
2020/9/24
-
-
【便利】看護記録や仕事が早く終わるパソコンショートカットキー10選
2020/10/5
＞おすすめ記事一覧
[ st-osusume ]
＞ブログカード（参考）
-
-
参考【保存版】初心者必見！AFFINGERデザイン一覧とカスタマイズの方法
続きを見る
＞カテゴリ一覧
＞カテゴリ一覧（スライドショー）
＞ブログカード（チェック）
こちらもCHECK
-
-
【保存版】初心者必見！AFFINGERデザイン一覧とカスタマイズの方法
続きを見る
タグ＞条件表示
・コメントアウト
・エディタ用メモ
・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対応）
お勧めの記事などを以下に貼っています。疑問、質問、要望などは「Mail」又は「Twitter@liberal_nurse」のDMまでお気軽にどうぞ＾＾ｖ
-
-
【AFFINGER】ブログ初心者必見！デザイン性や特典などについて
続きを見る
タイトル
◯代男性