![](https://cxg-design.jp/wp-content/uploads/2024/02/20264f1cb37754d8f4d14bcd78cab572.png)
Tabs Responsiveでテキストをアニメーション表示
Webサイトでは、あらゆるところでアニメーションが使用されています。今回は、以前BLOGで紹介した「Tabs Responsive」で、項目を切り替えると、テキストがフェードイン表示するタブを作成します。
今回のDEMOは、発送の情報をまとめたタブです。プラグインの名前の通り、全てレスポンシブ対応になっています。
1カラムの下に、カバーを上配置で、中に3カラムを配置し、中央にタブのショートコードブロックを入れています。PCでは、幅70%、SPでは全幅になるように設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/1f037160994dc82a1f19b67f272af457.png)
カバーの配置を上中央にします。
![](https://cxg-design.jp/wp-content/uploads/2024/02/82e0d39e3e6a71abb5651431cebb18db.png)
3カラムの中央を幅70%に設定
基本操作
改めて、基本操作を簡単に説明します。左サイドバーのTabs Responsive>Add New Tabsをクリックし、新しいタブを作成します。タイトルを入力し、Add Tabs内のTab Title(項目)、Tab Description(内容)を入力し、Tab Iconからアイコンを選択します。右サイドバーの設定項目からスタイルを変更し、右上の「公開」ボタンをクリックし保存します。Tabs Responsive>All Tabsのショートコードをコピーし、表示させたい場所に設置します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/e7e3e4a065002ed27ec19de9689d72a5.png)
タイトル、Add Tabs内を入力し、公開ボタンをクリック。
![](https://cxg-design.jp/wp-content/uploads/2024/02/e76bf25c69a5cbae64088b32372ff8f2.png)
Tabs Responsive>All Tabsのショートコードを表示させたい場所に設置
共通設定
まず、今回のDEMO全ての共通設定項目です。タブ項目にアイコンを表示するので、「Display Option For Title and icon」を「Show Tabs Title + Icon (both)」に設定します。文字スタイルは、Webサイトで使用しているフォントを使用するので「Font Style/Family」を「Theme Default Style」に設定します。タブの場所は、左側に設定するので、「Tabs Position」を「Left」にします。
項目 | 設定値 |
---|---|
Display Tabs Section Title | NO |
Display Option For Title and icon | Show Tabs Title + Icon (both) |
Tabs Icon Position Alignment | Before Tab Title |
Font Style/Family | Theme Default Style |
Tabs Position | Left |
Margin Between Two Tabs | NO |
Margin Between Tabs And Content | NO |
横並びタブ
![](https://cxg-design.jp/wp-content/uploads/2024/02/de02bb5e96177b05288edd7c9ecac43e.png)
タブをSPでも上に横並びで表示するため、「Title Display Mode In Mobile」を「Display As a tabs」に設定しています。タブの文字数が多くなければ、SPでも一列で表示されます。「Tabs Description Animation」を「Fade in Up Animation」に設定することで、タブが変更されると、テキストが下からフェードインします。
![](https://cxg-design.jp/wp-content/uploads/2024/02/d92b6f73c96feb54502a16a898eb81df.png)
「Tabs Description Animation」を「Fade in Up Animation」に設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/8921668086e5ed971813ce42659b1077.png)
「Title Display Mode In Mobile」を「Display As a tabs」に設定
項目 | 設定値 |
---|---|
Display Tabs Border | NO |
Tabs Styles | Default |
Tabs Title Background Colour | 濃いグレー |
Tabs Title/Icon Font Colour | 白 |
Selected Tabs Title Background Colour | 白 |
Selected Tabs Title/Icon Font Colour | 黒 |
Tabs Description Background Colour | 白 |
Tabs Description Font Colour | 黒 |
Tabs Title/Icon Font Size | 14 |
Tabs Description Font Size | 16 |
Tabs Description Animation | Fade in Up Animation |
Tabs Alignment | Horizontal |
Tabs Mobile display Settings | Display Both Title + Icon |
Title Display Mode In Mobile | Display As a tabs |
縦並びタブ
![](https://cxg-design.jp/wp-content/uploads/2024/02/bbb0db1b7645e04488071f5426a06d49.png)
タブを左に、縦並びで固定するため「Tabs Alignment」を「Vertical」に設定しています。テキストは、上からフェードインするよう「Tabs Mobile display Settings」を「Fade in Down Animation」に設定しています。SPでは、幅が狭まり、テキストの改行が多くなるため、「Tabs Mobile display Settings」を「Display Only Title」にして、アイコンを外します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/76164fe662141b55ae8d332f2040098c.png)
「Tabs Description Animation」を「Display As a tabs」に設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/8ffc19629664c6021be69405d5168490.png)
「Tabs Mobile display Settings」を「Fade in Down Animation」に、「Tabs Alignment」を「Vertical」に設定
項目 | 設定値 |
---|---|
Display Tabs Border | YES |
Tabs Styles | Default |
Tabs Title Background Colour | 白 |
Tabs Title/Icon Font Colour | 黒 |
Selected Tabs Title Background Colour | 黒 |
Selected Tabs Title/Icon Font Colour | 白 |
Tabs Description Background Colour | 黒 |
Tabs Description Font Colour | 白 |
Tabs Title/Icon Font Size | 14 |
Tabs Description Font Size | 16 |
Tabs Description Animation | Fade in Down Animation |
Tabs Alignment | Vertical |
Tabs Mobile display Settings | Display Only Title |
Title Display Mode In Mobile | Display As a tabs |
SP全幅タブ
![](https://cxg-design.jp/wp-content/uploads/2024/02/c461ac2fd1c60dbc8b97deb6cb506966.png)
SPでは、タブのボタンが全幅、縦並びになるように「Title Display Mode In Mobile」を「Display As A vertical Button」に設定しています。幅が広がる分、タブタイトルのフォントサイズを大きく設定しています。SPでは、タブと内容が離れる場合があるので、紛らわしくならないよう、色分けをしっかりしています。テキストは、左からフェードインするよう「Tabs Description Animation」を「Fade in Left Animation」に設定しています。
![](https://cxg-design.jp/wp-content/uploads/2024/02/1d27054b042580dc51eda2273e1df87e.png)
「Tabs Description Animation」を「Fade in Left Animation」に設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/be41c47c060a0f4d4a3e64f38d108ab6.png)
「Title Display Mode In Mobile」を「Display As A vertical Button」に設定
項目 | 設定値 |
---|---|
Display Tabs Border | NO |
Tabs Styles | Default |
Tabs Title Background Colour | 赤 |
Tabs Title/Icon Font Colour | 黒 |
Selected Tabs Title Background Colour | 白 |
Selected Tabs Title/Icon Font Colour | 黒 |
Tabs Description Background Colour | 白 |
Tabs Description Font Colour | 黒 |
Tabs Title/Icon Font Size | 18 |
Tabs Description Font Size | 16 |
Tabs Description Animation | Fade in Left Animation |
Tabs Alignment | Horizontal |
Tabs Mobile display Settings | Display Both Title + Icon |
Title Display Mode In Mobile | Display As A vertical Button |
以上で、今回の説明は、終了です。ちょっとしたアニメーションですが、設定が簡単なので便利ですね。動きもスムーズなので使いやすいです。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。