よくある質問2 [フォレストページ＋] 夢小説対応・簡単オシャレな創作サイト作成サービス

よくある質問2

CSS拡張版の解説文を非表示にできない

2024/07/02
Q.

いつも素敵なテンプレートお世話になっております。
ラテさんの作ってくださったテンプレートでフオレストページ+ですごく簡単にしかもおしゃれに個人サイトを作ることができて本当に助かっています！
テンプレートの質問になってしまうのですが、
当方
Android13
Chrome 114
で
CSSベースver.2.4
ラテ式CSS拡張版を使用しているのですが、古いバージョンには該当しないのに章の一覧ページに解説文が表示されてしまいます。 PCやiPadでも確認をしたのですが、解説文は表示されており、過去の対応で載せていただいた
見出しテキスト
にて対応している状況です。もし他に良い対応法があればご教示いただけますと幸いです。蒸し暑い日が続きますかどうかお身体にお気をつけて、健やかにお過ごしください。

回答を見る

こんにちは。非表示にできない件ですが、いただいたマシュマロ本文中の

古いバージョンには該当しないのに章の一覧ページに解説文が表示されてしまいます。

この箇所の「章の一覧ページ」とは、当サイト内のサンプルでいうと、
第二章
↑このページで合っていますか？

ちなみに↑このリンク先は「章」の中にある「ページ一覧」と呼んでいます。独自タグは、今回の場合 [#book=4:c=2#]です。階層でいうと、

Ryoryuka [#mypage#]（マイページ。いわゆるサイトトップ）
↓
Bookshelf[#bookshelf#]（本棚）
↓
百花のマジシャン/CSS拡張版[#book=4#]（CSS拡張版デモ「小説の表紙」）
↓
第二章 [#book=4:c=2#]（章の「ページ一覧」）

この拡張版サンプルの場合、
「第二章 [#book=4:c=2#]」の「章の基本設定＞章の解説」にて、
Extra 番外編
を登録。そうすることで、
小説の表紙（百花のマジシャン/CSS拡張版[#book=4#]）で見出し「Extra 番外編」を実現。
そして第二章 [#book=4:c=2#]のページ上部（すきボタン/ブックマークボタンの真上）に表示されるはずの解説文を、CSS拡張版で非表示にしています。

ここまでは理解できましたでしょうか？
まずはお手持ちのiPadで、第二章 [#book=4:c=2#]を閲覧してみてください。
このページ内に「Extra 番外編」という文字は表示されていますか？
私の環境(iOS 17.5.1)では「Extra 番外編」という文字は消えています。

もしiPadで「Extra 番外編」という文字が消えている場合、こちらのCSSは問題なさそうです。
ご自身のサイトにコピペした「CSSベース」と「CSS拡張版」が正しいか確認してみてください。

よくあるのは「配布CSSコードを全選択できず、CSSが途切れた状態でコピーしてしまった」や、
「CSS拡張版をコピペしたエリア（マイテーマHEAD）に独自のカスタマイズを追記したことで、CSSが変更されてしまった」などです。
（これらは本当によくあるミスで、私も過去に何度もやらかしています。なのでミス自体は気にしないでください）

もしiPadで第二章 [#book=4:c=2#]を閲覧して、ページ内に「Extra 番外編」という文字は表示される場合、お手数ですが、iPadのOSバージョン（ex. iOS17.2.1）をお知らせください。

iPadで第二章 [#book=4:c=2#]の「Extra 番外編」は非表示になっている、そして、
ご自身のサイトでいろいろ確認したあと、「章のページ一覧」の解説文が非表示にできない場合、
差し支えなければ、サイトURLを教えてください。
私が直接サイトの状態を見にいけば、解決のヒントが探れるかもしれません。
（その際、マシュマロにもらったURLはもちろん公開しません）

↓
さらにメッセージをやり取りして原因が判明しましたので回答を追記します。教えていただいたURLの中身に関することは一切ふれていません。

回答を見る2024/07/05追記

原因を把握できました。検索避けONだと「章の解説」は「章のページ一覧」で非表示にできない、という不具合でした。

詳しい説明(読み飛ばして構いません)

「章の解説を非表示」は以下のようにCSSを組んでいます。

OGPメタタグから「現在開いているURL」を取得
「現在開いているURL」が「章のページ一覧」であるか判定
「章のページ一覧」である場合、解説文を非表示

OGPとは、SNS等へのシェアで用いる規格です。つまり「検索避けON」ではOGPは不要です。
なのでフォレストページ＋では「検索避けON」にすると、OGPメタタグ（3〜5行）が出力されません。

「現在開いているページが『章のページ一覧』なのか」をCSSで判定することは非常に困難（おそらく不可能）になっています。
通常ならばJavaScriptでサクッと「現在のURL」を取得可能ですが、フォレストページ＋はJavaScriptを書いても無効になります。（※セキュリティ的にはとーっても良い制限）
CSSで実現可能な範囲で「現在のURL」を取得できないか模索した結果が「OGPメタタグ参照」でした。

今回の件をお知らせしてくださりありがとうございます。正確に原因を把握できました。
対処法は拡張版ページに追記しました。

→ ラテ式CSS拡張版

配布中のCSS拡張版に変更はありません。
検索避けONの場合「現在開いているURLの取得」は非常に困難でして…少なくとも私の技術力ではお手上げでした。
申し訳ないですが「指定のHTMLタグで見出しを囲う」で対処をお願いします。

ここからが本題になりますが、

<span class="la-hidden">見出しテキスト</span>

↑このHTMLタグをもう一度お試しできますでしょうか。

教えていただいたURLをPCブラウザで確認し、開発ツールで〜を追記し、HTML編集してみたところ、「章のページ一覧」の解説文は非表示になりました。
そちらのサイトでも〜は有効のようです。

もう一度〜を試してみて、それでも「章のページ一覧の解説」が非表示にできない場合は、お手数ですが、該当URLをお知らせください。
PCブラウザで検証してみます。

よくある質問2

Menu

CSS拡張版の解説文を非表示にできない

読者登録