![【WordPress/Diver】タブウィジェットを設置する方法](https://itechsearchengine.com/wp-content/uploads/2021/06/1a5666c29fba8e3881a3fa3303f146ec.png)
目的
✔ トップページにタブウィジェットを設定すること
イメージ図
設定後
トップページにタブウィジェットを設定したイメージ図はこちら!
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-1-1024x506.png)
タブウィジェットの設定方法
①『アイテックサーチエンジン(自分のブログ名)』を選択します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/3eaf708610cff30a289e653a3813a4f8-e1622381749137.png)
②『外観』から『ウィジェット』を選択します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/e86ea1d187e29e71ffc76c9a84a7b630-e1622619076864.png)
③『利用できるウィジェット』から設置したいウィジェットを『タブウィジェットエリア』へドラッグして追加します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-3-1024x544.png)
④今回は『カスタムHTML』を選択します。
※タブウィジェットエリア>ウィジェットを追加 でも追加が可能です。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-6.png)
⑤『タイトル』と『内容』を入力して『保存』を押します。
当ブログではこのHTMLを記入しています。(コピーして使ってOKです!)
「■■■」の部分は各自ブログの「カテゴリーID(※1)」を入力してください。
(※1)確認方法は別途下に記載しています。
<div style="padding: 0 .8em .6em; color: #333; font-size: 1.2em; border-bottom: 3px solid #6495ED; font-weight: bold; margin-bottom: 20px;">✔︎IT関連</div>
<div class="article_col">
</div>
<div class="button shadow block blue"><a class="midium" href="https://itechsearchengine.com/?cat=■■■">もっと見る</a></div>
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-7.png)
⑥今回は2つのタブを設定したいので、③-⑤を2回繰り返したら設定完了です。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-8.png)
カテゴリーIDの確認方法
①トップページの「カテゴリーを選択>設定したいカテゴリー」を選択します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-10-1024x503.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
はるまき
カテゴリーの作成方法はこの記事を見てね
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
はるまき
サイドバーの設定方法はこの記事を見てね
②URLから「■■■」の数字を確認できます。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-13-1024x544.png)
完成形
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-1-1024x506.png)
改めて完成系はこちら!!
タブウィジェットが表示されました!当ブログでは「IT関連/日々の暮らし」を設定しました。
皆さまもタブウィジェットを設定して、見やすくカスタマイズしてみてはいかがでしょうか!