質問・要望など

Mail」又は「Twitter@liberal_nurse」のDMまでお気軽にどうぞ^^v

Web・Life

【初心者】完全版!AFFINGER5のトップページカスタマイズ法

2020年9月10日

アバター

集中治療室で10年以上働き、ブログを起点に様々な情報を発信しています。臨床や投資、お金の知識を基に、専門書やガイドラインなどでリサーチをしてから執筆中!Web関連、看護、お金、職場環境の情報などを発信しています。

・AFFINGER5のデザイン設定が分からないなあ・・・。

・まずはトップページのカスタマイズをしていきたいな!

 

今回は、こんな声に応えていきます。AFFINGER5はデザイン機能が多くて迷いますが、安心してください!Cocoon3ヵ月、AFFINGER5導入直後の私でも設定できました。

皆さんには、より円滑に設定できる様に初心者目線で解説します!

AFFINGER5にしてから楽し過ぎて、連日12時間くらい記事を触ってしまっている! 私のサイトに関連付けて、補足しつつ設定方法を説明していきます!

当サイトのトップページはコチラより確認できます。

本記事の内容について

・AFFINGER5のトップページデザイン全般について

・実際の作り方や手順について

・デザインコードの意味について

・個人的な推奨や経験談について

未導入の方はコチラ:WordPressテーマ 「WING(AFFINGER5)」

トップページ

無料テーマでは初心者に難しいデザインも、AFFINGER5だと簡単にできます。障害となるのは機能性の多さと、不慣れなことですね!この記事を参考にして、さささっと時間を節約してカスタマイズしちゃいましょう^^v

>コンテンツ挿入方法について

大きく分けて2種類です!

AFFINGER5管理画面>トップページをクリックします。

①「トップページに固定記事を挿入」

②「挿入コンテンツ」

私は①で固定記事を挿入しています。但し、管理画面は触らずに固定記事を作成して、WordPressの表示設定で「ホームページ」にしています。②の挿入コンテンツでも、ページが違うだけで同様に設定していけばデザイン可能です。

順に説明していきます。

手順(各Stepの解説は後述しています)

>【解説】固定ページのレイアウトについて

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)」:公式サイト

AFFINGER PACK3(WING対応):公式サイト

今回は以上になります。参考になれば幸いです。

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

 

  • 執筆者
  • 最新記事
アバター

集中治療室で10年以上働き、ブログを起点に様々な情報を発信しています。臨床や投資、お金の知識を基に、専門書やガイドラインなどでリサーチをしてから執筆中!Web関連、看護、お金、職場環境の情報などを発信しています。

-Web・Life

© 2020 Liberal Nurse -リベラルナース-