どうも！初めましての方は初めまして、初心者のWebサイト勉強のとみーです！
WordPress で記事を作成していると、読者にとって
どれか１つしか当てはまらない情報
を扱うことってしばしばありますよね。
例えばパソコンの設定に関する記事を作っているときに、Windows と Mac では操作が異なるので
といった形でまとめることがあると思いますが、普通の人は Windows か Mac のどちらか１つです。
本来であれば、Windowsの人にはMacの情報、Macの人にはWindowsの情報は不要です。
特に画面サイズが小さいスマホでは、読みやすさに大きな影響があります。
そこで、必要な情報だけを見てもらうようにするために使われるのがタブです。
Windows ユーザー向けの説明がここにきます。
Mac ユーザー向けの説明がここにきます。
読者１人１人が自分に必要な情報に集中できるようになります。
App Store や Play Store、YouTube といったアプリにもよく使われているので、多くの人にとって馴染みのある UI と言えます。
当然 WordPress で記事を作るときもタブは使い勝手がいいのですが、
というのが現状で、敷居は決して低いものではありません。
文章だけであればショートコードや自作の HTML でも簡単にできますが、吹き出しや付箋などテーマ独自のブロックを活用するとなると、使えるプラグインはほとんどありません。
そこで、せっかくなら無料テーマでも使える使い勝手の良いタブブロックを自分で作ってしまおうということで…
「Useful Tab Block－レスポンシブ＆AMP対応」というブロック追加プラグインを作っちゃいました！
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色の中から選ぶことができます。
以上が WordPress の公式プラグインとしてリリースしている「Useful Tab Block－レスポンシブ＆AMP対応」の機能です。
加えて、有料版「Useful Tab Block プレミアム－レスポンシブ＆AMP対応」ではさらなる機能が利用できます。
有料版はアイコンの挿入やタブの並び替えなどの追加機能を搭載
有料版「Useful Tab Block プレミアム－レスポンシブ＆AMP対応」では、さらに４つの機能が追加されます。
デフォルトでも30色用意していますが、よりカスタマイズできるように自分で色を選べるようになっています！
アイコンはおしゃれな雰囲気作りにぴったりです。
我は圧倒的ネコ派である！
なんだかんだイヌが一番いいよね。
いやいや、ブタの可愛さを舐めちゃいけないよ。
インストールはこちらから
「Useful Tab Block－レスポンシブ & AMP対応」は、以下でダウンロード・インストールできます。
ぜひ使ってみてください！
コメント