48054
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