今日は、クリックでコンテンツが展開するスライドBOXの作り方を解説していきます。
このスライドBOXは、非常に便利な反面、1つだけデメリットがあります。ただ上手に活用すれば重宝するものなので、うまく使い分けていきましょう。
こんにちは。WordPressテーマ研究家SHINです。
まず表示・非表示をクリックで切り替えることができるスライドBOXを紹介します。下にあるBOXをクリックしてみて下さい。
このスライドBOXを活用することで、メリットがあります。
スライドBOX4つのメリット
非表示でページを読み込む為、画像コンテンツの場合は表示速度が速くなる。
スライドBOX内のコンテンツ量には制限がないので、大幅なスペース削減になる。
コンテンツがシンプルになる為、記事構成の整理整頓ができる。
プラグイン「AddQuicktags」でタグ化しておくことで、一瞬で作成できる。
スライドBOXを活用しているサイトは少ない為、デザイン性で一目置かれることも。
僕が活用している中で、主にこのようなメリットがあります。
またプラグインを使うこともなく、重くなる心配もありませんのでぜひ活用してみてください。
HTMLコードでスライドBOXを作成する方法
スライドBOXは、HTMLコードで作成していきます。
WordPress投稿画面より「テキスト」モードに切り替えて、下記コードをコピペで貼り付け、赤字テキスト部分へコンテンツを挿入していきます。
スライドBOX HTMLコード【基本】
<div class="hidden_box"> <label for="label1">クリックして表示</label>
<input type="checkbox" id="label1"/> <div class="hidden_show">
ココへコンテンツ（画像やテキストなど）を挿入する
</div>
またスライドBOXを、1つの記事に2つ以上使いたい場合は「label○」の○にある数字を、設置するBOX数に比例した数字に変更する必要があります。
スライドBOX 2つ目を作成する場合
<div class="hidden_box"> <label for="label2">クリックして表示</label>
<input type="checkbox" id="label2"/> <div class="hidden_show">
ココへコンテンツ（画像やテキストなど）を挿入する
</div>
容量の多い画像やファイルを隠しておけば表示速度を大幅に改善できますし、一方でごちゃごちゃした記事をスライドBOXで整理すれば、構成もきれいになります♪
と、ここまで良いこと尽くし。
ここで1つだけ「デメリット」があるので、この要素も踏まえて活用することをおすすめします。
スライドBOXで非表示にされたコンテンツはSEOに不利？
検索エンジンのクローラーは、トップページも投稿記事もリンクをたどりながらサイトを巡回していきますね。
ですが、このスライドBOXに隠されたコンテンツは「見てくれない」という致命的な欠点があるわけです。つまり、評価対象とされないコンテンツになってしまう可能性があります。
2014.SEOフォーラムでのジョン・ミュラー氏による見解
「クリックで開く」の中に隠れているコンテンツをグーグルは無視するようになっているのではないか。
そういう質問に対して、グーグルのジョン・ミューラーさんが、ウェブマスターハングアウトで次のように答えました。
そうしたことは前からやっていて、検索された目的のコンテンツが実際にはページ内で隠れている場合、少し評価を下げるようにしていた。
たとえば「クリックで開く」やタブのような、実際にページ内にはそのコンテンツがあったとしても、ユーザーがすぐには見つけられない状態になっている場合で、そのページのなかで重要ではないキーワードの場合だ。
グーグルとしては、そのページに情報があるとして検索結果でもスニペットを表示していても、そのページへ行った検索ユーザーが目的の情報を見つけられないとしたら、「グーグルは間違ったページを検索結果に表示していた」と思ってしまうだろう。
そうしたことから、評価を下げるということはかなり前からしていたんだが、さらにそれを進めて、検索ユーザーがページに行ったときにパッと見えないコンテンツを積極的に無視するようにしているということだと思う。
だから、コンテンツがちゃんとインデックスされるようにするためには、ページを表示したときに、ちゃんと見える状態にしておくことだ。
2014年での見解ではありますけど、現在でも十分考慮する必要性はあると考えます。尚、評価対象としないのを前提として、評価を少し下げるとまで言われています。
ちょっと話がズレますけど、同じようにタブで表示・非表示にするタイプの「目次」を良く目にしますよね。
"アレ" も、クローラーはタブを「開かない」ので、テキストリンクは見てくれない＝評価対象外となるため、目次は常時開いた状態にしておきましょうというのが定説です。
このため、スライドBOXを開いたままの状態で表示しておくことも可能です・・が、それではBOXの意味がありませんよね；
そこで結論！
スライドBOXを使うケース
表示速度が著しく落ちる画像やファイルを添付する場合。
長文記事により、整理整頓したい場合。
僕の意見としては、この2つのケースのみに活用したら良いかなと思っています。
ですので、「斬新！」「カッコイイ！」「便利！」だけの理由で多用するのは危険です；良質な記事の評価を落としかねませんので、十分注意して使っていきましょう。
まとめ
今回はタブで表示・非表示にできる便利なスライドBOXをご紹介しました。
便利な反面、タブ内のコンテンツがSEO評価対象となることを考慮して活用していきましょう。
