追記あり＊夢小説サイトをナノからフォレストページ＋に移転した話。

うーぱす/れもん

ツイッターでフォレストページがバズったので急遽記事作成。（注目したいとかではなく、作りたい人けっこういるかもと思ったので。）

フォレストページというと、あの特徴的で自分の黒歴史を思い出させるデザインのサイトをイメージしがち。
かくいう私もそうでしたが、
●小説にR18設定できる（一部）
●ナノにセキュリティ面での不安を感じていた（httpsじゃないとか色々）
ので試しに作成。
幾分マシに作れたので、夢小説サイト運営中の私が作ったサイトのソースを一部晒そうと思います。

html・css系の知識が多少いるかも。
あと、思い出しながらのため、後々思い出して追記とかもするかも。

一応公式に問い合わせた上でやっている部分が殆どだが、自己責任範囲になるのでそこはご了承ください。
不明点・個人的相談などあれば、ツイッター垢（@pyoko5frogs_88か@lemon_ruri_d）にリプなり何なり頂ければ反応します。
（画像系は今回やってませんが、応用出来るかもです）

こんなイメージ

私がやってるサイトのスクショ。
「これでも十分黒歴史」とか色々言われそうですが…
これが基本形になるのでゆるして。

イメージ

登録したらまずやること

  • 基本設定
    スマホ用になったことで、デフォルトで様々なボタンやメニューなどが表示されるように。
    これが邪魔という人は

    1. 「マイページの基本設定」で「ダイレクトメッセージボタン」「スキボタン」を「表示しない」に変更

    2. 「サイト全体設定」の「デザイン設定」→「ナビゲーションメニュー」→「ナビゲーションタイプ」を「未設定」に変更

    3. 小説等各機能が勝手に表示されているのを非表示にするには、「マイページの基本設定」→「マイページリンク設定」で「リンク表示」を「OFF」に変更。

※「マイページの基本設定」と「サイト全体設定」がサイト全体の様々な設定ページになるので色々いじって試すのが○。

  • デザインテーマを選ぶ
    フォレストページ＋では、デザインテーマが色々豊富。
    気に入ったものがあればそれを使えば良いが、テーマに組み込まれた画像や形式を変更するのは基本的にできない模様。
    （私以上に知識があれば出来るのかもですが…）
    先述のイメージのようにシンプルなもの（＋画像程度）を目指すのであれば、タイトルが「シンプル」のテーマを「適用」。（色は背景色にしたいものの色が良い。イメージのは「シンプル（紺）」）
    なお、ページや機能によってデザイン変更とかもできるようだが、逐一管理が面倒なので私はやってません。

トップページの編集

いよいよトップページに着手。
「マイページの基本設定」→「その他設定」→「マイページ自由入力設定」で編集できます。
「自由入力の表示」の「テキストエリアの表示」は「ON」。
以下、html記述。なお、[#英語文字列#]は画像や機能へリンクする独自タグ。

<p style="text-align:left"><span style="color:#daa520; font-size:180%;">サイトタイトル</span><span style="color:#ccffcc; font-size:100%;">

2023.2.2
　履歴
<span style="font-size:80%;">[#history#]
</span><span style="color: #87CEEB; font-size:125%; line-height:1;">
[#mi=1#]
　[#free=1#]★[#free=2#]★[#free=3#]
　<a href="（拍手用URL、後述）">拍手</a>☆[#diary=1#]☆[#dm#]
[#mi=2#]
</span><span style="color: #87CEEB; line-height:2;">登録中。
（※各種ランキングサイトへのリンクタグのため、省略）
since:******</span></p><hr class="ex1">

html記述ここまで。
メモ帳なりにコピペして前述の画像と比較したり、わからないhtmlタグは検索したりしてどう対応してるか確認してみてください。
（最後の線のhr記述はスマホにしか反映されてないっぽい…）

独自タグについては公式ヘルプあたりで参照出来るので説明は割愛。
この記述であれば、カウンター以降の位置に画像も入れられるし、トップページのカスタマイズがしやすいと思います。

※カウンターについて
カウンターの位置の調整はスマホ表示でしか反映されない（公式info）ため、私は諦めてあの位置にあります。（スマホだけ違うとかそういうのは面倒なので）
※拍手URLについて
私は公式機能の「スキ」を拍手として使っています。
ハートマークで表示されてしまい、独自タグもなく、位置も固定されてしまうため、一度トップページに表示させる→右クリックなどでURLを確認する、という方法を取っています。
URLが「～plus.fm-p.jp/u/（ユーザーID）/cheer?sid=（数字列、5桁くらい）」になればOK。

内部の構成

フォレストページといえばあの特徴的な小説ページ。
あれがどうしてもクソダサで黒歴史を感じさせると思うのでそのあたりを調節するのがHEAD/CSS。
他のデザインを適用していると、デザインが崩れる可能性もあるので、デザインを「シンプル（色名）」にしている場合に使ってください。
（htmlやcssに知識のある方はそれ以外のデザインでも使用できるかもしれませんが。）

まず、「サイト全体設定」→「デザイン設定」→「マイテーマ編集」で使用しているデザインのタイトルを選択。
「マイテーマ編集」のページになるので、真ん中あたりの「上級者向け設定」でHEADやCSSを編集していきます。

HEADの記述は公式FAQの『「続きを読む」で折りたたまないようにしたい』に記述されているものを使用しているので割愛。
（公式FAQは、公式ページ下部に出るヘルプのこと。「HEAD」で検索すると有用そうなものがいくつか出てくるので探しているものがあれば検索されるのが吉。）

CSSの記述は下記の通り。

h1.site_title {
display: none;
}
.top_kiriban {
text-align: left;
}
h2 {
display: none;
}
h3 {
font-size: 50%;
}
ul {
font-size: 80%;
}
dt {
margin-left: 20px;
margin-top: 1em;
}
dd {
margin-left: 40px;
font-size: 90%;
line-height: 1.5em;
margin-bottom: 0.5em;
}
.pager {
display: none;
}
.size_komoji {
font-size: 5px;    /* 文字サイズ指定 */
}
.iro_koumoku {
color: #CC66FF;
}

以上CSS記述ここまで。

・h1.site_title は、デフォルトで自動的に入力される上部のサイトタイトルを非表示にするもの。
・.top_kiriban はカウンターに関する記述で、ここでは左寄せ指定をしています。
・h2の記述は、小説ページでどのページにも本（後述でいうところのキャラ名）のタイトルが表示されるため、それを非表示にするもの。
・h3の記述は、小説の目次ページで「目次」などの文字を小さくするもの。
・ulの記述は、各ページで自動的に配置されるトップなどへのリンクの文字の大きさを80%にするもの。
・dt、ddに関しては後述。
・pager は小説のページで下部に「1/4ページ」や「次へ」といったリンクを非表示にするものです。長編とか書く方はこの部分は削ってください。（私は短編しか書かないため）
・.size_komoji、.iro_koumokuは私が勝手に作ったもの。.size_komoji は現在使ってないっぽい。.iro_koumoku はdt、ddと共に事項で説明します。

小説一覧ページ

私のサイトではMainで小説の一覧（夢小説・男女カプ）を並べています。

自サイトのMainページのスクショを加工してます。

で、キャラ名またはカプ名を選択すると、

加工のミスで右上に変な線入ってますが気にしないでください…orz

※固定夢主の夢小説書いているので、相手キャラごとに名前変換する形で作っています。
※名前変換のところは公式機能でオンオフが可能。
※ここの「目次」の文字が、先述の「h3」記述が反映されるところ。

このように表示する場合、先述のCSSでのdt、dd、.iro_koumokuが反映されます。

Mainになる「フリーページ」を作成し、そのフリーページに行った記述は以下の通り。

<div class="iro_koumoku">▼夢　<span style="color:#ffffff; font-size:80%; text-decoration:underline;">※注釈が無い限り、いずれも固定夢主。</span></div><dl><dt>作品名1</dt><dd><a href="小説のURL">キャラ１</a>
</dd><dd><a href="小説のURL">キャラ２</a>
</dd><dt>作品名２</dt><dd><a href="小説のURL">キャラ３</a>
（中略）
</dd></dl>
<div class="iro_koumoku">▼男女</div><dl><dt>作品名３</dt><dd><a href="小説のURL">カプ１</a>
</dd><dt>作品名４</dt><dd><a href="小説のURL">カプ２</a>
（中略）
</dd></dl>

CSSで「.iro_koumoku」の中で色などフォントの装飾を設定し、<div class="iro_koumoku">（文字列）</div>で『夢』や『男女』の文字を指定しています。（『夢』の横の文字はdiv内でも詳細に指定できる例として残しておきました）
そしてCSSのdtで作品名の位置やフォントの装飾、ddでキャラや作品名の位置やフォント装飾を行っているため、フォントの装飾をこのページでしなくてもいいようにしています。

これらを行わない場合は、前述のCSSでのdt、dd、.iro_koumokuの部分は削ってください。

その他細かいところ

  • ナノなどのように一括で名前変換できるページは作れません。

  • フォレストページ＋は、夢小説変換機能がプルダウン型になっています。これを小説ページで隠したり、というのはできませんでした。（公式回答でも不可とのこと）

  • ↑のように、どうしても改変が効かない部分はいくつかあるようです。「どの部分は不可か？」などいろいろ聞いてみましたが、「CSSに関する項目は回答できない」とのことです。
    （「～～をしてみたいのだが方法はあるか？」と聞いて、CSSで可能であれば「CSSで～～」という回答は出来るということだと思われる。）

  • 各ページ下部から公式機能（自分でリンクを貼るのではなく、デフォルト機能）でTOPに飛ぶ場合、【通常トップURL】に【/mypage】が追加された先に飛びます。（カウンターの重複カウントを避けるため？）

  • R18設定は小説の場合、章ごとにしかできないため、ページごとにしたい場合は結局パス制にするしかない。（これページごとにして欲しいんだけどなあ）

まとめ

ナノみたく、『デザイン選べば即反映！』とはいかないけれど、htmlの知識を少しつければある程度カスタムできます。

更に知識がある（CSSとかある程度わかる）方は、PCのGoogleのChromeにデフォルトである「デベロッパーツール」を使えば、どこのタグや属性がわかるようになっているので活用するのも良いかと思います。
（私はかなり活用しました。使う場合は、div class=wrapperの項目を探してください。）

前述しましたが、不明点やご相談あればご連絡ください。（後学のためになるので）（公式ではないので全部回答出来るとは限りませんが…）

みなさまの参考になりましたら幸いです。

【追記】　2023年4月23日

唐突に思い出したので追記。

ガラケー時代から存在する「ランキングサイト」に登録する際、「https」のままだとエラーで登録出来ない場合がある。
こちらは「http」にしてURLを入力すれば通常通り登録が可能だった。（少なくとも私の場合は。）
アクセスの際、自動で「https」に変換されるので404になることもない。

この記事が気に入ったらサポートをしてみませんか？