Image may be NSFW.
Clik here to view.
サイドバーにウィジェットを登録し過ぎると、本文よりサイドバーの方が長くなりカッコが悪いですよね？
のタブ化するプラグインを紹介してるサイトは数あれど、紹介してるのに実装してるサイトが1つも無い！？
実際の動作を確認してからインストールしたかったけど、仕方ないから色々と比較して「Widgets In Tabs」に決めました。
⇒ここのサイドバーのタブ化されたボタンを押して動作確認してみて下さい。
スマホからもタブが問題なく動作してると思います。
汎用性と見た目ならWidgets In Tabsで決まり！
数あるタブ化するプラグインには、すでに決まったウィジェットしか登録できないものや見た目が残念なもの。古くて互換性が怪しいものなどが殆どでした。
例えば、「最新記事」「人気の投稿」「カテゴリー」などは常に表示したほうがいいのに、それらをタブ化して期間で表示したところでタブをいちいち切替えてくれる訪問者がいるとは思えません。
troubleだから、紹介しても設置してる人がいないんだと思います。
Widgets In Tabsなら好きなものをタブに登録できるため
このブログのように、
1番目の開いたタブには常に表示させたい「人気の投稿」を。
2番目と3番目の切り替えで開くタブには、重要ではない別に開いてくれなくてもいいけど設置して検索エンジンに回って欲しいものを登録しています。
とはいえ、Widgets In Tabsもデフォルトでは見た目が残念なためCSSで調整します。
デフォルトはこんな感じです。
Image may be NSFW.
Clik here to view.
Widgets In Tabs のインストール
プラグイン⇒新規追加からWidgets In Tabsを検索
Image may be NSFW.
Clik here to view.
インストールして有効化します。
外観⇒ウィジェットを開きます。
Widgets In Tabs のウィジェットができました。
Image may be NSFW.
Clik here to view.
↑この右側のWidgets In Tabsへ左側の利用できるウィジェットからタブ化したいウィジェットを選択してドラッグで中へ入れます。
こんな感じに
私は「人気の投稿」「コメント」「タグ」を入れました。
Image may be NSFW.
Clik here to view.
登録しただけでは、まだブログでは表示されてません。
次に配置する場所を設定します。
利用できるウィジェットからWidgets In Tabsをサイドバーウィジェットへドラッグ。
Image may be NSFW.
Clik here to view.
Widgets-In-Tabsの▼をクリックして設定画面を開きます。
タブを開くとき、閉じるときのエフェクトを選択できます。
種類はとても多いのでお好みでどうぞ。
私の設定はこちら
Image may be NSFW.
Clik here to view.
Widgets-In-Tabs のボタンを整形する。
お使いのテーマや、ご自身のカスタマイズによってサイドバーのタイトルにはHタグのスタイルが適用されていると思います。
私の使用してる「Simplicity」のテーマだとサイドバーのタイトルはｈ4タグ。
それに独自でCSSで黒帯と赤のシャドウを入れてるため
Widgets-In-Tabsのデフォルトの見た目は↓こんな感じです。
Image may be NSFW.
Clik here to view.
これではあまりにも弱すぎるためボタンを整形し、3つのタブをバランスよく配置するCSSを追加します。
/* widgets_in_tabs---------------------------------------------- */
.widget_widgets_in_tabs ul {
display: table;
margin-left: -14px;
padding-left: 0;
margin-top: 3px;
}
h4.widgettitle.wit-title.ps-container a {
color: white;
font-size: 16px;
padding: 4px 5px;
text-align: center;
border: 1px solid;
width: 83px;
display: table-cell;
}
h4.widgettitle.wit-title.ps-container {
display: inline-block;
padding: 5px !important;
}
h4.widgettitle.wit-title.ps-container a:hover {
background-color: rgb(255, 157, 0);
}
.ps-container .ps-scrollbar-x {
display: none;
}
a.wit-tab-title.wit-selected {
background: rgb(255, 157, 0);
}
↑は私の場合の設定です。
幅が300pxのサイドバーで同じように3つのタブと同じ文字数なら
9行目のフォントカラー
21・27行目でタブのバックグラウンド色を好みに変更するだけで大丈夫ですが、タイトルの文字数が変われば8行目からのタブ・コンテナーの微調整が必要です。
以上！お疲れ様でした。(^^)/
おすすめ
