wordpress アフィンガー ブログ作り

【アフィンガー】切替タブを設置して、トップページをデザインしよう!

こんにちは、TATA(@TATA43219)です!

 

アフィンガーを導入して記事もいくつか書けてくると、次はそろそろサイトのデザインを整えたくなりますよね。

今回はブログのトップページに切り替えタブを置く方法をご紹介します。

アフィンガー(affinger)トップページに切り替えタブを設置する方法

まだアフィンガーを導入してない方はこちらをどうぞ:ワードプレステーマ【アフィンガー】メリット・デメリットをレビューします

 

切り替えタブとは?

切り替えタブボタン】とは、このオレンジマーカーで囲ってある部分です。

ボタンを押せば、その内容に適したブログカードを表示できちゃう!

さっそく、この便利なコードを設置していきましょう(^^)/

 

トップページに、切替タブとブログカードを設置しよう!

TATAのブログは、トップページを固定記事で作成しています。

順を追って説明しましょう!

 

step
1
タグ▶レイアウト▶タブ(切替ボタン)でコードを挿入

 

固定ページ』から『新規追加(すでに用意している方は既存記事)』を選び、タイトルを入れます。

(固定記事のタイトルは、サイトバーに表示されます。)

 

タグ』≫『レイアウト』≫『タブ(切替ボタン)』を押して切り替えタブを設置します。

 

挿入できたらこんな感じになります

 

この時点ではまだ、プレビューしてもこんな感じです

 

何もないので、中身を入れていくよ

 

step
2
各タブを分割表示させる

 

タグ』≫レイアウト』≫『PCとTab』or『全サイズ』≫『好みの比率(例:左右50%)』を選びましょう。

全サイズ』と『PCとTab』はどちらでもO.K!

ただ、全サイズはスマホも同じ条件になってしまうので注意が必要です。

TATAのブログは『PCとTab』の『左右50%』だよ

 

挿入できたらこんな感じになります

 

このテキストは~(50%)』の部分は、この時点ではまだ消さないでくださいね。

文字がないと、この枠は消えちゃうの!

なにか文字を入力してから消しましょう。

 

ブログカードをデザインしよう!

まずはブログカードを挿入します。

①:『カード』でコードを挿入し、idにトップに表示したい記事IDを入力します。

②:①で挿入したコードを選択しながら、『スタイル』≫レイアウト』≫カードスタイル』を押します。

これで、左側は『カードスタイル』、右側は『通常のブログカードスタイル』になりました。

 

プレビューするとこんな感じです

あとは挿入した各コードを編集して、好みのデザインに近づけていきましょう!

 

動画で説明

同じ内容をYouTubeにもアップしたので、よくわからなかった方はこちらでも確認してみてください。

 

ブログカードのサムネイルの高さが合わない場合

高さがバラバラだと、せっかくのトップページが崩れてしまいます。

切り替えタブを設置後は、ブログカードの高さがそろっているか確認しましょう。

 

高さが揃っていない場合はこちら【アフィンガー】サムネイルの高さが合わない問題を解決しよう!

 

 

この記事がお役にたてたらうれしいです!

よかったら、ぜひツイッターでシェアしてください!

@TATA43219)を付けていただければ、いいね❤しに飛んでいきます♪

 

あわせて読みたい

アフィンガー、トップページがグラデーションにならない問題を解決
【アフィンガー】ブログのヘッダーがグラデーションにならない問題を解決!
はじめての投資、証券会社の選び方とオススメ会社
はじめての投資【証券会社のえらび方】と【初心者におすすめの3社】をご紹介!

-wordpress, アフィンガー, ブログ作り