こんな悩みに答えます。
稼ぐことに特化したWordPressテーマ「AFFINGER5（アフィンガー）」。
今回はスマホでの表示をすっきりさせる「タブ」についてご紹介します。
タブを使うとスマホだと表示されにくいものもうまく表示できますよ！
AFFINGER5（アフィンガー）なら使うべき「タブ」とは
こんなのを指します↓
これが
「RYO'S NOTEへようこそ」
こうなります
RYO'S NOTEではWordPressやAFFINGER5に関することを発信しています！
一つの箇所で、ボタンクリックで別のものを表示できます！おしゃれ！
「1 タブ目: 概要」「2 タブ目: 詳細」といった使い方もできます。
では、やり方を見ていきましょう。
AFFINGER5のタブの作り方
記事作成画面のエディターから
タグ＞レイアウト＞タブ＞２つ
から作成できます。
できるショートコードは
st-tab-content memo="全体を包むボックスです" myclass=""
st-input-tab fontawesome="" text="タブ1" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="45" value="1" checked="checked"
st-input-tab fontawesome="" text="タブ2" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="45" value="2" checked=""
st-tab-main bgcolor="" bordercolor="" value="1"
タブ1のコンテンツ
[/st-tab-main]
RYO'S NOTEではWordPressやAFFINGER5に関することを発信しています！/st-cmemo/st-tab-main
/st-tab-content
- text="" にタブのタイトルを入力する
※例: text="Before" （タブの数だけいれること！） - st-tab-main]〜[/st-tab-mainに表示する内容を入力する
注意ポイント
タブは 1 記事につき、1 つしか配置できません。
2 つ以上配置すると、2 つ目はタブの中身が表示されなくなります。
スマホ表示でもすっきりしますし、PCでも記事が長くならないので覚えておくといいですよ！
プレビューで見ながら書くと出来上がりのイメージが付くかもしれません。
これだけ！
まとめ：AFFINGER5使ってるならタグ装飾はすごい簡単
以上、今回は「タグ」ついてご紹介しました。
すごい簡単ですよね。
WordPressそもそもの機能がすごいので、
HTMLやCSSの知識がなくても、
おしゃれな装飾が簡単にできます。
特にAFFINGER5だと様々な種類ががあるので、
使いこなすほうが難しいです笑
今後もこういったAFFINGERに関することを紹介していきます。
お疲れさまでした。