9669
CSSテンプレサイト
使い方

Information

フォレストページ+用のテンプレートを配布しています。共通HEADにCSSをコピペするだけ。

News


2023/05/05 よくある質問
2023/04/30 背景カスタマイズ ver 1.1
2023/04/30 ベース ver 2.2 → Release Notes
2023/04/27 ラテ式CSS拡張版 ver 2.1
2023/04/05 webフォントおすすめ10パターン

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以降


利用ルール・注意事項


  1. ❌ 再配布は禁止
  2. ⭕️ CSSコードの改変OK
  3. 2023/03/14現在までの既存公式テーマに合わせて調整しています。今後新規公式テーマが発表された場合、その新テーマに対応できるとは限りません
  4. 公式テーマ対応のCSSですが、合わないテーマもあります
  5. もしコピペして表示に不具合が出た場合は、ペーストしたコードを全削除してください

問い合わせ


まずよくある質問を読んで、既出の質問かどうか確認してください。
基本的には、今回のCSSコードの読み方や、CSSコードのさらなるカスタマイズ方法についてはサポートしません。ごめんなさい。
このフォレストページ+経由のメッセージ/コメントはチェックしていません。その他なにかありましたら、Twitterラテ @latte7x7 までリプやマシュマロをください(褒めてくれるとうれしい…!)

CSSコピペ


今回のCSSコードは公開しますので、ご自由にコピペしてください

利用ルールと注意事項を理解しました
ラテ式CSSベース(公式テーマ対応カスタマイズCSSコード)

Release Notes:CSS更新履歴

リンクについて


このサイトへのリンクはご自由にどうぞ

Ryoryuka

https://plus.fm-p.jp/u/ry0ryuka
管理人:ラテ/ヒフミ

持ち帰り用Banner
バナーは持ち帰ってください

design 200 × 40

design 88 × 31



公式ヘルプ

Thanks

参加サーチ
design 創作サイト総合サーチLony design

おまけ


ラテ式CSSベースver1.6以降の新要素
webフォントおすすめ10パターン

簡単コピペで全画面背景画像を設定
背景カスタマイズ

HTML/CSS知識のある方向け
HTMLタグ一覧
Google Fontsの使い方
背景CSS変数一覧

小説目次ページをもっとデザインしたい人向け
ラテ式CSS拡張版
シンプル目次の比較(CSSベース/拡張版)

個人サイト全般お役立ち情報

フォレストページ+(プラス)以外でも応用できる内容になっています

Webフォント組み合わせ例
Google Fontsまとめ

おすすめ全画面背景画像
Background Image

背景画像などの探し方を詳しく、1万字かけて記事にしました
【個人サイト向け】おしゃれな素材の探し方【2023】

個人サイト管理人向けの質問テンプレ(いわゆる100質)
Template