AFFINGER5(アフィンガー5)をご使用のみなさん、トップページのデザインを適当に済ませていませんか?
トップページはサイトの入口です。
AFFINGER5(アフィンガー5)の便利機能を使って、最高にオシャレなトップページを作っちゃいましょう!
記事のテーマ
AFFINGER5(アフィンガー5)を使った
- おすすめヘッダーカードの作り方
- カテゴリ一覧スライドショー(新着記事)の作り方
- レイアウトを用いたバナー風ボックスの設置手順
- トップページのカスタマイズ
当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。
\今なら当サイト限定の豪華特典付き/
目次
AFFINGER5(アフィンガー5)でのトップページの完成形
今回作成するトップページの完成形は以下のようなイメージです。
主な構成としては上から順に
- おすすめヘッダーカード
- カテゴリ一覧スライドショー
- バナー風ボックス(ブログカード付き)
となっています。
右側には全ページ共通のサイドバーも設置してあります。
どれもAFFINGER5に標準で備わっているのでカンタンに設置できます。
シンプルかつオシャレに
トップページを制作する上で気をつけなければならないのは「見やすくて分かりやすい」ことです。
全部見てほしいからと言って情報を詰め込みすぎると、ユーザーは見る気を無くして離脱してしまいます。
ユーザーに「このトップページはオシャレでカッコいいな」と思ってもらうためには、必要な情報をシンプルなデザインで統一しましょう。
AFFINGER5(アフィンガー5)を使ってオシャレなトップページを作ろう
それではAFFINGER5を使ってトップページを作る手順をご紹介します!
0. 固定ページを作成
まず大前提としてトップページにする固定ページを作ります。
AFFINGERではデフォルトのトップページは親テーマのファイルにあるため編集できるように固定ページにセットする必要があります。
固定ページを新規作成して、トップページと分かるタイトルを設定しましょう。
次に、新しく作った固定ページをトップページに設定する必要があります。
WordPress管理画面から「外観」→「カスタマイズ」→「ホームページ設定」に移動しましょう。
「ホームページ設定」に「ホームページ」という項目がありますので、メニューから先程追加したトップページ(固定ページ)のタイトルを選択して変更を保存しましょう。
この設定で、固定ページにトップページの項目が追加され、カンタンに編集できるようになります。
1. おすすめヘッダーカードの作成
まずはトップページ完成図の一番上の部分の「おすすめヘッダーカード」を作っていきます。
設置する前に、画像や文言の設定をします。
おすすめヘッダーカードの設定
WordPressの管理画面から「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめヘッダーカード」に移動しましょう。
「おすすめヘッダーカード」では4種類のヘッダーカードの
- 画像
- 移動先URL
- 表示テキスト
- デザイン
を設定できます。
ヘッダー画像は横長ですので一般的な画像はトリミングされてしまいます。
ですのでヘッダーサイズの画像を使用しましょう。
無料ヘッダー画像配布サイトpixabayなどがおすすめです。
デザインでは画像の見え方やテキストについてカンタンにカスタマイズ出来ます。
「テキストのある背景画像を暗くする」にチェックを入れると画像に黒みがかかってオシャレになるのでオススメです。
おすすめヘッダーカードの設置
おすすめヘッダーカードは設定が完了した時点で、デフォルトでトップページに表示されるようになっています。
そのため設置のための作業は不要になります。
2. 記事一覧スライドショー(新着記事)の設置
次にトップページ完成図の中央部分の記事一覧スライドショーを作っていきます。
記事一覧スライドショーは固定ページのエディタから、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の場合、新着記事が表示されますのでオススメです。
3. レイアウトを用いたバナー風ボックスの設置
3つ目はトップページ一番下部分の「レイアウトを用いたバナー風ボックス」を設置していきます。
まずはエディタ画面から、タグ機能を使って左右に二分割するコードを書きます。
「タグ」→「レイアウト」→「全サイズ」→「左右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です。
4. バナー風ボックス下のブログカード設置
次に、バナー風ボックスの下のブログカードを設置する手順をご説明します。
ちなみにコードを書く配置としてはこのようなイメージになります。
では図のように、バナー風ボックスのコードの下にブログカードのコードを書いていきます。
こちらもタグ機能を使います。
タグから「記事一覧/ショートコード」→「ブログカード」→「参考」を選択するとブログカードのコードが入力されます。
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で内部・外部リンクのブログカードを作る方法
続きを見る
以上でトップページのメイン部分は完成です!
5. サイドバーについて
当サイトのサイドバーは以下のような構成になっています。
- プロフィールカード
- 人気記事(WordPressプラグインを使用)
- 使用テーマ・サーバー紹介
- カテゴリ
- アーカイブ
- 新着記事
サイドバーでは「新着記事」以外すべてウィジェットからカスタマイズしています。
このようにウィジェット画面では左右でウィジェット一覧と設置する場所に分かれています。
「カテゴリ」と「アーカイブ」は標準で用意されている項目なのですぐに設定できます。
それ以外の項目をひとつひとつ書くと膨大な量になってしまいますので、お手数ですが以下の記事をご覧ください。
サイドバー設定に関する記事はこちら
-
AFFINGER5でプロフィールカードを作成する方法【誰でも簡単】
続きを見る
-
AFFINGER5で新着記事・関連記事エリアをカスタマイズする方法
続きを見る
まとめ:AFFINGER5でトップページをカスタマイズ!
まとめ
- AFFINGER5のタグ機能を使えばカンタンにオシャレなトップページが作れる
- トップページはシンプルかつオシャレに作ろう
今回はAFFINGER5(アフィンガー5)でオシャレなトップページの作り方について解説しました。
トップページをオシャレにすれば、ユーザーの巡回率も上がりSEOでいい評価を受ける可能性が高くなります。
AFFINGER5の便利機能で最高のウェブサイトを作りましょう!!
わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。
今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!
AFFINGER5のカスタマイズ方法のまとめはこちら
-
AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
続きを見る
\今なら当サイト限定の豪華特典付き/
AFFINGER5関連の記事はこちら
-
AFFINGER5を使ってみた感想【良かった点と悪かった点】
続きを見る
-
AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法
続きを見る
-
AFFINGER5(アフィンガー5)でお問い合わせフォームを設置する簡単な方法
続きを見る
-
AFFINGER5でアイキャッチ画像を設定するカンタンな方法
続きを見る