アフィンガーを導入して記事もいくつか書けてくると、次はそろそろサイトのデザインを整えたくなりますよね。
今回は【ブログのトップページに切り替えタブを置く方法】をご紹介します。
◆まだアフィンガーを導入してない方はこちらをどうぞ：ワードプレステーマ【アフィンガー】メリット・デメリットをレビューします
切り替えタブとは？
【切り替えタブボタン】とは、このオレンジマーカーで囲ってある部分です。
ボタンを押せば、その内容に適したブログカードを表示できちゃう！
さっそく、この便利なコードを設置していきましょう(^^)/
トップページに、切替タブとブログカードを設置しよう！
TATAのブログは、トップページを固定記事で作成しています。
順を追って説明しましょう！
step
1タグ▶レイアウト▶タブ（切替ボタン）でコードを挿入
『固定ページ』から『新規追加（すでに用意している方は既存記事）』を選び、タイトルを入れます。
（固定記事のタイトルは、サイトバーに表示されます。）
『タグ』≫『レイアウト』≫『タブ（切替ボタン）』を押して切り替えタブを設置します。
▼挿入できたらこんな感じになります
▼この時点ではまだ、プレビューしてもこんな感じです
step
2各タブを分割表示させる
『タグ』≫『レイアウト』≫『PCとTab』or『全サイズ』≫『好みの比率（例：左右50％）』を選びましょう。
『全サイズ』と『PCとTab』はどちらでもO.K！
ただ、全サイズはスマホも同じ条件になってしまうので注意が必要です。
▼挿入できたらこんな感じになります
『このテキストは～（50％）』の部分は、この時点ではまだ消さないでくださいね。
なにか文字を入力してから消しましょう。
ブログカードをデザインしよう！
まずはブログカードを挿入します。
①：『カード』でコードを挿入し、idにトップに表示したい記事IDを入力します。
②：①で挿入したコードを選択しながら、『スタイル』≫『レイアウト』≫『カードスタイル』を押します。
これで、左側は『カードスタイル』、右側は『通常のブログカードスタイル』になりました。
▼プレビューするとこんな感じです
あとは挿入した各コードを編集して、好みのデザインに近づけていきましょう！
動画で説明
同じ内容をYouTubeにもアップしたので、よくわからなかった方はこちらでも確認してみてください。
ブログカードのサムネイルの高さが合わない場合
高さがバラバラだと、せっかくのトップページが崩れてしまいます。
切り替えタブを設置後は、ブログカードの高さがそろっているか確認しましょう。
高さが揃っていない場合はこちら▶【アフィンガー】サムネイルの高さが合わない問題を解決しよう！
よかったら、ぜひツイッターでシェアしてください！
（@TATA43219）を付けていただければ、いいね❤しに飛んでいきます♪
あわせて読みたい
-
-
【アフィンガー】ブログのヘッダーがグラデーションにならない問題を解決！
-
-
はじめての投資【証券会社のえらび方】と【初心者におすすめの３社】をご紹介！