AFIINGER５から６になって新たにブログの固定ページ（トップページ）を見やすく設定しようと思ったけど、
作成方法を調べてもAFIINGER５の情報ばかり出てきてしまって、管理画面が意外と変更されていて作成が大変だったので。
ネット検索すると違う情報が出て来てAFIINGER６の管理画面にはそのタブがない・・・。
そんな方の為に解説していこうと思います。
Contents
固定ページを作成する
最初に固定ページを作成します。
「管理画面」⇒「固定ページ」 ⇒「新規追加」
タイトルには自身で分かりやすい名前を入れましょう。
後ほど使用するので記事IDをメモしておいてください。
次に固定ページをホームページに選択します
「AFIINGER管理」⇒「トップページ」⇒「記事IDを入力」
「固定ページ」で作成した記事ＩＤを入力します。
入力したら「save」をクリック。
私のトップページを確認したい方はクリック。
⇓⇓⇓
ヘッダー画像の設定方法
まずは赤枠のヘッダー画像の設定からしていきましょう。
「管理画面」⇒「外観」⇒「カスタマイズ」の順にクリック
次に「ヘッダー画像」をクリック
私の場合は既に設定されてしまっていますが。
「新規画像を追加」をクリックして、画像を追加します。
画像がいくつか設定できるので入れることで、ランダムに表示されます。
もし、表示しない場合は「画像を非表示」をクリックすると表示されなくなります。
横にプレビュー画面が出ているのでそこを確認しながらどのように表示されるか自身で調整をしていってください。
「公開」をクリックで完了です。
ヘッダーカードの設置方法
赤枠のヘッダーカードを設置していきましょう。
トップページの目につく場所に表示される部分となりますので。
設置しておくことでアクセス数や収益化が見込めます！！
ヘッダーカードを設置方法を
検索したら「おすすめ記事一覧」をと書いてあるのにそのタブがない・・・。
AFIINGER６では
「AFIINGER管理」⇒「ヘッダー下/おすすめ」をクリック
右のヘッダーカードの部分に情報を入力していきます。
画像URLを入力
画像素材のサイトで画像を探しています。
私のブログの画像の大半はオーダンというサイトからダウンロードしています。
オーダンの公式サイトはこちらをクリック
⇓⇓⇓
画像URLって何？
画像URLですが、初心者ならどれ？
ってなります。
画像URLを取得するサイトや方法も色々あるのですが、私が行っている簡単な方法をお伝えします。
「メディア追加」から画像を選びます。
「ビジュアル」画面に画像が挿入されます。
画像が挿入されたら「テキスト」画面に切り替えます。
このように画像のHTMLが入力されています。
赤線の部分が画像URLになるのでその部分を使用しましょう。
http://chip-secret0209.gladcry.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-28-113217-300x184.jpg
これで取得した画像URLを貼りつけしましょう。
テキスト
ヘッダーカードに表示させてい文字になります。
リンクURL
クリックした際に飛んで欲しい。
ブログのページURLになります。
自身のサイトの表示したいページを開いてコピペしましょう。
ブログカードは４枚設置出来るので、同じ作業をして作成してください。
また、私のブログの場合は設定した画像がぼかす設定になっています。
４枚登録した少し下を見るとこのような画面があります。
ぼかしを入れる、画像を暗くするなどを選択できる為。
使用してみてもいいです。
完成したら、右端の「save」をクリックして完成です。
プレビュー画面で確認してみましょう。
スライドショーの設置方法
トップページのこの部分になります。
この部分はとても簡単に作成出来ます。
「タグ」⇒「記事一覧/カード」⇒「カテゴリ一覧スライドショー」
上記をクリックするだけで完成です。
新着記事の部分は、新着記事と記入し見出し３を選ぶだけです。
ブログカードの設置
おすすめ記事の部分は見出し３で設置します。
バナー画像部分とブログカードの設置を行って行きましょう。
「タグ」⇒「PCとtab」⇒「左右５０％」
このように表示されます。
バナー画像部分の設置
「タグ」⇒「ボックスデザイン」⇒「バナー風ボックス」⇒「基本」
左右に同じ様に入力していきます。
st-flexbox url="" ""の間にリンク先のURLをコピペ
title="タイトル" ""の間に表示したいタイトルを記入
backgroud_image="" ""の間に背景画像のURLを記入
左右に表示したいバナーを作成してください。
この部分が完成しました。
ブログカードを設置
この部分になります。
「カード」をクリック
このように表示されます。
id=""
の部分""の間に表示したい投稿をIDを入力します。
IDは「管理画面」⇒「投稿」⇒「投稿一覧」
この部分です。
左右に３枚ずつカードを設置するとこのような状態になります。
この時左右の文字数が違う為、枠のサイズがずれて見栄えが良くありません。
これを調整していきましょう。
「アフィンガー管理」⇒「全体設定」
「全体設定」画面で下へスクロールしていくと「抜粋設定」があります。
ここで調整していきます。
記事本文を省く
PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする
にチェックを入れて「save」しました。
「続きを見る」を消す
readmore="on"
「readmore」に「on」または「off」を入れることで、「続きを見る」ボタンの表示・非表示
ブログカードの高さ設定
pc_height=""
""の間に数字を入れます。
私の場合は１８０を入れてあります。
ここまで出来たら、プレビュー画面で確認してみて下さい。
これで完成となります。
まとめ
ブログのトップページはお店の看板のような物となりますので。
いかに興味を持って覗いてもらえるかを考えて訪問者がどんなコンテンツがあるか見やすいように作成しましょう。
AFIINGERならこのように簡単にトップページを作成することが出来ます。
今回、ネットで検索するとまだまだAFIINGER５の情報が多く６の設定方法がなく時間が掛かってしまったので
６を使用している方が分かりやすいように作成いたしました。
このブログのテーマ
