ココログでスマートフォン対応アコーディオン式メニュー但し反則技
カテゴリ別書評一覧の新装開店の詳細その３。
【謝辞】
いっぽんしめじ様のにわはんみょうをまぜまのココログの「スマートフォン表示」に無理矢理スタイルを設定してみたにお世話になりました。
【はじめに】
カテゴリ別書評一覧は、やたら記事が長い。下の方を見るには、画面の大きなパソコンでもスクロールが面倒臭い。画面の狭いスマートフォンじゃ、やってられないだろう。
紆余曲折の末、アコーディオン式メニューを使うことにした。ただし、反則技を使っている。
【アコーディオン式メニューとは】
こんな感じのシロモノ。下の【見出し１】や【見出し２】をクリックすると、「本文１」や「本文２」が、見えたり消えたりする。
【手口】
スタイルタグ(<style type="text/css">～</style>)を使う。上のサンプルは、以下の HTML で実現している。できれば、この記事の HTML を見て確認して欲しい。Firefox なら、CTRL+U で HTML を表示します。
<style type="text/css">
/* 見出しの体裁 */
.c_menu label {
display: block;
margin: 0.2em 0 0px 0;
padding : 0.2em;
line-height: 1em;
cursor :pointer;
background :#f0f0a0;
font-weight: bold;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
}
/* チェックボックスを隠す */
.c_menu input {
display: none;
}
/* 本文 最初は隠す */
.c_menu .menuBody {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
}
/* 本文 チェックボックスがonなら表示 */
.c_accordion:checked + .menuBody {
height: auto;
padding: 2px;
opacity: 1;
}
</style>
<div class="c_menu">
<label for="c_title1">【見出し１】</label>
<input type="checkbox" id="c_title1" class="c_accordion" />
<div class="menuBody"><p>本文１</p></div>
<label for="c_title2">【見出し２】</label>
<input type="checkbox" id="c_title2" class="c_accordion" />
<div class="menuBody"><p>本文２</p></div>
</div>
【解説】
スタイルシートと HTML を組み合わせ、こんな感じに指定した。
- 見出しは、チェックボックスにする。
ただしチェックボックスの□は隠す。 - 本文は、最初は高さをゼロにして隠しておく。
- チェックボックスがチェックされたら、本文を見せる。
スタイルシートは、普通 ～.css で指定する。ココログだと、カスタムCSSを使う。
が、しかし。
ココログのカスタムCSSは、パソコンで見た時だけ有効になる。スマートフォン用のスタイルシートは、有料プランだけが使える。無料のプランでは使えない。
幸い、無料のプランでも、HTML の編集はできる。そして、HTML内でもスタイルシートは書ける。<style>～</style>で囲って書けばいい。
そこで、ココログの記事編集画面の「HTMLの編集」を使い、記事内にスタイルシートを埋め込んだ。
【でも反則技です】
ただし、これは反則技だ。
HTML の規格だと、<style>～</style>を使っていいのは、<head>～</head>の中だけだ。<body>～</body>では、使えない。が、上の方法だと、<body>～</body> の中に書くことになる。
規格に沿っていないので、ブラウザによっては巧く動かない可能性がある。また、スマートフォンでも、機種によってはダメかもしれない。
また、他にもマズい点がある。
この方法だと、記事の中にスタイルシートを埋め込む。他の記事でも同じ手口でアコーディオン式メニューを使った場合、困った事がおこるかも。
というのも。「カテゴリー」や「バックナンバー」を見た時だ。
例えば、このサンプルだと、スタイルのクラス c_menu や c_accordion を使っている。他の記事でも同じ名前を使っていた場合、名前がカブって思わぬ事態になるだろう。
【反則技の報い】
だけじゃない。実は、記事を編集する時点で、既に問題が起きていた。
というのも、ココログの記事編集画面で、文字を入力できないのだ。「HTMLの編集」はできるんだが、そうでない「記事の編集」画面では、文字が入らない。
どうも <style>～</style> があると、「記事の編集」は巧く動かないらしい。
仕方がないので、<style>～</style> 以外の部分を予め完成させ、最後に「HTMLの編集」で <style>～</style> を書き加えた。
【メモ】
最初は記事の先頭に目次をつけて、頁内リンクを張っていた(→ウェブページ版カテゴリ別書評一覧、パソコンからだけ見える)。が、これだと、二つ問題がある。
まず、スマートフォンからは見れない。ココログの仕様で、ウェブページが見れるのはパソコンだけで、スマートフォンじゃ見れないのだ。
そこでウェブページからブログの記事に移す。
が、ここでも二つ目の問題が起きた。スマートフォンだと、頁内リンクが効かない。常に頁の先頭に飛ぶ。これじゃ目次の意味ないじゃん。
どうやら複数の原因が絡んでいるようだ。スマートフォンだと、ココログは別の頁にリダイレクトする。この際に、頁内リンクの情報が失せるらしい。また、機種によっては、ブラウザの仕様で、頁内リンクの有効個数に制限があるみたい。
加えて、HTMLの書き方にも制限があるっぽい。<a name=～>じゃダメで、id を使えとか。この辺は面倒なんで、途中で調べるのは諦めた。
ってんで、アコーディオン式メニューに切り替える。JavaScript を使う手もあるが、なんとなく嫌なので、HTML+CSS で実現可能な方法を探す。
が、ここでも、ココログの制限に泣かされた。つまりココログだとスマートフォンではカスタムCSSが効かないのだ。
でもまだ手はある。何も .css を使う必要はない。HTML中の style="～" でも体裁は指定できる。やったね。
と思ったら。スタイルシートの終盤、c_accordion:checked + .menuBody の所でひっかかった。HTML 中だと、決まった体裁は指定できる。が、:checked などの疑似クラスは使えないのだった。がっくし。
という事で、再びスタイルシートに戻る。解決案を示唆してくれた、いっぽんしめじ様には深く感謝する次第。
やあ、これで万事解決、じゃ記事にしようか…と思ったら、ここでも文字が入力できなくて泣く。仕方がないので、とりあえず文字だけ入力しといて、最後の仕上げにスタイル指定を入れる事にする。
と、そんな風に、一見スタイリッシュなシロモノも、それを支える裏方さんは様々な苦労をしいているんです←いやオマエがダメなだけだろ
【関連記事】
- 2018.2.4 カテゴリ別書評一覧の新装開店
- 2018.2.5 ココログ(Typepad)のバックアップを複数のファイルに分けるVBScript
- 2018.2.7 ココログの記事一覧で大量の記事を一度に選ぶ
- 2018.2.8 ココログでスマートフォン対応アコーディオン式メニュー但し反則技
- 2018.2.12 ココログのカテゴリーのアーカイブから記事一覧を作るVBScript
| 固定リンク
「パソコン・インターネット」カテゴリの記事
- サミュエル・ウーリー「操作される現実 VR・合成音声・ディープフェイクが生む虚構のプロパガンダ」白揚社 小林啓倫訳(2021.07.11)
- ココログ：記事編集で余分な改行が入る→初期設定を通常エディタにする(2019.10.10)
- Q.Ethan McCallum「バッドデータ ハンドブック データにまつわる問題への19の処方箋」オライリージャパン 磯蘭水監訳 笹井崇司訳(2019.06.07)
- ココログ：リンク切れ一覧と旧URL一覧と公開記事URL一覧を突き合わせるOpenOfficeCalc(2018.11.18)
- ココログ：古い「カテゴリ別書評一覧」から各記事の旧URL 一覧を作るVBScript(2018.11.15)
コメント