AFFINGER5

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

2020年8月5日

AFFINGER5でオシャレなトップページを作る方法を大公開!
AFFINGER5でWordPressブログを開設したけどトップページのデザインを変更したい...
アフィンガー5の機能を活かしてオシャレなトップページを作成したい!

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

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

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

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

AFFINGER5(アフィンガー5)を購入したばかりの方は必見です!

今回のテーマはこちら!

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

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

ブログが思うように伸びなくて挫折しかけている方へ
初心者・未経験者でも大丈夫。
読むだけでその日から実践できるSEO対策を学びませんか?
>> 個人ブログを月間96,000PVに育て上げた裏ワザを徹底解説
>> ブログ開始4ヶ月でドメインパワーを0→28に上げた方法を全部教えます

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

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

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

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

トップページの完成形

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

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

となっています。

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 固定ページを作成

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

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

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

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

トップページ設定

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

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

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

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

おすすめヘッダーカード

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

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

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

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

  • 画像
  • 移動先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%」を選択します。

スマホでは左右2分割させたくない!という方は「全サイズ」ではなく「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"]

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

  • id="記事ID"
  • label="ラベル(何も書かなくても大丈夫)"
  • bgcolor="カードの背景色"
  • color="ラベルの文字色"
  • readmore="続きを読むのon,off"

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

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

合わせて読みたい

AFFINGER5で内部・外部リンクのブログカードを作る方法
AFFINGER5で内部・外部リンクのブログカードを作る方法を解説

続きを見る

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

6. サイドバーについて

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

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

  • プロフィールカード
  • 人気記事(WordPressプラグインを使用)
  • 使用テーマ・サーバー紹介
  • カテゴリ
  • アーカイブ
  • 新着記事

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

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

ウィジェット画面

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

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

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

サイドバー設定に関する記事はこちら

AFFINGER5でプロフィールカードを作成する方法【誰でも簡単!】
AFFINGER5でプロフィールカードを作成する方法を解説

続きを見る

AFFINGER5で新着記事・関連記事エリアをカスタマイズする方法
AFFINGER5で新着記事・関連記事エリアをカスタマイズする方法を解説

続きを見る

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

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

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

  • AFFINGER5のタグ機能を使えばカンタンにオシャレなトップページが作れる
  • トップページはシンプルかつオシャレに作ろう

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

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

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

ブログが思うように伸びなくて挫折しかけている方へ
初心者・未経験者でも大丈夫。
読むだけでその日から実践できるSEO対策を学びませんか?
>> 個人ブログを月間96,000PVに育て上げた裏ワザを徹底解説
>> ブログ開始4ヶ月でドメインパワーを0→28に上げた方法を全部教えます

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

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

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

AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ

続きを見る

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

AFFINGER5の詳細を見る

AFFINGER5関連の記事はこちら

All in One SEO Packの導入手順
AFFINGER5を使ってみた感想【良かった点と悪かった点】

続きを見る

AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法
AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法

続きを見る

AFFINGER5(アフィンガー5)でお問い合わせフォームを簡単に設置する方法
AFFINGER5(アフィンガー5)でお問い合わせフォームを設置する簡単な方法

続きを見る

AFFINGER5でアイキャッチ画像を設定するカンタンな方法をご紹介
AFFINGER5でアイキャッチ画像を設定する方法をご紹介

続きを見る

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

  • この記事を書いた人(執筆者情報)

wagtechblog

プログラミングとWordPressに溺れた私立大学生。フリーランスのiOSエンジニアとしてアプリ開発しています。その傍らWeb集客のベンチャー企業で勤務。主にフロントエンドエンジニア・WebアプリケーションエンジニアとしてWebアプリケーション開発、SEOマーケティング、データビジュアライゼーションといった業務もしてます。好きな言語はSwiftとPythonとPHPとRuby。趣味はApex Legendsとゲーミングデバイス集め。

-AFFINGER5

Copyright © wagtechblog All Rights Reserved.