今回は、こんな声に応えていきます。AFFINGER5はデザイン機能が多くて迷いますが、安心してください！Cocoon3ヵ月、AFFINGER5導入直後の私でも設定できました。
皆さんには、より円滑に設定できる様に初心者目線で解説します！
当サイトのトップページはコチラより確認できます。
本記事の内容について
- AFFINGER5のトップページデザイン全般について
- 実際の作り方や手順について
- デザインコードの意味について
- 個人的な推奨や経験談について
未導入の方はコチラ：WordPressテーマ 「WING（AFFINGER5）」
目次
トップページ
無料テーマでは初心者に難しいデザインも、AFFINGER5だと簡単にできます。障害となるのは機能性の多さと、不慣れなことですね！この記事を参考にして、さささっと時間を節約してカスタマイズしちゃいましょう＾＾ｖ
コンテンツ挿入方法について
大きく分けて2種類です！
AFFINGER5管理画面＞トップページをクリックします。
①「トップページに固定記事を挿入」
②「挿入コンテンツ」
私は①で固定記事を挿入しています。但し、管理画面は触らずに固定記事を作成して、WordPressの表示設定で「ホームページ」にしています。②の挿入コンテンツでも、ページが違うだけで同様に設定していけばデザイン可能です。
順に説明していきます。
手順（各Stepの解説は後述しています）
- WordPress管理画面＞固定ページ＞新規作成
- （画像赤）「h1」（タイトル）は非表示にできるので、好きなタイトルにしましょう
- （画像赤）「題名（新着記事・PickUpなど）を「h3」・「h2」などの見出しで作る
- （画像青）「2列以上にする場合は、タグ＞レイアウト＞PCとTabで分割できます（レイアウト＞全サイズを選ぶと、mobile版が崩れるので注意！）
- 題名の数だけ、以下の手順でデザインを作っていきます
- （画像緑）バナー（画像の「学生」・「臨床」のところ）を作る
- タグ＞記事一覧/カード＞カテゴリー一覧（スライドショー）で作成する
- スライドショーが必要無ければ「記事一覧」や「カテゴリー一覧」などでも可能です
- 固定ページ完成後、ホームページ設定をします
- これでトップページは完成です！
【解説】固定ページのレイアウトについて
step
2-6解説
バナーコードの意味は以下の通りです。
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" ：隣との間隔
以下よりURLをコピーして、「backgroud_image="画像URL" 」に入れます。そのまま貼り付けると画像が表示されてしまうので、私は最後の1文字だけコピーしないで貼り付け、手打ちで入れてます。
【解説】記事一覧・カテゴリーの設定について
step
7-8解説
詳しくデザインなどを参照したい場合はコチラ
[ 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で両端が切れる
左：ID指定 中央：カテゴリ指定 右：スライドショー
【解説】トップページを固定ページに設定する方法について
step
9解説
どちらでも良いです！
左：ページ＞カスタマイズ＞ホームページ設定＞固定ページチェック＞ホームページ＞任意の固定ページを選択
右：WordPress＞設定＞表示設定＞固定ページチェック＞ホームページ＞任意の固定ページを選択
【その他】NEWS表示と動画背景について
AFFINGER5管理画面＞トップページで以下の設定ができます。
【その他】レイアウト・サムネイルの変更について
AFFINGER5管理画面＞デザインで設定できます。
更に下にスクロールすると、フォントの設定ができます。
メディア設定にする
スライドショー、「EX」、「JET」、AMPなどでは非対応とのこと
WordPress＞設定＞メディア＞サムネイルのサイズで設定したサイズになります。
「丸」・「ポラロイド風」にする
「丸」、「ポラロイド風」は内部リンクのカードデザインなどでは反映しないようです。
「丸」
「ポラロイド風」+「セロテープ（黄色で見難い！）」
反映させたい場合は「記事一覧」や「記事カテゴリー」でデザインしていきます。
フルサイズは、元の画像のまま表示します。比較的表示速度の負担が大きいようです。
非表示も可能です。
Regenerate Thumbnails
WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「Regenerate Thumbnails」で検索しましょう。
画像を「個別」、「一括」でClick1回で自動生成してくれます。不要な画像で圧迫している場合は、赤字をチェックすると削除してくれます。
【その他】記事の抜粋とフォントについて
WordPressテーマ 「WING（AFFINGER5）」：公式サイト
