スポンサーサイト

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2 ブログに CSS で折畳みウィジェットを実現する方法

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有

需要があるか否かは分かり兼ねますが、CSS を用いて FC2 ブログの文章内に折畳み可能なウィジェットを仕掛ける方法です。

折畳みウィジェットは多くの場合 JAVA スクリプトで実現しますが、今日では CSS だけでもある程度のものが実現出来ます。


対応環境

CSS に依る折畳みウィジェットは、以下の環境で実現出来ます:

デスクトップ
IE 8.0 以前を除く現行のウェブブラウザ
  • IE 8.0 が現役とは思えませんが、一応こう書いておきます。
スマートフォン
アンドロイド・iOS とも全ヴァージョン対応

尚、非対応環境となる

  • IE 8.0 以前
  • フィーチャフォン

では折畳みとならず、常に開きっ放しとなります。

  • 開けない(=中が見られない)事は多くの場合弊害となりますが、隠れないのは多くの場合弊害にはならない筈です。

方法


CSS の設定

お使いの PC 向けテンプレート及びスマートフォン向けテンプレートのスタイルシートに、以下のコードを適宜カスタマイズして挿入します:

input.switch {
    display: none;
    }

/* ウィジェットが開かれている状態 */
input.switch:checked+label+* {
    display: block;
    }

/* ウィジェットが閉じられている状態 */
input.switch:not(:checked)+label+* {
    display: none;
    }

/* クリック/タップされる部分のスタイル(開) */
input.switch:checked+label {
    /* お好きなスタイルを指定してください */
    }

input.switch:checked+label::before {
    /* この場合、下向き三角が左に表示されます */
    display: inline;
    font-family: monospace;
    content: "\25BE";
    }

/* クリック/タップされる部分のスタイル(閉) */
input.switch:not(:checked)+label {
    /* お好きなスタイルを指定してください */
    }

input.switch:not(:checked)+label::before {
    /* この場合、右向き三角が左に表示されます */
    display: inline;
    font-family: monospace;
    content: "\25B6";
    }

ここでは、ウィジェットを実現するための要素に対し、一律に switch と言うクラス名を与えております。

必要であれば、任意のクラス名に変更しても構いません。


HTML でのマークアップ

投稿する記事或いはテンプレート内でウィジェットを置きたい箇所について、以下のようにマークアップします。

<input type="checkbox" class="switch" id="●●●" />
<label class="switch" for="●●●">【クリック/タップさせたいテキスト】</label>
<div>
    【折畳みたいテキスト】
    </div>

●●● には、同じ半角英数字列を入れます。

但し、以下の条件を満たしてください:

  • 同じ HTML 文書の id 属性に使われていない文字列である必要があります。
  • 複数のウィジェットを設置する場合は、●●● がそれぞれ異なっている必要があります。

尚、この HTML は FC2 ブログのテンプレートで使われている HTML5 及び XHTML 1.0 トランジッショナル のいずれでも合法となります。


サンプル

フィーチャフォン及び IE 8.0 以前だと開かれっ放しになります。

  • あいうえお
  • かきくけこ
  • さしすせそ

解説


フィーチャフォンへの影響

FC2 ブログの場合、フィーチャフォンでは一部を除く要素のタグは取払われます。

結果、ウィジェットを実現する<input>要素も消されるため、フィーチャフォンで見た場合には開きっ放しになるだけで特に問題は起こらない筈です。

但し、クリックなどと言うテキストを入れてしまうと、フィーチャフォン等ではクリック出来ないため閲覧者を混乱させてしまう恐れがあります。

このため、ウィジェットでクリック/タップ出来る箇所についてはそのような表示は控えた方が良いでしょう。


他の技術との比較


JAVA スクリプト

JAVA スクリプトを活用すれば、かなり柔軟に対応させる事が出来ます。

CSS と違って、IE 8.0 でも対応させる事が出来ます。

でも、スクリプトをオフにされた場合には全く機能しなくなります。

また、スクリプトはプログラム言語なので、プログラミング出来ないと実現出来ません。

特定のクラス名などで自動的に折畳むようにする事も可能ですが、結構面倒なものです。


<details>要素

HTML 5.1 で追加された<details>要素を使うと、対応環境で折畳みウィジェットが使えます。

ただ、平成29年 9月 2日現在 IE/マイクロソフト・エッジでは非対応となっております。

IE/エッジの利用者は昨今では少なくなりつつありますが、やはり現行環境で非対応と言うのはちょっと躊躇(ためら)わされます。


応用


初めから開いた状態にしたい場合

初めから開いた状態にして、閲覧者が適宜閉じられるようにしたい場合は、<input>要素を以下のようにします:

<input type="checkbox" class="switch" checked="cheched" />

つまり、<input>要素に checked="cheched" 属性を与えておく事で、初めから選択済みになります。


どれか一つだけを開くようにしたい場合

複数の項目の中から常に一つだけを開かせたい場合、すなわち、複数の項目のうちどれかを選択すると自動的にそれまで開かれていたものが閉じられるようにしたい場合、対象となるウィジェットの<input>要素に対し、以下のようにします:

<input type="radio" class="switch" name="▲▲▲" />

ここで、▲▲▲ には一つだけ開かせたいウィジェットに共通に与える文字列となります。

name 属性値が ▲▲▲ となっているものの中から一つだけが開かれる事となります。


免責事項

ここで紹介した方法について、実践された結果に関しては一切責任を負い兼ねます

関連記事
スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。