【SWELL】タブブロックの設定と使い方

【SWELL】タブブロックの設定と使い方

SWELLの「タブ」ブロックの設定と使い方をまとめておきます。

目次

タブブロックの使い方

記事編集画面で「タブ」ブロックを追加します。

タブブロックの追加

後はお好みでサイドバーから全体のデザインを変更して、タブコンテンツを編集して下さい。

タブブロックの編集

タブブロックは、全体の要素となるタブとその中に配置するタブコンテンツで構成されています。

ポイント
  • 必要な数だけタブを追加する
  • タブのタイトルを入力する
  • タブのデザインはサイドバーから変更する
  • タブコンテンツには自由にブロックを追加して編集できる

スタイル

スタイルは「デフォルト」「ふきだし」「下線」から選択できます。

タブ1。このタブブロックにはスタイル「デフォルト」を指定しています。

タブ設定

初期設定では一番左のタブが開いていますが、数字を指定して最初に開いておくタブを指定できます。

タブブロックのIDは自動で割り当てられるので変更不要です(変更する時は同じIDを使わない様に注意)。

タブサイズ設定

タブサイズは、PCとSP別々に設定できます。

タブ1。このタブブロックは、PCとSPで「テキストに合わせる」を選択しています。

また、「ナビをスクロール可能にする」にチェックを入れて、タブをスクロールさせることもできます。

タブ1。タブサイズ設定「端まで並べる(均等幅で)」、「ナビをスクロール可能にする」チェックなし。

カラー設定

タブブロックに背景色を設定できます。

タブ1。このタブブロックには背景色を指定していません。

ボーダー設定

タブブロックにボーダーを設定できます。

タブ1。このタブブロックにはボーダー01が設定されています。

ボーダーのデザインを変更したい時は、SWELLエディター設定の「ボーダーセット」から設定して下さい。

タブコンテンツ

タグコンテンツには、自由にブロックを追加して編集できます。

例えば、タブブロックの中に「投稿リスト」ブロックを追加すれば、トップページの様なタブ切り替えを任意のページに設置することができるので、サイト型のトップページを作成したい時に使うと便利です。

タブブロックは、組み合わせ次第でいろんな使い方ができます。

タブブロックを使う時の注意

タブコンテンツに(目次に追加されるレベルの)見出しを設置する時は注意して下さい。

タブコンテンツに見出しを追加

開いていない(非アアクティブな)タブに見出しを設置すると、目次のリンクが機能しません。

最後に

タブブロックは、比較コンテンツや類似コンテンツを切り替えて表示させたい時に使うと便利です。

ただ、プレビュー画面ではSP表示を確認できないので、記事を投稿した後はSP画面の確認を忘れないで下さい。

よかったらシェアしてね!

- シンプルなのに、高機能 -

swell_pr_banner

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、SWELLは日々進化しています。

ブロックエディター完全対応のWordPressテーマ。

今日の一言

9月15日から始まったヘルプフルアップデートの影響でアクセスが微減。微妙に下がったページや、完全に飛んでしまったページもある。公式によると完了までに2週間程度かかるみたいなので、一時的なものだと思いたい。最近はSEOだけでアクセスを集めるのに限界を感じる。もう少しSNSにも力を入れた方がいいのかもしれない。ただ、上手く運用できる気がしない。

コメント

コメントする

目次