ゆきお複数の商品情報を比較して表示したいけど、記事が長くなって読みにくい…
みゆきタブで情報を切り替えられるサイトを見かけるけど、どうやって作るの？
そんな悩みを解決してくれるのが、SWELLタブブロックです。
この記事では、タブブロックの基本的な使い方から、タブブロックの設定方法そして応用例として新着記事・人気記事・タグ別記事を切り替え表示できる記事一覧の作成方法について実際の設定画面を使って詳しく解説します。
さらに、読者にタブをクリックしてもらうための効果的なテクニックも紹介しています。
この記事を読めば、あなたも情報を効率的に整理した、読者にとって使いやすいサイトが作れるようになります。
さっそく始めてまいりましょう。
まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。
SWELLタブブロックでできること
SWELLのタブブロックには、サイトの雰囲気に合わせてカスタマイズできる便利な機能が豊富に用意されています。
主要な3つの機能について詳しく解説します。
豊富なデザインから選べる
タブブロックでは3種類のスタイルから選択できます。
「ノーマル」はシンプルな四角枠で、色は黒だけが使われています。
テキスト1
「ふきだし」は親しみやすい印象を与え、タブの色はメインカラーです。
テキスト1
「下線」はスタイリッシュで洗練された印象で、色はメインカラーが適用されます。
テキスト1
さらに、タブを囲むボーダーの設定や背景色の設定も可能です。
テキスト1
テキスト1
これらの豊富なカスタマイズ選択により、あなたのサイトの雰囲気に合わせたデザインが選べます。
タブの大きさを変更できる（デバイスごと）
タブのサイズは、パソコンとスマートフォン・タブレット（SP）で別々に設定可能です。
具体的な選択肢は以下の通りです。
- テキストに合わせる
- 固定幅（PC：25%、SP：50%）
- 端まで並べる
- 端まで並べる（均等幅で）
テキスト1
テキスト1
テキスト1
テキスト1
さらに、タブが多い場合は横スクロール機能も利用できます。タブが多いときに助かりますね。
テキスト1
最初に表示するタブを指定できる
ページを開いた際に、どのタブを最初に表示するかを自由に設定できます。
デフォルトでは左端のタブが表示されますが、読者に見てほしいコンテンツがあるタブを開いておくことが可能です。
サンプルとして、以下に並べたタブブロックで、１つ目は１番目のタブが、２つ目は２番目のタブが、３つ目は３番目のタブが開くよう設定してあります。
テキスト1
テキスト2
テキスト3
アッフィー「順番に並べたいけど、読者には３つ目のタブを見てほしい」なんて場合に最適！
SWELLタブブロックの基本的な使い方
タブブロックの挿入から基本操作まで、4つのステップで簡単に作成できます。
記事編集画面の左上「+」ボタンをクリックし、「タブ」を探して選択してください。
アッフィー段落内で「/タブ」と入力しても、タブブロックを呼び出すことができますよ。
「+」ボタンでタブを追加、「＜」「＞」ボタンでタブの移動、「×」ボタンでタブの削除が可能です。
タブにタイトルを入力し、タブエリア内でコンテンツを作成していきます。
タブエリアには、文章や画像など自由に挿入できます。
右側のサイドバーからデザインやサイズを調整します。
アッフィー基本的な使い方は以上です。
細かい設定方法については、次の章で詳しく解説しますね
SWELLタブブロックの各種設定
タブブロックの各種設定は右側のサイドバーから行います。
主要な設定項目は以下の通りです。
順番に解説しますね。
タブデザインの設定
「ノーマル」「ふきだし」「下線」の3つのスタイルからデザインを選択できます。
サイドバーの「スタイル」から設定しましょう。
タブサイズの設定
パソコンとスマートフォンで別々にタブサイズを設定できます。
「タブサイズ設定（PC）」と「タブサイズ設定（SP）」から以下の選択肢が利用可能です。
- テキストに合わせる
- 固定幅（PC：25%、SP：50%）
- 端まで並べる
- 端まで並べる（均等幅で）
タブが多い場合でも「ナビをスクロール可能にする」をオンにすれば、横スクロールで全てのタブを表示できるようになります。
背景色の設定
タブブロック全体に背景色を設定して、コンテンツを目立たせることができます。
サイドブロックの「カラー設定」の「背景色」から設定できます。
背景色をサイトのメインカラーと合わせると、統一感を出すことができるのでおすすめです。
ボーダー設定
タブブロックを囲む枠線の表示を調整できます。
「ボーダー設定」から４種類のボーダーを選ぶことができます。
ボーダーを選択すると、タブブロックの境界が明確になります
特に「ふきだし」や「下線」スタイルでは、どこまでがタブコンテンツなのか分かりにくくなりがちです。
ボーダーを設定することで、読者が他のコンテンツと混同することを防げます。
最初に開くタブの設定
ページ表示時に開いておくタブを指定できます。
①タブブロックを選択した状態で、②「何番目のタブを最初に開いておくか」の欄に数字を入力してください。
タブは左から1番目、2番目と数えていきます。
タブブロックのIDについて
設定項目に「タブブロックのID」という項目があり、英数字が記載されています。
これは自動でタブブロックに割り振られたもので、特にさわる必要はありません。
もし変更することがある場合には、同じページのタブブロックのIDと同じにならないようにしてください。
タブ・投稿ブロックを使った記事一覧を作成する
タブブロックの使い方を一通り説明しました。
そこで次は、応用例としてタブブロックと投稿リストを組み合わせた記事一覧を作成してみましょう。
最終的に作成したい記事一覧
以下のような記事一覧の作成を目指します。
「新着記事」タブでは投稿日順、「人気記事」タブではアクセス数順に記事が並んでいます。
「SWELL記事」タブでは「SWELL」というタグのついた記事を表示させます。
「もっと見る」ボタンも設置して、より多くの記事を見てもらう導線も作成します。
作成手順は以下のとおりです
順番に手順を見ていきましょう。
タブブロックを挿入する
最初に記事編集画面にタブブロックを挿入しましょう。
編集画面左上の「+」ボタンをクリックして、タブブロックを選択し、タブブロックを挿入してください。
デフォルトで2つのタブが表示されるので、タブを１つ追加し左のタブから順番に「新着記事」「人気記事」「SWELL記事」と入力しましょう。
タブ内に投稿ブロックを挿入する
各タブエリア内に投稿リストブロックを配置します。
1つ目のタブエリア内をクリックしてください。
「+」ボタン⇒「投稿リスト」の順にクリックして投稿リストブロックを挿入しましょう。
残りのタブエリアにも同様に投稿リストを挿入します。
投稿リストブロックの使い方は【SWELL】投稿リストブロックのカスタマイズ術｜設定項目を徹底解説で詳しく解説しています。
新着記事を作り込む
1つ目のタブで新着記事を作り込んでいきます。
記事編集画面に戻り、新着記事タブを選択し、タブ内の投稿リストブロックをクリックします。
サイドバーの「Settings」から「投稿の表示順序」を「新着順」に設定しましょう。
①「MOREリンクの表示テキスト」に「もっと見る」と入力し、②トップページのURLを「MOREリンクのURL」に貼り付けてください。
URLを貼り付けたら「公開」ボタンをクリックして設定を保存しましょう。
リンク先となる固定ページを準備する
次に、人気記事一覧の「もっと見る」のリンク先となる固定ページを準備します。
WordPress管理画面から「固定ページ」⇒「固定ページを追加」とクリックしてください。
「人気記事」とタイトルを入力します。
本文は何も入れません。というのも、あとの設定で勝手に記事一覧が反映されるからです。
スラッグを変更しておきましょう。
スラッグは、半角英数字が良いとされています。
①スラッグをクリックして、②スラッグを「popular_articles」と変更します。
この設定は重要です。この設定を忘れると、人気記事一覧が表示されないからです。
①「デフォルトテンプレート」をクリックし、②「人気記事一覧」を選択しましょう。
URLをコピーしておきましょう。
「公開」ボタンをクリックし、作成した固定ページ「人気記事」を保存してください。
アッフィーこれで人気記事のリンク先が用意できました。
人気記事を作り込む
人気記事のリンク先が用意できたので、次は人気記事を作り込んでいきましょう。
記事編集画面に戻り、①「人気記事」タブに切り替え、②投稿リストブロックをクリックします。
サイドバーの「Settings」の「投稿の表示順序」を「人気順」に設定しましょう。
URLを貼り付けたら「保存」ボタンをクリックして設定を保存しましょう。
SWELL記事を作り込む
3つ目のタブでSWELL記事を作り込んでいきます。
①３つ目のタブ「SWELL記事」に切り替え、②タブ内の投稿リストブロックをクリックしてください。
③投稿の表示順序は「ランダム」を選びます。
「Pickup」の「タクソノミーの条件設定」から①「タグ」をクリックし、②表示したいタグ「swell」を選択します。
「MOREリンクの表示テキスト」に「もっと見る」と入力してください。
「MOREリンクのURL」は入力しなくて大丈夫です。
タグを指定するとMOREリンクのURLは自動で取得してくれるからです。
タブのサイズ・デザインを整える
最後に、タブブロック全体の見た目を調整しましょう。
タブブロック全体をクリックして選択状態にしてください。
サイドバーから「ふきだし」や「下線」など、お好みのタブスタイルを選択します。
今回は「ふきだし」を選びました。
PCとSPそれぞれでタブサイズ設定します。
今回はPC、SPともに「端まで並べる（均等幅で）」を選択しました。
「保存」ボタンをクリックしたら完了です。
アッフィーこれで完成です。お疲れさまでした。
タブをクリックしてもらうためのヒント
タブブロックは、複数のコンテンツをタブで切り替えできるので、記事が長くならず効率的に表示できます。
一方で、タブがあることに気が付かずクリックしてもらえない可能性もあります。
そこで、ここではタブの存在に気づいてもらい、積極的に切り替えてもらうための工夫を３つ紹介します。
順番に解説します。
タブタイトルにアイコンを挿入する
タブタイトルにアイコンを追加することで、読者の注意を引きつけられます。
SWELLでは1000種類以上のアイコンが利用可能です。手順は以下のとおりです。
①アイコンを追加したいタブタイトルの先頭を選択し、②ブロックツールバーの「アイコン」をクリックしてください。
表示されたアイコン画面からお好みのアイコンを選択しましょう。
選択したタブタイトルの先頭にアイコンが挿入されます。
例えば「新着記事」タブには時計アイコン、「人気記事」タブにはスターアイコン、「SWELL記事」にはSWELLアイコンなど、内容に関連するアイコンを選ぶと効果的です。
タブタイトルの上にマイクロコピーを設置する
タブの上部に「＼クリックで表示／」のような短い案内文を配置します。
マイクロコピーとは、ボタンや機能の周辺に添える短い説明文のことです。
読者がタブをクリックできることに気づきやすくする効果があります。
次の手順で設置しましょう。
タブブロックの上に段落ブロックを挿入してください。
「＼タブで切り替え／」「＼クリックで表示／」などの文言を入力します。
今回は、「＼クリックで表示／」としました。
①ブロックツールバーの「テキストの配置」をクリックして、②「テキスト中央寄せ」をクリックしましょう。
①ブロックツールバーの「ブロック下の余白量」をクリックし、②「0em」を選択してください。
これでタブブロックの上にマイクロコピーが設置できます。
装飾「吹き出し」を活用する
段落の装飾「吹き出し」を使って、タブがあることに気付いてもらう方法です。
「タブをクリックして確認してください」のように案内すれば、読者にクリックしてもらいやすくなります。
タブブロックの上に段落ブロックを挿入してください。
「タブをクリックして確認してください」などの誘導文を作成します。
案内文を選択した状態で、段落ブロックの装飾「ふきだし」をクリックしましょう。
タブをクリックしてもらうためには、ここで紹介したタブに気付いてもらう工夫をすることも効果ありますが、タブタイトルで興味を持ってもらう工夫も大切です。
SWELLタブブロックで読者が使いやすいサイトにしよう
今回は、SWELLタブブロックの使い方を解説しました。
記事の内容は以下のとおりです。
SWELLのタブブロック機能を活用すれば、複数の情報を効率的に整理した読みやすいサイトが簡単に作成できます。
タブブロックを活用して散らばった情報をスッキリまとめ、読者にとって使いやすいサイトを作りましょう。
本ブログではWindowsテーマにSWELLを使用しています。
あなたも、直感的に操作できるSWELLにしませんか？
今回は以上です。
最後までお読みいただきありがとうございました。
