どうも！初めましての方は初めまして、初心者のWebサイト勉強のとみーです！
WordPress で記事を作成していると、読者にとって
どれか１つしか当てはまらない情報
を扱うことってしばしばありますよね。
例えばパソコンの設定に関する記事を作っているときに、Windows と Mac では操作が異なるので
といった形でまとめることがあると思いますが、普通の人は Windows か Mac のどちらか１つです。
本来であれば、Windowsの人にはMacの情報、Macの人にはWindowsの情報は不要です。
特に画面サイズが小さいスマホでは、読みやすさに大きな影響があります。
そこで、必要な情報だけを見てもらうようにするために使われるのがタブです。
Windows ユーザー向けの説明がここにきます。
Mac ユーザー向けの説明がここにきます。
読者１人１人が自分に必要な情報に集中できるようになります。
App Store や Play Store、YouTube といったアプリにもよく使われているので、多くの人にとって馴染みのある UI と言えます。
当然 WordPress で記事を作るときもタブは使い勝手がいいのですが、
というのが現状で、敷居は決して低いものではありません。
文章だけであればショートコードや自作の HTML でも簡単にできますが、吹き出しや付箋などテーマ独自のブロックを活用するとなると、使えるプラグインはほとんどありません。
そこで、せっかくなら無料テーマでも使える使い勝手の良いタブブロックを自分で作ってしまおうということで…
「Useful Tab Block－レスポンシブ＆AMP対応」というブロック追加プラグインを作っちゃいました！
Useful Tab Block プレミアム－レスポンシブ＆AMP対応 の v1.2.0 がリリースされました！
新機能として、「タブを横並びにしたスクロール機能」を追加しました。
スマホなど画面の小さいデバイスにぴったり。
ラベルの大きさはタイトルの大きさにフィットします。
アイコンも通常通り入れられます。
ラベルが長くても大丈夫です。
WordPressのタブプラグイン－Useful Tab Block－レスポンシブ＆AMP対応
「Useful Tab Block－レスポンシブ＆AMP対応」は、ブロックエディターにタブブロックを追加するプラグインです。
主な機能は以下の通りです。
タブ数は最大10個まで増やせます！
タブはレスポンシブだから小さな画面でも大丈夫！
「Useful Tab Block－レスポンシブ＆AMP対応」は、レスポンシブです。
レスポンシブというのは、画面の大きさに合わせてデザイン・レイアウトを適切に切り替える仕組みです。
例えば画面の大きいパソコンではタブを５つ横並びにできるとしても、スマホの画面で同じことをやると窮屈すぎて見にくくなります。
このプラグインでは
といった具合に自動で配置を切り替えるため、常に見やすい形を維持することができます。
Google推奨のAMP対応で高速化もバッチリ！
AMP というのは、モバイル端末（スマホ）での Web サイト閲覧を高速化するための仕組みです。
AMPは使用する技術を制限することによって高速化を実現するので、特別な対策が必要です。
AMP対応テーマの場合、プラグイン選びを間違えるとAMPに対応しなくなってしまうため、SEO 的にもマイナスになってしまいます。
「Useful Tab Block－レスポンシブ＆AMP対応」は、AMP に対応するために JavaScript を使わないで作ってあります。
JavaScript を使わない分読み込み速度も早いです！
タブの形は長方形と角丸の２種類をサポート
タブの形は現時点で
の２種類をサポートしています。
長方形ラベルの例です（１）。
テーマ独自のブロックはもちろん自由に挿入できます。（これはCocoonの吹き出しブロック）
長方形ラベルの例です（2）。
こんな付箋ブロックも入っちゃいます。
角丸ラベルの例です（1）。
角丸ラベルの例です（2）。
もちろんブロックは好きな数挿入できます。
タブの背景色・テキスト色を選択時・非選択時の両方で設定可能
「Useful Tab Block－レスポンシブ＆AMP対応」では
を個別に設定できます。
吾輩は猫である
名前はなんだっけな
泣かぬなら
鳴くまで待とう
ほととぎす
影や枠線は見やすいように後で付け加えています。
色は30色の中から選ぶことができます。
タブの枠線は実線・点線・波線の３種を用意
ご要望に応じて、v1.1.0 にてタブの枠線を表示する機能を追加しました！
タブのコンテンツ部分に
の３種類の枠線を設定することができるようになりました。
実線の枠線
枠線が実線の場合です（１）。
枠線が実線の場合です（２）。
点線の枠線
枠線が点線の場合です（１）。
枠線が点線の場合です（２）。
こんな感じに枠線に色を付けることもできます。
波線の枠線
枠線が波線の場合です（１）。
枠線が波線の場合です（２）。
枠線の太さを変えることもできる
枠線の太さもカスタマイズすることができます。
枠線の最小の太さは0.5ピクセルです。
枠線の最大の太さは3.5ピクセルです。
ラベルとコンテンツ間の余白
ラベルとコンテンツの間に少し余白がほしい。。。
という場合も、ワンクリックで余白を作れます。
ラベルとの間に余白が設けられました。
頻繁に改行する方などは、余白がある方が窮屈に感じないのでおすすめです。
以上が WordPress の公式プラグインとしてリリースしている「Useful Tab Block－レスポンシブ＆AMP対応」の機能です。
加えて、有料版「Useful Tab Block プレミアム－レスポンシブ＆AMP対応」ではさらなる機能が利用できます。
有料版はアイコンの挿入やタブの並び替えなどの追加機能を搭載
有料版「Useful Tab Block プレミアム－レスポンシブ＆AMP対応」では、さらに６つの機能が追加されます。
デフォルトでも30色用意していますが、よりカスタマイズできるように自分で色を選べるようになっています！
ラベルのアイコン
アイコンはおしゃれな雰囲気作りにぴったりです。
我は圧倒的ネコ派である！
なんだかんだイヌが一番いいよね。
いやいや、ブタの可愛さを舐めちゃいけないよ。
影付き枠線
立体的なデザインがお好きな方に。
枠線が影付きの場合です（１）。
枠線が影付きの場合です（２）。
スクロール可能なラベル
ラベルの大きさはタイトルの大きさにフィットします。
角丸ラベルにも対応しています。
長すぎるのは避けたいですが、ちゃんとスクロールできます。
もっと長くなっても大丈夫！
ラベルが長くても大丈夫。
もちろんアイコンも使えます。
スマホなど画面の小さいデバイスに合います。
インストールはこちらから
「Useful Tab Block－レスポンシブ & AMP対応」は、以下でダウンロード・インストールできます。
ぜひ使ってみてください！
コメント
とみーさん、はじめまして。
Useful Tab Blockを使わせていただいている者です。いつもありがとうございます。
質問なのですが、小さい画面（スマホ）での表示の際に、タブを折り返さずに横並びでタブだけをスライドさせることは可能でしょうか？
もし可能であれば、どのようにすればよいかも教えて頂けると幸いです。
お忙しいところ大変恐縮ですが、宜しくお願い致します。
asahiさま
はじめまして、ご連絡いただきありがとうございます。
タブを横並びにし、スライドできるようにするする機能についてですが、もともとレスポンシブにタブの配置を変える設計で作っていたため、やや難易度が高いかもしれません。技術的にはCSSの知識があれば十分に可能であるものの、少し時間をかけなければいけないように感じております。
つきましては、次のアップデート（無料版v1.3.0、有料版v1.2.0）にて搭載する方向で開発を進めますので、お待ちいただけますと幸いです。
お返事ありがとうございます。
次のアップデート、楽しみにしております！
asahiさま
長らくお待たせいたしました。
有料版v1.2.0にてラベルの横スクロール機能を実装いたしました。
よろしければぜひご検討ください。
isotypeのテーマを使用してます。
こちらのプラグインが使えません。
どうしたらいいでしょうか？
よろしくお願い致します
murataさま
はじめまして、ご連絡いただきありがとうございます。
プラグインが使えないとは、具体的にどのような問題が発生していますでしょうか。
など、詳しくお聞かせできますでしょうか。
はじめまして。
タブが使いたかったのですが難しく諦めていたところ、
こちらのプラグインを見つけました。ありがとうございます。
早速インストールしたのですが、
コンテンツ欄に入力ができません。
わたしがやり方を見逃しているのだとは思うのですが、
コンテンツ欄への入力方法を教えていただけると助かります。
よろしくお願いいたします。
pikoさま
はじめまして、ご連絡いただきありがとうございます。
私の環境で「コンテンツ欄に入力できない」という状況が再現できなかったため、参考のために詳しい実行環境をお聞きしてもよろしいでしょうか。
使用しているテーマやプラグイン利用時のデバイス（スマホ・PC・タブレット）をお伺いできたらと思います。
お手数をおかけします。
wordpress6.0.1
PHPバージョン 7.4.30
テーマはcocoon（2.4.7）
パソコン（MacBook）で作業しています。
この程度の情報で大丈夫でしょうか？
よろしくお願いいたします。
貴重な情報ありがとうございます。
WordPress6.0以降ではテストをしていなかったため、おそらくこの点が不具合を引き起こしていると考えられます。
バージョン5から6にアップデートされる過程で大きく変化があり、当プラグインに限らず多方面で不具合が起きているため、解決に時間がかかる見込みです。
どうぞ気長にお待ちいただけますと幸いです。
わかりました。
かわいくて、いつかは利用したいと思っていますので、
気長に待たせていただきます。
対応にお時間をとっていただきまして、ありがとうございました。
こちらの環境で
のもとテストしてみましたが、コンテンツに入力できない問題が再現できませんでした。
他の要因としては、プラグイン同士の干渉が考えられます。
プラグインの改良を進めるのと並行して、問題の原因をもう少し探ってみます。
コメント失礼します。枠線が表示されないのですが無料版のためでしょうか？有料版ですと表示されますでしょうか？
ご連絡いただきありがとうございます。
現在のところ枠線を表示する機能は無料版・有料版とも実装しておりませんが、必要であればこの機会に枠線の表示機能を付け加えようと思います。どのような枠線（実線・点線・本記事で使用しているような影付き、など）があれば良いか、何かご希望がございましたら伺えますでしょうか？
お忙しい中ご連絡いただきありがとうございます。https://www.yahoo.co.jp/こちらの真ん中にあるタブみたいな感じはいかがでしょうか？色々と使い勝手がいいような感じが致します。
影付きも捨てがたいですね・・・笑
Yahooのページの感じですと、タブのラベルとコンテンツの間の余白を調整する必要がありそうです。現在
の３つと、その太さ・色を変えられるような方向で開発を進めておりますので、気長にお待ちいただければと思います。また、ラベル・コンテンツ間の余白の有無もカスタマイズできるようにする予定です。
ありがとうございます！