


AFFINGER5のトップページは、そのままでも機能的で、デザインも見やすくて使いやすいです。
しかしこだわりのある人は、もっとカスタマイズして、より自分好みのトップページにしたい人も多いかも知れませんね。
そこでここでは、AFFINGER5で固定ページを使った、トップページのカスタマイズ方法について見ていきます。
目次
固定ページを使わないカスタマイズ方法は?
この記事では、固定ページを使ったトップページのカスタマイズ方法を紹介しますが、元からあるトップページをカスタマイズしたい方は、こちらの記事をどうぞ。
-
-
AFFINGER5のトップページのカスタマイズ方法は?
ブログやサイトの顔ともいうべきトップページ。自分の個性や、扱う商品・コンテンツの特徴を表す、魅力的で読者が利用しやすいデザインにしたいですね。ここではAFFINGER5のトップページのカスタマイズ方法を、画像を交えながら紹介していきます。
続きを見る
トップページ用の固定ページ作成例

固定ページを使うと、このように記事のスライドショーやカテゴリー別に分かれた記事コーナーを、好きな場所に作ることができます。
ここでは、この2つのコンテンツの作り方を紹介します。
トップページ用固定ページの作り方
ではここから実際に、トップページ用の固定ページを作っていきます。
「Classic Editor」プラグインのインストール
固定ページを作り始める前に、プラグイン「Classic Editor」を新規追加&有効化しておきます。
もう済んでるという方は、先に進んで下さい。

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

インストール完了後、左メニューから「固定ページ」→「新規追加」を選択すると、上のような画面になります。
上の「新規固定ページを追加」の下の部分に、ページのタイトルを入力しましょう。
特にこだわりが無ければ、「トップページ」で良いと思います。
この状態から、トップページを作っていきます。
「記事スライドショー」の作成

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

カーソルを見出しの下に置いた状態で、
- 「タグ」→「記事一覧」→「カテゴリ一覧(スライドショー)」を選択

コードが表示されるので、
- 「cat」にカテゴリーID
- 「page」にスライド表示させたいページ数
を、それぞれ入力します。
カテゴリーIDの調べ方

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

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

- 「タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50%」を選択

このような画面になります。
バナー風ボックスの挿入

まず、カテゴリー名を入れる「バナー風ボックス」を作ります。
- 黄色の枠の中にカーソルを置いて、「ボックスデザイン」→「バナー風ボックス」→「基本」を選択
- 青色の枠でも同様にして、コードを入力します

- 「title」にカテゴリー名を入力
- 「backgroud_image」に、挿入する画像のURLを入力(URLの確認方法は下にあります↓)
- 青色の枠でも同様に、2つの項目を設定します
挿入する画像URLの確認方法
左メニューから、「メディア」→「ライブラリ」を選択します。

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

プレビュー画面で確認すると、こんな感じでバナー風ボックスが入ってるかと思います。
ブログカードの挿入
続いて、ブログカードを挿入していきます。

- 「バナー風ボックス」のコードの直後にカーソルを合わせ、右上の「カード」ボタンをクリック
- 「ブログカード」のコードが表示されるので、「id」に表示させたい記事の「記事ID」を入力
- コード直後に9、10を繰り返すことで、下にどんどん記事を追加できる
- 青い枠でも同様に行う
「記事ID」は、左メニューの「投稿」→「投稿一覧」から確認できます。
ブログカードの調整
記事の設定ができたら、固定ページ編集画面の右側のボタンから、プレビュー画面を開いて確認します。

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

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

コードの値を変えることによって、ブログカードのデザインをカスタマイズできます。
- 「readmore」に「on」または「off」を入れることで、「続きを見る」ボタンの表示・非表示を切り替えられます
- 「pc_height」に数値を入れることで、ブログカードの高さの設定が可能
完成
コード表示部分の一番上の「このテキストは最後に消して下さい(50%)」をいう部分を消去すれば、ブログカードの完成です。

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

左メニュー「外観」→「カスタマイズ」→「ホームページ設定」を選択してから、
- 「固定ページ」を選択
- 固定ページの中から、先ほど作ったページの名前を選択
- プレビュー画面が表示されるので、確認した後に「公開」をクリック
これで、カスタマイズした固定ページがトップページとして反映されました。
まとめ
以上、『AFFINGER5』で固定ページを利用する、トップページのカスタマイズ方法について見てきました。
いくつかあるカテゴリーを際立たせたい時などに、紹介したカテゴリー別記事のコーナーは有効ですね。
他にも様々なコンテンツを入れたりできるし、アイデア次第で自由自在に個性豊かなトップページが作れそうです。
『AFFINGER5』についての詳細や購入は、こちらからどうぞ。
-
-
アフィンガーの評判・口コミをレビュー!購入して損した理由とは?
アフィンガー(AFFINGER5)はSEOにも強く高速、カスタマイズ性も高く、多くのブロガーやアフィリエイターに人気のWordPressテーマです。ここではどんなテーマなのか紹介しつつ、個人的に感じるイマイチな点を書いてみたいと思います。
続きを見る