47023
CSSテンプレサイト
使い方
Information
フォレストページ＋用のテンプレートを配布しています。共通HEADにCSSをコピペするだけ。News
2024/10/16 webフォント11パターン追加+1
2024/10/15 ベースver 2.5→Release Notes
2024/07/05 よくある質問2
2023/10/13 Template メイン画像向け素材
2023/04/30 背景カスタマイズ ver 1.1
2023/04/27 ラテ式CSS拡張版 ver 2.1
Demo Page
すべてのデモページはレイアウト変更していません。公式テーマをベースに適用して、そのままです。Theme: 縞柄椿（黒）
List
Preview：いろんな公式テーマのプレビュー
Bookshelf：本棚ページ
百花のマジシャン：小説の表紙
1-0 バラティエ：小説の章ページ
1-1 定期船より：小説本文
1-2 旅仲間：小説本文/パスワード制限
庇護：年齢制限/【ver2新要素】目次シンプル
会話デモ・フォントの話：ストーリートーク
Diary：ブログ機能
Template：つぶやき機能(素材配布)
About：プロフィールページ
Log：更新履歴ページ
Thanks：お礼画面
Res：コメント返信ページ
Mail：ダイレクトメール
公式
フォレストページプラス運営の公式サンプルサイトと比較してみてください。
→サンプルサイト
カスタマイズCSSの特徴
- 本文フォント小さめ
- Webフォント多め（Google Fonts）
- 小説本文フォントは少し小さめで明朝体
- 左右の余白多め
- 色変更なし
- 【ver2新要素】スキ/しおりボタンのテキストは強制的に非表示になります。公式ヘルプの手順でテキスト登録しても非表示のままになります。
対応スマホ
ラテ式CSSベースは以下の環境に対応
【Android】Google Chrome 105以降
【iPhone】iOS 15.4以降
↓いいかえると
【Android】Android OS バージョン5以前はレイアウト崩れ
【iPhone】iPhone6以前はレイアウト崩れ
Android 5とは
Android 5.0 は2014年発売のOSです。
Androidにおいては3年以上サポートする機種は一部のみです（一部のみらしいです）。
9年以上前のAndroidを2023年現在も使用するユーザーがサイト訪問することは少ないかと思います（※私個人の考えです）。
iPhone 6とは
iPhone6は2014年発売の機種です。
つまり、レイアウト崩れするのは2023年現在より9年以上前のiPhoneです。
（私ラテはiPhone6ユーザーでしたが、2018年当時の最新ソシャゲがカクついてまともに遊べませんでした）
2023年現在、流行りのソシャゲをプレイする層はiPhone6は持っていないと思います（※私個人の考え）。
なので、レイアウト崩れの心配はほとんど要らないかと思います。
おすすめコピペ
以下のテキストをサイト案内ページなどに明記しておくと安心かもしれません。
推奨環境
Google Chrome 105以降
iOS 15.4以降
利用ルール・注意事項
- ❌ 再配布は禁止
- ⭕️ CSSコードの改変OK
- 2023/03/14現在までの既存公式テーマに合わせて調整しています。今後新規公式テーマが発表された場合、その新テーマに対応できるとは限りません
- 公式テーマ対応のCSSですが、合わないテーマもあります
- もしコピペして表示に不具合が出た場合は、ペーストしたコードを全削除してください
問い合わせ
まずよくある質問を読んで、既出の質問かどうか確認してください。
基本的には、今回のCSSコードの読み方や、CSSコードのさらなるカスタマイズ方法についてはサポートしません。ごめんなさい。
このフォレストページ+経由のメッセージ/コメントはチェックしていません。その他なにかありましたら、𝕏（Twitter）ラテ @latte7x7 までリプ/DMやマシュマロをください（褒めてくれるとうれしい…！）
CSSコピペ
今回のCSSコードは公開しますので、ご自由にコピペしてください
→Release Notes：CSS更新履歴
リンクについて
このサイトへのリンクはご自由にどうぞ
Ryoryuka
https://plus.fm-p.jp/u/ry0ryuka
管理人：ラテ/ヒフミ
持ち帰り用Banner
バナーは持ち帰ってください
200 × 40
88 × 31参考リンク
→公式ヘルプ
Thanks
参加サーチ
参加同盟
おまけ
ラテ式CSSベースver1.6以降の新要素
→webフォント11パターン
簡単コピペで全画面背景画像を設定
→背景カスタマイズ
HTML/CSS知識のある方向け
→HTMLタグ一覧
→Google Fontsの使い方
→背景CSS変数一覧
小説目次ページをもっとデザインしたい人向け
→ラテ式CSS拡張版
→シンプル目次の比較（CSSベース/拡張版）
メイン画像向け素材(680×200)を配布
→Template
個人サイト全般お役立ち情報
フォレストページ＋(プラス)以外でも応用できる内容になっています
Webフォント組み合わせ例
→Google Fontsまとめ
おすすめ全画面背景画像
→Background Image
背景画像などの探し方を詳しく、1万字かけて記事にしました
→【個人サイト向け】おしゃれな素材の探し方【2023】
①個人サイト管理人向けの質問テンプレ（いわゆる100質）
②字書きが一年間を振り返るテンプレ
→Template
