AFFINGER5

★ 【AFFINGER5】かっこいトップページカスタマイズ方法!(ブログカードを2列にする)





アフィリエイトにも、サイト作成にも絶大な威力は発揮する WordPress のテーマが「AFFINGER5」です。

AFFINGER5 で、記事スライダー&ブログカードを2列にするトップページを作る方法を紹介します。


AFFINGER5 ご購入はこちら


トップページのイメージ


記事スライダー&ブログカードを2列にするトップページの作成イメージです。



■ こちらもご覧ください。

★ 【AFFINGER5】ヘッダに記事スライドショー(大)を付ける方法(表示記事数変更方法も記載)

AFFINGER5 でヘッダにスライドショーを付けることで、まるで映画の紹介ページのようにダイナミックなサイトにすることができます。本記事で設定方法、および、表示記事数を変更する方法も記載しています。

続きを見る

★ 【AFFINGER5】ヘッダーカード(HEADER CARD)を使う方法!これだけでサイトの見た目が一段上がります!(直帰率にも良効果)

「ヘッダーカード」は、サイトの見た目がより美しくなり引き締まります。直帰率も改善する超おすすめ機能です。「AFFINGER5」テーマで超簡単にヘッダーカードを利用する方法を紹介します。ぜひご一読を!

続きを見る


トップページの作り方


1.固定ページを作成する


[固定ページ] を作成します。

( WordPress の管理画面から [固定ページ] → [新規作成] で固定ページを作ります )


step
1
記事スライドショーをつける



  1. 固定記事のページタイトルは任意の文字列を入力しておきます(後で非表示にします)
  2. クラシックから [タグ] → [記事一覧 / カード] → [カテゴリ一覧(スライドショー)] を選択します


必要に応じてプロパティをセットします。


cat表示する [カテゴリ] の ID をカンマ区切りで入力します。(制限しない場合は "0" )
page表示する記事数(スクロールして表示する記事の最大数)を指定します。

step
2
記事カードを2列で作成する



クラシック から [タグ] → [レイアウト] → [PC と Tab (959px 以上)] → [左右50%] を選択します。



左右にタイトル・記事カードを配置します



クラシックから [カード] をクリックして記事カードをセットします。

必要に応じてプロパティをセットします。


id表示する記事の ID を入力します
pc_height記事カードの高さを入力します。ここを揃えることで、記事の高さを揃えることができます
readmore[off] を指定します。[続きを読む] を非表示にします

2.固定ページのタイトルを非表示にする


固定ページのタイトルを非表示にします。



  1. WordPress の管理画面から、[AFFINGER5 管理] → [投稿・固定記事] を選択します
  2. [固定ページのタイトルを非表示] をチェックします

3.記事カードの [抜粋] を非表示にする


記事カードの [抜粋] を非表示にします。



  1. WordPress の管理画面から、[AFFINGER5 管理] → [デザイン] を選択します
  2. [PC 閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする] をチェックします

4.固定ページをトップページに設定する


固定ページをトップページに設定します。



  1. WordPress の管理画面から [外観] → [カスタマイズ] → [ホームページ設定] を選択します
  2. [ホームページの表示] で [固定ページ] を設定します
  3. [ホームページ] で作成した固定ページを指定します

完成です!


まとめ


AFFINGER5 で、記事スライダー&ブログカードを2列にするトップページを作る方法を紹介します。



  • 固定ページで記事スライダーを作り、記事カードを配置します
  • 固定ページのタイトルを非表示にします
  • 記事カードの抜粋を非表示にします
  • トップページを固定ページに設定します


トップページが記事カードで一杯になる不思議(不思議じゃないけど(笑))







Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ