47893
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コードは公開しますので、ご自由にコピペしてください

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

Release Notes:CSS更新履歴

リンクについて


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

Ryoryuka

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

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

design 200 × 40

design 88 × 31



公式ヘルプ

Thanks

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

おまけ


ラテ式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