
・設定方法や英語の意味を知りたい!
・デザインの使い勝手とかは、どんな感じ?
今回は、こんな声に応えていきます。
AFFINGER5(WING)の初期設定や特典、移行した経緯、トップページなどについては以下の記事をどうぞ!
私も導入して8日目なので、操作性を確認しつつ分かる範囲で説明します。
mobileの方は、左右で違いが分かるのでPC版の方が見易いです!
デザインの一覧では無く、設定方法を見たい場合は、以下よりジャンプできます。
設定
本記事の内容について
・スタイルの実際の動きについて
・一部使用方法不明なスタイルは抜きました
・タグ(テキストパーツ)一覧や設定方法について
・私の使用感やオススメなどについて
AFFINGER5って?
WordPressテーマ 「WING(AFFINGER5)」
様々な優良(有料)テーマの中の1つです。詳しくは下記記事を参考にしてくださいね。
-
-
【AFFINGER】ブログ初心者必見!デザイン性や特典などについて
・AFFINGER5の購入を迷ってて・・・。 ・無料テーマとの違いは何なの? ・どんな機能が備わっているの? 今回は、こんな声に応えていきます。 筆者は開始3ヶ月目の初心者で、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
メイン
サブ
>タイムライン
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
>タイムライン(センター)
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
>タイムライン(基本ステップ)
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 ]

タグ>記事一覧/カード

[ 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
・AFFINGER5の購入を迷ってて・・・。 ・無料テーマとの違いは何なの? ・どんな機能が備わっているの? 今回は、こんな声に応えていきます。 筆者は開始3ヶ月目の初心者で、AFFINGER5を導入 ...
-
-
【簡単即解決】YouTubeの埋め込みを中央(センター)表示にする方法
2020/9/24
YouTubeの埋め込み後のセンター表示が分からない・・・。 色々調べて、試してみたのに全然中央にならないよ? 今回は同じ悩みを抱えた方に、記事として残します。 私も色々調べて「CSS」 ...
-
-
【便利】看護記録や仕事が早く終わるパソコンショートカットキー10選
2020/11/8
・仕事が定時に終わらない・・・。 ・レポートを早く終わらせたいな。 ・厳選したショートカットキーを知りたいな。 今回は、こんな声に応えていきます。 パソコンを使って仕事や作業をする人は多いのでは?看護 ...
>おすすめ記事一覧
[ st-osusume ]

>ブログカード(参考)
-
-
参考【保存版】初心者必見!AFFINGERデザイン一覧とカスタマイズの方法
・AFFINGER5の文章スタイルを一覧で見たいな。 ・設定方法や英語の意味を知りたい! ・デザインの使い勝手とかは、どんな感じ? 今回は、こんな声に応えていきます。 AFFINGER5(WING)の ...
続きを見る
>カテゴリ一覧
-
-
気胸・緊張性気胸とは?症状・治療などを解説します<看護師国家試験>
・気胸って? ・どんな病態なんだろ? 今回は、こんな声に応えていきます。 本記事の内容について 気胸とは 種類と特徴について 症状・検査・治療など 目次 1.気胸とは>好発>ブラ・ブレブ2.気胸の症状 ...
-
-
【COPD】慢性閉塞性肺疾患の原因・検査・治療など<看護師国家試験>
・COPDって? ・病態や観察のポイントは? 今回は、こんな声に応えていきます。 本記事の内容について 慢性閉塞性肺疾患(COPD)とは 症状・検査・治療などについて 目次 1.慢性閉塞性肺疾患(CO ...

>カテゴリ一覧(スライドショー)

>ブログカード(チェック)
こちらもCHECK
-
-
【保存版】初心者必見!AFFINGERデザイン一覧とカスタマイズの方法
・AFFINGER5の文章スタイルを一覧で見たいな。 ・設定方法や英語の意味を知りたい! ・デザインの使い勝手とかは、どんな感じ? 今回は、こんな声に応えていきます。 AFFINGER5(WING)の ...
続きを見る
タグ>条件表示

・コメントアウト
・エディタ用メモ
・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日目の私でも簡単に使えています。悩んでいる方は、是非参考にしてみてくださいね^^v
WordPressテーマ 「WING(AFFINGER5) AFFINGER PACK3(WING対応)

お勧めの記事などを以下に貼っています。疑問、質問、要望などは「Mail」又は「Twitter@liberal_nurse」のDMまでお気軽にどうぞ^^v
-
-
【AFFINGER】ブログ初心者必見!デザイン性や特典などについて
・AFFINGER5の購入を迷ってて・・・。 ・無料テーマとの違いは何なの? ・どんな機能が備わっているの? 今回は、こんな声に応えていきます。 筆者は開始3ヶ月目の初心者で、AFFINGER5を導入 ...
続きを見る
タイトル
◯代男性