そうですよね、全く初めての初心者がトップページを作りたいように作れるわけがありません。
僕も全く分からず、ここで挫折してしまい数か月放置したのを覚えています。
そうならないようにするために気になる方は私のトップページを真似して作ってみてみましょう。
1回作ってみればどういうものか分かりますし、そこで慣れたら自分好みに変更していきましょう。
目次
AFFINGER6でトップページを真似して作ってみる
下記が現在の私のトップページです。
上から順番に作っていきましょう！
サイトのタイトル・キャッチフレーズを決める
①サイトのタイトルはWordPress立ち上げ時に既に決めているはずなのでそのままで良いはずです。
変更するならば今のうちにしておきましょう。たくさん記事ができてからサイト名を変更するとSEO的にマイナスですよ！
・タイトル名の上に好きなキャッチフレーズを入れる事もできます。必要ないならば入れる必要はありませんし、ここは随時変更していっても問題はありません。
ブログ名、キャッチフレーズを入力・変更する
外観→カスタマイズをクリックする
サイト基本情報をクリックする
ここでサイトタイトル、キャッチフレーズを入力・変更できます。
ヘッダーの背景色、メニューの色・配置を変更する
外観→カスタマイズ→各メニュー設定をクリックする
PCヘッダーメニューをクリックする
ここでヘッダーの背景色、メニューの色、配置を変更しましょう。
ヘッダーカードを作ってみる
③赤枠で囲まれた長方形のボタンをヘッダーカードと言います。
まずこのヘッダーカードを作るには記事と画像の2つが必要です。
固定ページでも投稿ページでもどちらでもよいので記事を1つ作ってみましょう。私はほとんど固定ページで作りました。
次に画像を用意しましょう。無料で画像を提供してくれている有名なサイトがありますので使ってみてください。
無料画像サイト
これで記事と画像の2つが用意できました。
次に「AFFINGER管理」→「ヘッダー下/おすすめ」をクリックします
①アップロードボタンを押してダウンロードした画像URLを表示させてください
②ボタンに表示させるテキスト名を入力してください
③自分の作った固定ページまたは投稿ページのURLをコピーして貼り付けてください
これで1番左側のボタンが完成しました。
4つ作りたい場合は同じ作業を行ってください。
スライドショーを使って新着記事を表示させる
赤枠の中がスライドショー部分です。
スライドショーの設置は簡単です。
①トップページの「固定ページ表示」を開く
②スライドショーを表示させたい場所にカーソルを置き「タグ」をクリック。
③「記事一覧/カード」をクリック
④カテゴリ一覧（スライドショー）をクリック
これで完成です。
スライドショーの設定変更もできますよ。
①[st-catgroup cat="カテゴリIDを入れれば記事を指定できます"
②page="スライドショーに表示する記事数を指定できます"
③ slide="スライドショーのON,OFFができます"
④slides_to_show="スライドショーの列数を変更できます"
⑤slide_more="「続きを読む」のON,OFFができます"
※[st-catgroup cat="0"の場合は新着記事が自動で表示されます。僕は0にしています。
バナー風ボックスを作ってみる
下記がバナー風ボックスと言います。1度作っただけではちょっと覚えづらいですが、簡単ですので順番にやっていきましょう。
まずはトップページの固定ページを開き、バナー風ボックスを表示させたいところにカーソルを置きます。
次に「タグ」→「レイアウト」→「PCとTab（959px以上）」→「左右50％」をクリックします
この作業でバナー風ボックスを左と右に2つ作る場所を用意しました。
場所ができたらバナー風ボックスを作ります。
最初に黄色い枠の中にカーソルを置きます。「このテキストは最後に消してください」の下にカーソルを置きましょう。
次にボックスデザイン→バナー風ボックス→基本をクリックする。
一見ややこしいコードが出てきましたが、タイトル名と背景画像URLを入力すればボダンの完成です。
title="タイトルを入力 "
backgroud_image=" 画像URLを入力"
画像URLは
「メディア」→「ライブラリ」→「URLをクリップボードにコピー」
backgroud_image=" コピーした画像URLを張り付けましょう"
これでバナー風ボックスが完成しました。
次にバナー風ボックスの下のカードを作りましょう。
先ほどのバナー風ボックスのコードの下にカーソルを置きます。
「タグ」→記事一覧/カード→参考をクリックする。
そうすると下記の赤枠1つが出来上がります。
この中のコードに記事IDを入力すればカードが出来上がります。
id="記事IDを入力する"
readmore="続きを読むのon,off"
私の場合は「label＝”参考”」→「label＝””」にして参考の表示を消しています。 また readmore="off"にしています。なぜなら表示した時に見た目がすっきりしているからです。
カードを何個も作りたいときは赤枠と同じように下に作っていきましょう。
最後に「このテキストは最後に消してください」という表示を消去しましょう！
まとめ
これでトップページに
- 「メニューの表示」
- 「ヘッダーカードの表示」
- 「新着記事の表示」
- 「バナー風ボックスとカードの表示」ができました。
これで私と同じようなトップページが作れるはずです。後は自分の好みに合わせて色々変更してみましょう。
