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

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

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

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

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

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

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

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

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

今回作成するAFFINGER5のトップページの完成形

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

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

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

となっています。

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

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

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

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

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

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

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

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

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

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

手順1. 固定ページを作成

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

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

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

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

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

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

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

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

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

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

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

を設定できます。

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

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

無料でオシャレなヘッダーカードを使いたい場合は無料ヘッダー画像配布サイト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つ目はトップページ一番下部分の「レイアウトを用いたバナー風ボックス」を設置していきます。

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

「タグ」→「レイアウト」→「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]

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

画像の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"]

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

このコードは1記事分です

表示させたい記事数分、コードを書きましょう。

以上でトップページのメイン部分は完成です！

手順6. サイドバーについて

続いてはトップページ以外にも共通する部分ではありますが、サイドバーについても解説していきます。

当サイトのサイドバーは以下のような構成になっています。

サイドバーでは「新着記事」以外すべてウィジェットからカスタマイズしています。

ウィジェットの編集はWordPress管理画面から「外観」→「ウィジェット」で移動できます

このようにウィジェット画面では左右でウィジェット一覧と設置する場所に分かれています。

「カテゴリ」と「アーカイブ」は標準で用意されている項目なので該当するウィジェットを「サイドバートップ」にドラッグアンドドロップすることですぐに設定できるかと思います。

それ以外の項目をひとつひとつ書くと膨大な量になってしまいますので、お手数ですが以下の記事をご覧ください。

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

今回はAFFINGER5（アフィンガー5）でオシャレなトップページの作り方について解説しました。

トップページをオシャレにすれば、ユーザーの巡回率も上がりSEOでいい評価を受ける可能性が高くなります。

AFFINGER5の便利機能を使って最高のウェブサイトを作りましょう！！

分からない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします！

AFFINGER5のカスタマイズ方法のまとめはこちら

AFFINGER5（アフィンガー5）に関する記事一覧はこちら→