今回は，WING(AFFINGER5)で，トップページに記事スライドショーを設置して，2カラム(2列)レイアウトのサイト型トップページに設定する方法を解説していきます。
ブログのトップページを整えて，見やすくすることで，読者にとって気になる記事がすぐに見つかりやすくなって，その分クリックされる確率が上がり，ブログ全体の回遊率も上がりますので，綺麗で見やすいサイトにすることをおすすめします。
この記事はこんな方におすすめ
- トップページを2カラムにしたい
- サイト全体を見やすくてかっこいいデザインにしたい
- クリック率をあげて収益を増やしたい
この記事を見ながら実践していくことで，
- スライドショーを設置したトップページ
- 2列のレイアウトのトップページ
のサイト型のトップページを簡単に作れるようになります。
参考
当ブログでも使用しているテーマ「WING（AFFINGER5）」は，SEOに強く収益が発生しやすいと評価されていて，稼ぐことに特化した人気のあるWordPress有料テーマです。
WING（AFFINGER5）の導入とインストールの方法については，
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
で紹介していますので，参考にしてください。
-
-
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
続きを見る
目次
2カラムのサイト型トップページのイメージ
今回の記事の完成のイメージは，下の画像のようになります。
- ヘッダーの下にヘッダーカード
- ヘッダーカードの下に記事スライドショー
- 記事スライドショーの下に2カラムのバナーとブログカード
になります。
参考
固定ページを作成
まず，サイト型トップページにするために，固定ページを新規作成します。
この固定ページの作成画面でやることは，
- スライドショーの設置
- カテゴリー別記事(バナーとブログカード)の作成
です。
「固定ページ」→「新規追加」をクリックします。
タイトル名を入力します。(後で消すことができますので何でもいいです。)
ここから，
- スライドショーの設置
- カテゴリー別記事(バナーとブログカード)の作成
を設定していきます。
スライドショーの設置
ここでは，新しく固定ページにスライドショーを設置する方法を解説します。
参考
見出し文を入力しています。(ここでは，「見出し3」で「新着記事」)
- 「タグ」
- 「記事一覧 / カード」
- 「カテゴリ一覧 (スライドショー)」
の順に選択します。
上の画像のように，スライドショーのコードが表示されます。
ここで変更している箇所は，
fullsize_type="text"(画像とテキストを表示)になります。
プレビューで確認してみると，
見出し文とスライドショーが設置されています。
2列のレイアウトに設定
次に，ページを2カラム(2列)レイアウトに設定していきます。
スライドショーを設置した下の行に，見出し分を入力しています。(ここでは，「見出し3」で「おすすめ記事」)
- 「タグ」
- 「レイアウト」
- 「PCとTab (959px以上)」
- 「左右50%」
の順に選択します。
上の画像のように，2列に別れたページが表示されます。
ここから，カテゴリー別記事(バナーとブログカード)の作成をしていきます。
カテゴリー別記事(バナーとブログカード)の作成
カテゴリー別記事(バナー)
左側の黄色のエリアで，
- 「タグ」
- 「ボックスデザイン」
- 「バナー風ボックス」
- 「基本」
を選択します。
同じく右側の青色のエリアでも，
- 「タグ」
- 「ボックスデザイン」
- 「バナー風ボックス」
- 「基本」
を選択します。
バナー風ボックスのコードが表示されますので，好みで設定してください。
ここでは，
- url="カテゴリーURL(スラッグ)"
- title="バナーのタイトル"
- height="高さ(行数が違っても高さを合わせるため・ここでは83)"
- background_image="画像URL"
を設定しています。
確認すると，2列のバナーリンクが設置されています。
カテゴリー別記事(ブログカード)
記事ページへのリンクは，ブログカードで設定します。
参考
ブログカードの詳細やカスタマイズについては，
で詳しく解説していますので，参考にしてください。
-
-
アフィンガーでブログカードを設定する方法【超簡単】
続きを見る
-
-
アフィンガーでブログカードのデザインをカスタマイズする方法
続きを見る
ここではまず，「AFFINGER5管理」でブログカードの表示をサムネイルとタイトルのみにするための設定をしています。
「AFFINGER5管理」をクリックします。
「デザイン」をクリックします。
抜粋設定の「PC観覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れます。
それでは，固定ページの編集画面に戻って，表示したい記事数の分カードを設置していきます。
「カード」をクリックします。
ブログカードのコードが表示されます。
ID="ここに記事IDを入力"
同じように右側の青色のエリアにも「カード」を表示させて，記事IDを入力します。
プレビューで確認すると，
ブログカードの高さが揃っていません。
pc_height=""の中の数字を揃えることで，ブログカードの高さが揃います。
カードのタイプなどに合わせて数字を設定してください。(ここでは，165)
確認してみると，ブログカードの高さが綺麗に揃っています。
あとは，表示させたい記事の分を同じように設定していきます。
一番上にある「このテキストは最後に消してください (50%)」は削除します。
「公開」をクリックすると，固定ページの完成になります。
固定ページをトップページに設定
サイト型のトップページにするために，あと1つだけ設定が必要です。
作成した固定ページを，トップページに設定します。
- 「外観」
- 「カスタマイズ」
を選択します。
「ホームページ設定」をクリックします。
- 「固定ページ」にチェックをいれます。
- 「トップページ(今回作成した固定ページのタイトル)」を選択します。
- 「公開」をクリックします。
これで，記事スライドショー，2カラムのレイアウトのサイト型トップページが完成になります。
まとめ
今回は以上になります。
それではまた！
で，トップページに記事){kind=link}