
ワードプレス有料テーマDIVERでタブウィジェットを作っちゃおう🤩
ということで今回はタブウィジェットをサイト内に設置する方法を紹介したいと思いますᕙ(⇀‸↼‶)ᕗ

タブウィジェットはこんな感じで複数のウィジェット(ブログパーツ)を設置することができちゃいます!
タブウィジェットを設置するメリットはサイト内のわずかなスペースで複数のカテゴリー記事を表示させることが可能な点です✅
つまり!!!
サイト訪問者に複数の記事を猛烈にアピールすることが可能な超使える機能なのです!
タブウィジェットを設置することでユーザビリティも上がるのでサイト運営者と読者の両方にメリットがあるわけですな🤩
それでは早速、タブウィジェットの作り方を見ていきましょう〆(・∀・@)
コンテンツ
タブウィジェットの設置手順①

ワードプレスの管理画面→外観→ウィジェットを選択。

するとこの画面が出てくるので左エリアの設置したいウィジェットを右エリアの右下にあるタブウィジェットエリアにドラッグ&ドロップで入れてやりましょう✅


もしくはウィジェットの下矢印→タブウィジェットエリア→ウイジェットを追加でもOKです!
タブウィジェットの設置手順②
それでは今回は試しに新着記事といくつかのカテゴリー別の記事を設置してみようと思います🤩

先ほどの手順で左のエリアから記事一覧リストをタブウィジェットエリアに入れてみました✅
記事一覧リストは新着記事として活用する作戦でいきますw
それではそれぞれの設定について見ていきましょう👀
タイトルに入れた文言がタブウィジェットの上部に表示されるのでココでは『新着記事』にしています。
最大表示件数タブウィジェットに表示される最大記事数の設定でデフォルトのまま”8”にしています。
ソート順新着記事を作りたいので投稿日順にしています✅
この他にも更新日順とランダムがあるので用途によって使い分けましょう。
ココも新着記事なので全カテゴリーにしています。
サイト内のカテゴリー毎に選ぶこともできるので非常に便利ですよ🤩
タグの設定ですが今回はタグなしにしています。
サムネイルを表示する記事のサムネの表示・非表示を設定できます✅
サムネは個人的には絶対必要なので表示を選択してますw
またサムネのサイズも設定可能です。

記事を書くときの抜粋(投稿画面の右にある)を表示にするか・しないかを設定できます✅
(タブウィジェットはサイドバーにも設置できますがその場合には抜粋は表示できません)
抜粋の文字数も設定可能。
それぞれの設定が可能です。
もっと見るテキスト・リンク先URLテキストの部分には『もっと見る』『続きを読む』『more』などの文言を入れます。
URLは固定ページで作った記事一覧のURLを入れてます✅

各設定が終わったら保存をクリックして完了です🤩
タブウィジェットにカテゴリー別の記事を入れてみる!

それでは先ほどの続きで今度はカテゴリー別の記事を入れてみたいと思います!
カテゴリー別の記事をタブウィジェットに設置する場合は記事一覧リストorグリッドを選択します✅
つまり先ほどの新着記事の時と同じですねw
しかし設定が若干変わります(Ò囗Óױ)

カテゴリーの設定で新着記事の場合は全カテゴリーでしたがココではこのサイトのカテゴリーにあるDTM関連を入れてみたいと思います🤩

分かりやすいようにタイトルもカテゴリー名と同じDTM関連にしてます。
設定が終わったら保存して完了。
タブウィジェットをサイドバーに設置してみよう!

そしてこのように新着記事+カテゴリー記事のタブウィジェットの設定ができたらあとはタブウィジェットを設置したい場所を選びます!
(今回はサイドバーに設置しますが様々な場所に設置が可能でPC・SPで別々の場所に設置することもできます)

ここが若干ややこしいのですが先ほどまでの右側のタブウィジェットエリアではなく、左エリアの【Diver】タブウィジェットを入れたい場所(メインサイドバー)にドラッグ&ドロップします✅

そうするとこのようにメインサイドバーにタブウィジェットが挿入されます✅

タイトルは基本的に空欄で良いと思います👀
表示タブウィジェットエリアですがタブウィジェットは複数作成することが可能でやり方は次項で紹介しますね!
ココでは1にします✅
保存を押すと!?

このようにサイドバーにタブウィジェットが設置できましたᕙ(⇀‸↼‶)ᕗ
タブウィジェットの数を増やす方法!

DIVERオプション→基本設定を選びます。

メイン設定画面のタブウィジェット数から数を設定できます💡
(今回は3にしました)
変更を保存をクリックします。

外観→ウィジェットで戻るとこのようにタブウィジェットエリアが3つに増えています🤩

同じ手順でタブウィジェットエリア2にウィジェットを入れていきます。

再び左エリアの【Diver】タブウィジェットをメインサイドバーにドラッグ&ドロップします。
そして今度は表示タブウィジェットエリアを2にします✅
(1にした場合は最初に作った方のタブウィジェットが表示されます)

そうするとタブウィジェット2がメインサイドバーに表示されます🤩
このようにしてタブウィジェットをサイトの様々な場所に設置・増やすことができるのでこれはめっちゃ使えると思いますねᕙ(⇀‸↼‶)ᕗ
やり方さえ覚えればあとは自由にカスタマイズしてサイト訪問者に全力でアピールすることができるのでDIVERを使っている方はぜひ今回紹介したタブウィジェットをご自身のサイトに設置してみて下さい〆(・∀・@)
-
WEBサービス・スクール【nizima LIVE】アプリで簡単にVTuberになれる!?2022.05.13
-
WEBサービス・スクール動画クリエイターとマッチングできるサービス【むびる】で撮影・編集を依頼しちゃう!?2022.04.21
-
Logic ProX【Logic Pro Xの使い方】メインウインドウ&リージョンの基本操作を徹底解説!2022.04.21
-
Logic ProX【Logic Pro X】トラックの超基本的な操作を覚えよう!2022.04.19
-
WEBサービス・スクール【オンラインフィットネス】アプリでプロのトレーナーのボディメイク指導が受けられる!?2022.04.04
-
WEBサービス・スクール【カウンセリングアプリ】不安や悩みを顔出し・通院不要でカウンセラーにオンラインで相談できる!?2022.04.02
-
ネットショップおすすめのネットショップ作成サービス5選!2022.04.01
-
WEBサービス・スクール【ココナラ】男性の愚痴や悩みを美女が聞いてくれるサービスがある!?2022.03.26
- もっと見る
-
Logic ProX【Logic Pro Xの使い方】メインウインドウ&リージョンの基本操作を徹底解説!2022.04.21
-
Logic ProX【Logic Pro X】トラックの超基本的な操作を覚えよう!2022.04.19
-
DTM関連『Addictive Drums 2が使えなくなった(泣)』を解決した方法!2022.02.16
-
Logic ProX【Logic Pro X】センドエフェクトとBus(バス)を使い方を紹介!2022.02.15
-
Logic ProX初心者がLogic Pro X を短期間で使いこなせるようになる方法!2021.12.15
-
Logic ProX【Logic Pro X 10 .7】新機能『空間オーディオ』や追加された機能を紹介!2021.12.10
-
Logic ProX【Logic Pro X】オーディオ波形編集のやり方!2021.11.18
-
Logic ProX【Logic Remoteの使い方】iPadでLogic Pro Xをリモートコントロールせよ!2021.10.27
- もっと見る
-
WEBサービス・スクール【nizima LIVE】アプリで簡単にVTuberになれる!?2022.05.13
-
WEBサービス・スクール動画クリエイターとマッチングできるサービス【むびる】で撮影・編集を依頼しちゃう!?2022.04.21
-
WEBサービス・スクール【オンラインフィットネス】アプリでプロのトレーナーのボディメイク指導が受けられる!?2022.04.04
-
WEBサービス・スクール【カウンセリングアプリ】不安や悩みを顔出し・通院不要でカウンセラーにオンラインで相談できる!?2022.04.02
-
ネットショップおすすめのネットショップ作成サービス5選!2022.04.01
-
WEBサービス・スクール【ココナラ】男性の愚痴や悩みを美女が聞いてくれるサービスがある!?2022.03.26
-
WEBサービス・スクール【バーチャルオフィスとは?】格安で利用できるおすすめのサービスを紹介!2022.03.24
-
ネットショップ食品販売に最適なネットショップ作成サービス『カラーミーショップ』2022.03.14
- もっと見る
-
Logic ProX【Logic Pro Xの使い方】メインウインドウ&リージョンの基本操作を徹底解説!2022.04.21
-
Logic ProX【Logic Pro X】トラックの超基本的な操作を覚えよう!2022.04.19
-
Logic ProX【Logic Pro X】センドエフェクトとBus(バス)を使い方を紹介!2022.02.15
-
Logic ProX初心者がLogic Pro X を短期間で使いこなせるようになる方法!2021.12.15
-
Logic ProX【Logic Pro X 10 .7】新機能『空間オーディオ』や追加された機能を紹介!2021.12.10
-
Logic ProX【Logic Pro X】オーディオ波形編集のやり方!2021.11.18
-
Logic ProX【Logic Remoteの使い方】iPadでLogic Pro Xをリモートコントロールせよ!2021.10.27
-
Logic ProX【Logic Pro X】ステップシーケンサーの基本的な使い方を紹介!2021.10.20
- もっと見る
-
ガジェット【レビュー】Mac&iPadがユニバーサルコントロールで最強のタッグに!?使い方や操作性は?2022.03.23
-
ガジェットミー文字を使って動画撮影する方法を紹介しちゃいます!2022.03.03
-
ガジェット【 2022年モデル】iPad Pro最新リーク情報!発売日や価格は!?2022.02.21
-
ガジェットPS5が確実に手に入る!?NURO光の新オプション『PS5月額オプション』を紹介!2022.02.02
-
ガジェット【Mac OS Montereyレビュー】新機能の使い方や今後追加される期待の新機能を紹介!2021.11.02
-
ガジェット挿し込むだけでiPhone/iPadでテレビが視聴できる!?【XIT -STK210】2021.10.03
-
ガジェット【iOS15】便利すぎる新機能や使い方を紹介しちゃいます!2021.09.26
-
ガジェット【iPhone13 Pro Max】保護フィルム・ケース・カメラフィルムを選ぶの悩むよね〜?2021.09.17
- もっと見る