【WordPress】レスポンシブ対応のコンテンツタブTabs

tabs

Tabsはレスポンシブ対応のCSS3コンテンツタブです。
設定は簡単でタブの背景色、フォントサイズの変更などもでき、コンテンツもフィールドに入力すればできます。設定後はショートコードを貼り付けるだけです。

Tabsプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Tabsを検索
有効化にするとTabsが追加されます。New Tabsをクリックします。

tabs_1
上記画像はTabs Style画面です。

Background Image 背景を入れる場合は画像を選択します。入れない場合は空白にしておきます。
Default Background Color タブデフォルトの色を選択。
Active Background Color タブアクティブ時、コンテンツの色を選択。
Tabs Header Font Color タブフォントの色を選択。
Tabs Header Font Size タブヘッダーフォントサイズ
Tabs Content Font Color コンテンツフォントの色を選択
Tabs Content Font Size  コンテンツフォントサイズ

tabs_2
上記画像はTabs Content画面です。
Addをクリックし、Tabs HeaderとTabs Contentを入力し、公開をクリックします。
ショートコードをコピーして投稿などに貼り付けたら出来上がりです。

screenshot-1
上記画像はTabsのスクリーンショットです。出来上がりはこんな感じになります。

 
wordpress

【WordPress】レスポンシブ対応のコンテンツタブTabs

  • LATEST
  • RELATED
  • POPULAR