Memo
サイトを改装した件について
2023/06/03 23:19一昨日～昨日にかけて頑張ってサイトをCSSでカスタマイズしてみたのでその事について日記書きますね。いやこれほんとに誰が読みたいんだって感じの話だけど、でも頑張って色々調べたり試行錯誤したので……。
■適用したCSSテンプレートについて
Ryoryuka様のラテ式CSSというCSSテンプレートをお借りし、少し値を変更して使っています。フォレストプラスは操作が簡単な分カスタムしづらい仕様になってますが、このCSSテンプレと公式のテーマを併用するとびっくりするほど可愛くアレンジできるので最高におすすめです。
ラテ式CSSさんのサイトからCSS文をコピーしてフォレストプラスの「サイト全体設定＞共通HEAD」に貼り付けて適用するだけです。
■変更した値について
幾つか値を変更しました。
①サイトタイトルの表示位置
変更箇所：#header h1.site_titleセクション
元の値： margin: max(15vh, 5em) auto;
変更後の値： margin: min(4vh, 5em) auto;
→marginの部分でタイトル文字列の上下余白幅を決めているようです。
CSSのmax関数は()内を比較して大きい値を、min関数は（）内を比較して小さい値を取るようです。
関数をminに書き換えて15vh→4vh とすることでタイトル位置をラテ式CSSのデフォルトから少し上部にずらしました。
ただし、公式テンプレの種類によってはレイアウト崩れが起きるので、多分テンプレを変えるたびにこの値を微調整する必要がありそうです。
②小説内のフォント
変更箇所：.novel_textセクション
元の値： --n: 'Hiragino Mincho ProN', 'BIZ UDMincho';
変更後の値： --n: 'Hiragino Mincho ProN', 'Meiryo';
→ラテ式CSSデフォルトだと小説のフォントが明朝体になります。それはそれで綺麗で素敵なのですが、R18小説を明朝体で読むの照れるなって思ったのでメイリオに変更しました。
③名前変換フォームの広さ
変更箇所：input+button.btn
変更後の値： font-size: var(--f);width: 120px
→これは絶対正しくない対応なんですが、ラテ式CSSを適用した時に名前変換フォームのボタンがレイアウト崩れを起こしたんですね。
CSS読んだ感じだとボタン幅は自動調整になってる印象を受けたのでほんとどこいじっていいか分からなかった。CSS素人なのでどこをどう修正するのがスマートな解決策なのか分からず、苦肉の策でボタン幅の値をベタ打ちで追記しました。
ボタン幅の広さは150pxにすると広すぎてスマホで完全にレイアウト崩れになるので、多分120～130くらいが無難かなって感じします。
でも多分この対応は正しくない。
④その他
ラテ式CSSはフォレストのヘッダー字数制限（5000字）の関係上改行やインデントを全て失くして配布されてるので、実際編集する時はCSS整形ツール（検索するといっぱい出てくる）などを使って整形すると読みやすいです。
私は下記の流れでCSS読み解いて編集してました。
1.CSS整形ツールで整形→サクラエディタに貼り付け・編集
2.サクラエディタの置換（ctrl+r）で正規表現にチェックをいれて「置き換え前」に「\r\n」、「置き換え後」に空白を指定しインデントやスペースを削除
3.フォレストプラスの「サイト全体設定＞共通HEAD」に貼り付け
※サクラエディタは置換機能以外にもGrepという機能で「指定文字列の含まれるファイルをPC内から検索する」みたいなことやalt+矢印キーで複数行選択などもできるのでお勧めです。
Ryoryuka様ではラテ式CSS以外にもサイトタイトルフォントをカスタマイズできるCSSや、背景画像を変更した時にサイトタイトルとテーブル？iframe？的な部分を透過できるCSSなども配布されており大変おすすめです。いまサイトのトップページに表示されてるあの半透明のスペースの事を正式になんていうのか全然わからん。ああいうの昔は
アイフレームって言わなかったっけ？
このように泣くほど初心者なのでCSS適用は一瞬諦めかけたんだけど、ラテ式CSS（格納庫）に記載されたコメントやサイトのQAなどをヒントに何とか意図通りの所まで持っていくことができて満足です。htmlとかcssとか見るのほんとに久々だった。これを操れる人は本当に凄い。
とりあえずフォレストプラスの民はラテ式CSSのおかげでサイト可愛くする楽しみが広がるので、皆Ryoryuka様に感謝しながらこれ使ってみればいいと思う。
これほんと誰得記事なのですが、まあ個人サイトの日記なんてそういうものだからね……。あと私が今後ラテ式CSSを使う時にこの記事読んだらどこいじったかわかるから便利かなって……。すごい試行錯誤したから……。
■適用したCSSテンプレートについて
Ryoryuka様のラテ式CSSというCSSテンプレートをお借りし、少し値を変更して使っています。フォレストプラスは操作が簡単な分カスタムしづらい仕様になってますが、このCSSテンプレと公式のテーマを併用するとびっくりするほど可愛くアレンジできるので最高におすすめです。
ラテ式CSSさんのサイトからCSS文をコピーしてフォレストプラスの「サイト全体設定＞共通HEAD」に貼り付けて適用するだけです。
■変更した値について
幾つか値を変更しました。
①サイトタイトルの表示位置
変更箇所：#header h1.site_titleセクション
元の値： margin: max(15vh, 5em) auto;
変更後の値： margin: min(4vh, 5em) auto;
→marginの部分でタイトル文字列の上下余白幅を決めているようです。
CSSのmax関数は()内を比較して大きい値を、min関数は（）内を比較して小さい値を取るようです。
関数をminに書き換えて15vh→4vh とすることでタイトル位置をラテ式CSSのデフォルトから少し上部にずらしました。
ただし、公式テンプレの種類によってはレイアウト崩れが起きるので、多分テンプレを変えるたびにこの値を微調整する必要がありそうです。
②小説内のフォント
変更箇所：.novel_textセクション
元の値： --n: 'Hiragino Mincho ProN', 'BIZ UDMincho';
変更後の値： --n: 'Hiragino Mincho ProN', 'Meiryo';
→ラテ式CSSデフォルトだと小説のフォントが明朝体になります。それはそれで綺麗で素敵なのですが、R18小説を明朝体で読むの照れるなって思ったのでメイリオに変更しました。
③名前変換フォームの広さ
変更箇所：input+button.btn
変更後の値： font-size: var(--f);width: 120px
→これは絶対正しくない対応なんですが、ラテ式CSSを適用した時に名前変換フォームのボタンがレイアウト崩れを起こしたんですね。
CSS読んだ感じだとボタン幅は自動調整になってる印象を受けたのでほんとどこいじっていいか分からなかった。CSS素人なのでどこをどう修正するのがスマートな解決策なのか分からず、苦肉の策でボタン幅の値をベタ打ちで追記しました。
ボタン幅の広さは150pxにすると広すぎてスマホで完全にレイアウト崩れになるので、多分120～130くらいが無難かなって感じします。
でも多分この対応は正しくない。
④その他
ラテ式CSSはフォレストのヘッダー字数制限（5000字）の関係上改行やインデントを全て失くして配布されてるので、実際編集する時はCSS整形ツール（検索するといっぱい出てくる）などを使って整形すると読みやすいです。
私は下記の流れでCSS読み解いて編集してました。
1.CSS整形ツールで整形→サクラエディタに貼り付け・編集
2.サクラエディタの置換（ctrl+r）で正規表現にチェックをいれて「置き換え前」に「\r\n」、「置き換え後」に空白を指定しインデントやスペースを削除
3.フォレストプラスの「サイト全体設定＞共通HEAD」に貼り付け
※サクラエディタは置換機能以外にもGrepという機能で「指定文字列の含まれるファイルをPC内から検索する」みたいなことやalt+矢印キーで複数行選択などもできるのでお勧めです。
Ryoryuka様ではラテ式CSS以外にもサイトタイトルフォントをカスタマイズできるCSSや、背景画像を変更した時にサイトタイトルとテーブル？iframe？的な部分を透過できるCSSなども配布されており大変おすすめです。いまサイトのトップページに表示されてるあの半透明のスペースの事を正式になんていうのか全然わからん。ああいうの昔は
アイフレームって言わなかったっけ？
このように泣くほど初心者なのでCSS適用は一瞬諦めかけたんだけど、ラテ式CSS（格納庫）に記載されたコメントやサイトのQAなどをヒントに何とか意図通りの所まで持っていくことができて満足です。htmlとかcssとか見るのほんとに久々だった。これを操れる人は本当に凄い。
とりあえずフォレストプラスの民はラテ式CSSのおかげでサイト可愛くする楽しみが広がるので、皆Ryoryuka様に感謝しながらこれ使ってみればいいと思う。
これほんと誰得記事なのですが、まあ個人サイトの日記なんてそういうものだからね……。あと私が今後ラテ式CSSを使う時にこの記事読んだらどこいじったかわかるから便利かなって……。すごい試行錯誤したから……。
