
・まずはトップページのカスタマイズをしていきたいな!
今回は、こんな声に応えていきます。AFFINGER5はデザイン機能が多くて迷いますが、安心してください!Cocoon3ヵ月、AFFINGER5導入直後の私でも設定できました。
皆さんには、より円滑に設定できる様に初心者目線で解説します!

当サイトのトップページはコチラより確認できます。
本記事の内容について
・AFFINGER5のトップページデザイン全般について
・実際の作り方や手順について
・デザインコードの意味について
・個人的な推奨や経験談について
未導入の方はコチラ:WordPressテーマ 「WING(AFFINGER5)」
トップページ
無料テーマでは初心者に難しいデザインも、AFFINGER5だと簡単にできます。障害となるのは機能性の多さと、不慣れなことですね!この記事を参考にして、さささっと時間を節約してカスタマイズしちゃいましょう^^v
>コンテンツ挿入方法について
大きく分けて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管理画面>デザインで設定できます。
更に下にスクロールすると、フォントの設定ができます。
「丸」・「ポラロイド風」にする
「丸」、「ポラロイド風」は内部リンクのカードデザインなどでは反映しないようです。
「丸」
「ポラロイド風」+「セロテープ(黄色で見難い!)」

反映させたい場合は「記事一覧」や「記事カテゴリー」でデザインしていきます。
フルサイズは、元の画像のまま表示します。比較的表示速度の負担が大きいようです。
非表示も可能です。

Regenerate Thumbnails
WordPress管理画面 > プラグイン > 新規追加 >「Regenerate Thumbnails」で検索しましょう。
画像を「個別」、「一括」でClick1回で自動生成してくれます。不要な画像で圧迫している場合は、赤字をチェックすると削除してくれます。
>【その他】記事の抜粋とフォントについて
WordPressテーマ 「WING(AFFINGER5)」:公式サイト

お勧めの記事などを以下に貼っています。疑問、質問、要望などは「Mail」又は「Twitter@liberal_nurse」のDMまでお気軽にどうぞ^^v