AFFINGER5で固定ページを使ったトップページの作り方は？

　

　

　

AFFINGER5のトップページは、そのままでも機能的で、デザインも見やすくて使いやすいです。

しかしこだわりのある人は、もっとカスタマイズして、より自分好みのトップページにしたい人も多いかも知れませんね。

　

そこでここでは、AFFINGER5で固定ページを使った、トップページのカスタマイズ方法について見ていきます。

　

固定ページを使わないカスタマイズ方法は？

この記事では、固定ページを使ったトップページのカスタマイズ方法を紹介しますが、元からあるトップページをカスタマイズしたい方は、こちらの記事をどうぞ。

　

AFFINGER5のトップページのカスタマイズ方法は？

ブログやサイトの顔ともいうべきトップページ。自分の個性や、扱う商品・コンテンツの特徴を表す、魅力的で読者が利用しやすいデザインにしたいですね。ここではAFFINGER5のトップページのカスタマイズ方法を、画像を交えながら紹介していきます。

続きを見る

　

　

トップページ用の固定ページ作成例

固定ページを使うと、このように記事のスライドショーやカテゴリー別に分かれた記事コーナーを、好きな場所に作ることができます。

　

ここでは、この２つのコンテンツの作り方を紹介します。

　

　

トップページ用固定ページの作り方

ではここから実際に、トップページ用の固定ページを作っていきます。

　

「Classic Editor」プラグインのインストール

固定ページを作り始める前に、プラグイン「Classic Editor」を新規追加＆有効化しておきます。

もう済んでるという方は、先に進んで下さい。

　

1. 管理画面左のメニューから、「プラグイン」→「新規追加」を選択
2. 右上の検索窓に、「classic editor」と入力
3. プラグイン「Classic Editor」が表示されるので、「今すぐインストール」をクリック
4. 同じ場所に表示される「有効化」をクリック

　

　

インストール完了後、左メニューから「固定ページ」→「新規追加」を選択すると、上のような画面になります。

　

上の「新規固定ページを追加」の下の部分に、ページのタイトルを入力しましょう。

特にこだわりが無ければ、「トップページ」で良いと思います。

　

この状態から、トップページを作っていきます。

　

　

「記事スライドショー」の作成

1. タブから「見出し3」を選択
2. 「新着記事」など、タイトルを入力

　

　

カーソルを見出しの下に置いた状態で、

3. 「タグ」→「記事一覧」→「カテゴリ一覧（スライドショー）」を選択

　

　

コードが表示されるので、

4. 「cat」にカテゴリーID
5. 「page」にスライド表示させたいページ数

を、それぞれ入力します。

　

　

カテゴリーIDの調べ方

「カテゴリーID」は、左メニューの「投稿」→「カテゴリー」を選択してページを開くと、表示されています。

　

　

「カテゴリー別記事コーナー」の作成

1. タブから「見出し3」を選択
2. 「おすすめ記事」など、タイトルを入力

　

　

3. 「タグ」→「レイアウト」→「PCとTab（959px以上）」→「左右50％」を選択

　

　

このような画面になります。

　

　

バナー風ボックスの挿入

まず、カテゴリー名を入れる「バナー風ボックス」を作ります。

4. 黄色の枠の中にカーソルを置いて、「ボックスデザイン」→「バナー風ボックス」→「基本」を選択
5. 青色の枠でも同様にして、コードを入力します

　

　

6. 「title」にカテゴリー名を入力
7. 「backgroud_image」に、挿入する画像のURLを入力（URLの確認方法は下にあります↓）
8. 青色の枠でも同様に、２つの項目を設定します

　

　

挿入する画像URLの確認方法

左メニューから、「メディア」→「ライブラリ」を選択します。

　

アップロード済みの画像の中から挿入したいものをクリックすると、「添付ファイルの詳細」という画面が開き、右下にURLが表示されています。

すぐ下にある「URLをコピー」ボタンをクリックして、URLをコピーできます。

　

　

プレビュー画面で確認すると、こんな感じでバナー風ボックスが入ってるかと思います。

　

　

ブログカードの挿入

続いて、ブログカードを挿入していきます。

　

9. 「バナー風ボックス」のコードの直後にカーソルを合わせ、右上の「カード」ボタンをクリック
10. 「ブログカード」のコードが表示されるので、「id」に表示させたい記事の「記事ID」を入力
11. コード直後に9、10を繰り返すことで、下にどんどん記事を追加できる
12. 青い枠でも同様に行う

　

「記事ID」は、左メニューの「投稿」→「投稿一覧」から確認できます。

　

　

ブログカードの調整

記事の設定ができたら、固定ページ編集画面の右側のボタンから、プレビュー画面を開いて確認します。

　

記事の抜粋された文章や「続きを見る」ボタンが入り、カードが縦長に並んで見づらいですね。

これらを改善していきます。

　

　

　【抜粋文の設定】

1. 左メニュー「AFFINGER5 管理」→「AFFINGER5 管理」の「抜粋設定」にある、「PC閲覧時の『ブログカード』及びコンテンツ内の『おすすめ記事』の抜粋を非表示にする」にチェックを入れる
2. 同じページにある「save」ボタンをクリックして設定を保存します

　

　

【「続きを見るボタン」の設定】

コードの値を変えることによって、ブログカードのデザインをカスタマイズできます。

• 「readmore」に「on」または「off」を入れることで、「続きを見る」ボタンの表示・非表示を切り替えられます
• 「pc_height」に数値を入れることで、ブログカードの高さの設定が可能

　

　

完成

コード表示部分の一番上の「このテキストは最後に消して下さい（50％）」をいう部分を消去すれば、ブログカードの完成です。

　

　

　

固定ページをトップページに反映させる

最後に、完成した固定ページをトップページに反映させます。

　

左メニュー「外観」→「カスタマイズ」→「ホームページ設定」を選択してから、

1. 「固定ページ」を選択
2. 固定ページの中から、先ほど作ったページの名前を選択
3. プレビュー画面が表示されるので、確認した後に「公開」をクリック

　

これで、カスタマイズした固定ページがトップページとして反映されました。

　

　

まとめ

以上、『AFFINGER5』で固定ページを利用する、トップページのカスタマイズ方法について見てきました。

　

いくつかあるカテゴリーを際立たせたい時などに、紹介したカテゴリー別記事のコーナーは有効ですね。

他にも様々なコンテンツを入れたりできるし、アイデア次第で自由自在に個性豊かなトップページが作れそうです。

　

『AFFINGER5』についての詳細や購入は、こちらからどうぞ。

　

　

アフィンガーの評判・口コミをレビュー！購入して損した理由とは？

アフィンガー（AFFINGER5）はSEOにも強く高速、カスタマイズ性も高く、多くのブロガーやアフィリエイターに人気のWordPressテーマです。ここではどんなテーマなのか紹介しつつ、個人的に感じるイマイチな点を書いてみたいと思います。

続きを見る