
アフィンガーを導入して記事もいくつか書けてくると、次はそろそろサイトのデザインを整えたくなりますよね。
今回は【ブログのトップページに切り替えタブを置く方法】をご紹介します。
◆まだアフィンガーを導入してない方はこちらをどうぞ:ワードプレステーマ【アフィンガー】メリット・デメリットをレビューします
切り替えタブとは?
【切り替えタブボタン】とは、このオレンジマーカーで囲ってある部分です。
ボタンを押せば、その内容に適したブログカードを表示できちゃう!
さっそく、この便利なコードを設置していきましょう(^^)/
トップページに、切替タブとブログカードを設置しよう!
TATAのブログは、トップページを固定記事で作成しています。
順を追って説明しましょう!
step
1タグ▶レイアウト▶タブ(切替ボタン)でコードを挿入
『固定ページ』から『新規追加(すでに用意している方は既存記事)』を選び、タイトルを入れます。
(固定記事のタイトルは、サイトバーに表示されます。)
『タグ』≫『レイアウト』≫『タブ(切替ボタン)』を押して切り替えタブを設置します。
▼挿入できたらこんな感じになります
▼この時点ではまだ、プレビューしてもこんな感じです

step
2各タブを分割表示させる
『タグ』≫『レイアウト』≫『PCとTab』or『全サイズ』≫『好みの比率(例:左右50%)』を選びましょう。
『全サイズ』と『PCとTab』はどちらでもO.K!
ただ、全サイズはスマホも同じ条件になってしまうので注意が必要です。

▼挿入できたらこんな感じになります
『このテキストは~(50%)』の部分は、この時点ではまだ消さないでくださいね。

なにか文字を入力してから消しましょう。
ブログカードをデザインしよう!
まずはブログカードを挿入します。
①:『カード』でコードを挿入し、idにトップに表示したい記事IDを入力します。
②:①で挿入したコードを選択しながら、『スタイル』≫『レイアウト』≫『カードスタイル』を押します。
これで、左側は『カードスタイル』、右側は『通常のブログカードスタイル』になりました。
▼プレビューするとこんな感じです
あとは挿入した各コードを編集して、好みのデザインに近づけていきましょう!
動画で説明
同じ内容をYouTubeにもアップしたので、よくわからなかった方はこちらでも確認してみてください。
ブログカードのサムネイルの高さが合わない場合
高さがバラバラだと、せっかくのトップページが崩れてしまいます。
切り替えタブを設置後は、ブログカードの高さがそろっているか確認しましょう。
高さが揃っていない場合はこちら▶【アフィンガー】サムネイルの高さが合わない問題を解決しよう!

よかったら、ぜひツイッターでシェアしてください!
(@TATA43219)を付けていただければ、いいね❤しに飛んでいきます♪
あわせて読みたい
-
-
【アフィンガー】ブログのヘッダーがグラデーションにならない問題を解決!
-
-
はじめての投資【証券会社のえらび方】と【初心者におすすめの3社】をご紹介!