AFFINGER5でオシャレなトップページを作る方法

AFFINGER5でWordPressブログを開設したけどトップページのデザインを変更したい...

アフィンガー5の機能を活かしてオシャレなトップページを作成したい！

今回はこんな悩みを解決していきます。

AFFINGER5（アフィンガー5）をご使用のみなさん、トップページのデザインを適当に済ませていませんか？

トップページはサイトの入口とも言える重要なページです。

そこで今回はAFFINGER5（アフィンガー5）の便利機能を使って、オシャレなトップページを作成する方法を徹底解説していきます。

AFFINGER5（アフィンガー5）を購入したばかりの方は必見です！

今回のテーマはこちら！

AFFINGER5(アフィンガー5)でオシャレなトップページを作る方法

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると幸いです。

＼今なら当サイト限定の豪華特典付き／

AFFINGER5の詳細を見る

AFFINGER5（アフィンガー5）でのトップページの完成形
- シンプルかつオシャレに作成しよう
AFFINGER5（アフィンガー5）を使ってオシャレなトップページを作ろう
まとめ：AFFINGER5でオシャレなトップページを作る方法

AFFINGER5（アフィンガー5）でのトップページの完成形

まず最初に今回の記事で紹介するオシャレなトップページの完成形を把握しておく必要があります。

作成するトップページの完成形は以下のようなイメージです。

トップページの完成形

主な構成としては上から順に

おすすめヘッダーカード
カテゴリ一覧スライドショー
バナー風ボックス（ブログカード付き）

となっています。

右側には全ページ共通のサイドバーも設置してあります。

どの部分もAFFINGER5に標準で備わっている機能でカンタンに設置できます。

シンプルかつオシャレに作成しよう

トップページを制作する上で気をつけなければならないのは「見やすくて分かりやすい」ことです。

全部見てほしいからと言って情報を詰め込みすぎると、ユーザーは見る気を無くして離脱してしまいます。

ユーザーに「このトップページはオシャレでカッコいいな」と思ってもらうためには、必要な情報をシンプルなデザインで統一しましょう。

AFFINGER5（アフィンガー5）を使ってオシャレなトップページを作ろう

それではAFFINGER5を使ってトップページを作る手順をご紹介します！

手順の概要は以下のようになります。

AFFINGER5でトップページを作成する手順

固定ページを作成
おすすめヘッダーカードの作成
記事一覧スライドショー(新着記事)の設置
レイアウトを用いたバナー風ボックスの設置
バナー風ボックス下のブログカード設置
サイドバーについて

それでは順番に見ていきましょう。

1. 固定ページを作成

まず大前提としてトップページにする固定ページを作ります。

AFFINGERではデフォルトのトップページは親テーマのファイルにあるため編集できるように固定ページにセットする必要があります。

まず固定ページを新規作成して、トップページと分かるタイトルを設定しましょう。（URLは後から自動で反映されるのでこの段階は適当なURLで大丈夫です。）

次に、新しく作った固定ページをトップページに設定する必要があります。

トップページ設定

WordPress管理画面から「外観」→「カスタマイズ」→「ホームページ設定」に移動しましょう。

「ホームページ設定」に「ホームページ」という項目がありますので、メニューから先程追加したトップページ（固定ページ）のタイトルを選択して変更を保存しましょう。

この設定で、固定ページにトップページの項目が追加され、カンタンに編集できるようになります。

2. おすすめヘッダーカードの作成

おすすめヘッダーカード

次にトップページ完成図の一番上の部分の「おすすめヘッダーカード」を作っていきます。

まずWordPressの管理画面から「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめヘッダーカード」に移動しましょう。

おすすめヘッダーカードの作成

「おすすめヘッダーカード」では４種類のヘッダーカードの

画像
移動先URL
表示テキスト
デザイン

を設定できます。

ヘッダー画像は横長ですので一般的な画像はトリミングされてしまいます。

ですので横長のヘッダーサイズの画像を使用しましょう。

無料でオシャレなヘッダーカードを使いたい場合は無料ヘッダー画像配布サイトpixabayなどがおすすめです。

デザインカスタマイズ

「デザイン」では画像の見え方やテキストについてカンタンにカスタマイズ出来ます。

「テキストのある背景画像を暗くする」にチェックを入れると画像に黒みがかかってオシャレになるのでオススメです。

その他の項目も適宜自由に設定しましょう

最後に青色の「設定を保存ボタン」をクリックすれば設置完了です！

3. 記事一覧スライドショー(新着記事)の設置

スライドショー完成図

次にトップページ完成図の中央部分の記事一覧スライドショーを作っていきます。

記事一覧スライドショーは固定ページのエディタから、AFFINGER5のタグを使ってカンタンに設置できます。

記事一覧スライドショー(新着記事)の設置

上の写真のように「タグ」→「記事一覧/カード」→「カテゴリ一覧（スライドショー）」を選択します。

すると以下のようなコードが出力されます。

 カテゴリ一覧のコード
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""]

各コードの説明は以下のようになります。

st-catgroup cat="カテゴリID"
page="表示する記事数"
orderby="id"
child="子カテゴリー表示のon,off"
slide="スライドショーのon,off"
slides_to_show="列数"
slide_more="「続きを読む」のon,off"

それぞれお好みに合わせて設定してみてください。

カテゴリIDが0の場合、自動で新着記事が表示されますのでオススメです。

4. レイアウトを用いたバナー風ボックスの設置

バナー風ボックス完成図

4つ目はトップページ一番下部分の「レイアウトを用いたバナー風ボックス」を設置していきます。

まずはエディタ画面から、タグ機能を使って画面のレイアウトを左右に二分割するコードを書きます。

二分割コード

「タグ」→「レイアウト」→「全サイズ」→「左右50%」を選択します。

スマホでは左右２分割させたくない！という方は「全サイズ」ではなく「PCとTab(959px以上)」から「左右50%」を選択してください。

二分割エディタ

これで左右に二分割するコードが反映されました。

この黄色い枠と青い枠それぞれに、タグ機能を使ってコードを書いていきます。

まずはバナー風ボックスを設置していきます。

バナー風ボックス設置上画像のように「ボックスデザイン」→「バナー風ボックス」→「基本」を選択します。

バナー風ボックスコード画面

すると上画面のように、バナー風ボックスのコードが入力されます。

 バナー風ボックスのコード
[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]

コードの説明は以下のようになります。

st-flexbox url="リンク先URL（設置しなくても大丈夫）"
title="タイトル"
backgroud_image="背景画像のURL"

画像のURLはライブラリから確認できます。

画像URL

ライブラリで写真を選択すると右側に詳細が表示されます。

詳細の下の方にある「リンクをコピー」に書かれている文字が画像URLです。

コピーしたらそのままbackgroud_imageの「"」と「"」の間にペーストしましょう

5. バナー風ボックス下のブログカード設置

バナー風ボックス完成図

次に、バナー風ボックスの下のブログカードを設置する手順をご説明します。

コード配置図

ちなみにコードを書く配置としては上のようなイメージになります。

では図のように、バナー風ボックスのコードの下にブログカードのコードを書いていきましょう。

こちらもタグ機能を使います。

ブログカードコード

上画像のようにタグから「記事一覧/ショートコード」→「ブログカード」→「参考」を選択するとブログカードのコードが入力されます。

 html
[st-card myclass="st-no-shadow" id="" label="参考" pc_height="" name="" bgcolor="#cccccc" color="#ffffff" fontawesome="fa-file-text-o" readmore="on" thumbnail="on" type="text"]

コードの説明は以下の通りです。