ラテ式CSS拡張版

「ラテ式CSSベース」では補完しきれなかったCSSをマイテーマHEADに追記しています。
今のところ加筆エリアは小説機能と日記機能のみです。

デモページ


この小説グループ「ラテ式CSS拡張版」内はすべてラテ式CSS拡張版を適用しています。

第一章
タイトルよこ並び
サンジ過去編
よこ並び、その2
ルッチ過去編
たて並び
短編つめあわせ
短編をまとめて並べる


参考にした公式ヘルプ


今から書いてあることを読む前に、かならず公式ヘルプページにて、以下のキーワードを確認してきてください

(※すでにフォレストページプラスユーザーの方は知っているキーワードばかりだと思いますので確認は不要です)

では、ここからは、

[本棚 小説 章 ページ]

↑上記キーワードの関係や構造を理解している前提でお話しします。

特徴


デモページでわかるとおり、以下のような変更点を加えています。

  • 目次やページ一覧にて小説各話タイトルが横並び
  • 目次やページ一覧にて「見出し」を挿入できる
  • 名前変換フォーム内のデフォルト名を非表示に
  • 日記機能(つぶやき・ブログ)のレイアウト調整

「本棚」の小説一覧は変更ありません。「小説の表紙」や「章のページ一覧」はタイトル横並びが可能です

使い方


  1. [全体設定] >[共通HEAD]にラテ式CSSベースをコピペ
  2. マイテーマを作る
    (→マイテーマの作り方
  3. マイテーマ編集]内の[HEADを編集]にラテ式CSSプラス拡張版をコピペ
    ラテ式CSS拡張版コード
    ラテ式CSS拡張版のコピペ」でコピペしてください
  4. 本棚で小説を作成
  5. 小説に(今回作成した)マイテーマを適用する。
  6. 小説内でページを作成。数ページ作成してみる。
  7. 見出しを挿入したい直前のページを編集。「解説」欄に見出しを記入


たとえば、デモページ「第一章」の場合、

タイトル「設定」をページ編集→解説欄に
第一幕「断罪」

タイトル「03」をページ編集→解説欄に
第二幕「鈴音」

タイトル「102」ページ編集→解説欄に
タイトル長めを並べる

となります。タイトル「15」のページ編集→解説欄では、
第三幕「誓約」
2行かいてみる

と入力しています。解説欄内での改行はそのまま見出しに反映されます。

ラテ式CSS拡張版のデメリット


①見出しの位置の制限

直前のページ編集>解説欄を利用して「見出し」レイアウトしますので、
1ページ目より前には見出しを挿入できません。なので、1ページ目は「設定/あらすじ/注意事項」や「プロローグ」などで利用することを想定しています。
参考ページ→「第一章

②解説欄の利用不可

さらに、解説欄を利用した「見出し」なので、
「ページ」や「章」の解説欄は普通の解説を登録できません。

「小説」の解説欄
通常どおり解説を登録可能
「章」の解説欄
「見出し」になります
「ページ」の解説欄
「見出し」になります


古いスマホ向け対策


【2023/04/27 追記】
このエリアでは、GoogleChrome105未満/iOS15.4未満でレイアウト崩れする問題を説明していましたが、削除しました。
ラテ式CSSベースver 2以降からラテ式全体でChrome1.5以上/iOS15.4以上の対応に変わったためです。
詳しくはサイトトップページ「Ryoryuka」の「対応スマホ」項目をどうぞ

以下の対策③④は削除してもらっても大丈夫です。
引き続き古いスマホ向けに対策したい方は、解説欄にHTMLタグを残しておいてください。

③R18/R18Gマークのレイアウト
崩れの対策

見出しではなく空行を挿入できます。以下の<span>タグを、空行を挿入したい箇所の直前のページ編集→解説欄にコピペしてください

<span></span>

design


④章の解説欄を強制的に非表示
「章」の「ページ一覧」のページ上部の解説を非表示できます。以下の<span>タグで見出しを囲ってください。囲ったうえで解説欄に登録します。

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

design


かるくおさらいします

解説欄→見出しの有効範囲

「小説」の解説欄
通常どおり解説を登録可能
「章」の解説欄
「見出し」になります
「ページ」の解説欄
「見出し」になります


R18/R18Gマーク

小説
レイアウトは初期設定のままなので影響ありません
古いスマホでレイアウト崩れ(対策法あり
ページ
ページには年齢制限マークできないので影響ありません


解説欄に見出しを登録するとページ
上部エリアに見出しが表示される

小説
レイアウトは初期設定のままなので影響ありません
古いスマホでは表示されてしまう(対策法あり
ページ
ページより下の階層は存在しないため影響ありません


ここからは、いろんなケースを想定して具体的な使用例を紹介します。

作品タイトル(数字)を横並び


デモページ「サンジ過去編」のような見た目にしたい場合。
具体的な手順→「設定・あらすじ

短編をつめあわせたメニュー


デモページ「短編つめあわせ」のような見た目にしたい場合。
具体的な手順→「はじめに

たて並び


デモページ「ルッチ過去編」のような見た目にしたい場合。
具体的な手順→「設定・あらすじ

見出しの下にキャプション


デモページ「百花のマジシャン/CSS拡張版」のように、見出し直下にキャプションを付ける。
具体的な手順→「はじめに

FAQ


想定される質問に答えます。

説明が難しい

ラテ式CSSベースはコピペで完了、でした。
今回のラテ式CSS拡張版は、入力場所や入力内容にコツが必要です。

HTMLタグは必須ではありません。
タイトルを横に並べたいだけならば特別な操作は必要ありません。
「見出し」を解説欄に登録する際もHTMLタグは不要です。

このページや各デモページの手順を読んでみて、「よくわからないな」と感じたら、
とりあえずはラテ式CSSベースのままでフォレストページプラスを使ってみるのも手です。

フォレストページプラスの「本棚」や「グループ」そして「小説」「表紙」「章」「ページ」といった構造は独特です。
小説機能まわりは飲み込めるまで、慣れが必要かと思います。

基本的な使い方は公式ヘルプにまとまっています。
ぜひヘルプをのぞいてみてください。