とある夢女の雑記ブログ

随時更新:京アニへの支援記事

2019/02/09

小説用テンプレート『 #001:画面いっぱいの背景デザイン 』

二次創作サイトの小説用テンプレート『 #001:画面いっぱいの背景デザイン 』です。名前はダサいけどわかりやすいのでこれで…()

レスポンシブデザインなので、同じURLでPC・タブレット・スマホからの閲覧が可能です。

 

 

ただし、スマホがもともともとの画面の幅が狭いので、見栄えは下の画像のような雰囲気になります。(サンプルサイトの本文は夏目漱石『吾輩は猫である』より)

 

スマホで見た時の画面に背景いっぱいのレスポンシブデザイン

 

横幅のサイズをもう少し狭めたい方はお好きにカスタマイズしてください。

中の文章やタイトルなどはご自身が書かれたものに変更するだけでお使いいただけます。

使用言語
HTML5 / CSS3
文字の装飾(使用のWebフォント)
Google FontsNoto Serif SC(明朝体)※タイトルのみ
文字コード
UTF-8 / 既存のテキストエディタでは文字化けする可能性があるので、無料でも利用できる『 TeraPad 』などで編集してください。
その他
検索避け済み / カスタマイズ自由(小説ページ以外の用途もOK)ですが、サポートは行っておりませんので自己責任でお願いします / 背景などはお好きな素材に変更してOKです / 広告がでる無料サーバーでは、レイアウトが崩れる場合があります

サンプルテキストページ

ダウンロードはこちら

 

スポンサーリンク

テンプレートに入っている背景の画像は全5種類

背景の素材は『NEO HIMEISM』様のものをお借りしています。

このままご利用になる場合は、NEO HIMEISM様の規約に目を通してください。

また、R指定のものも可能ですが、ご利用のレンタルサーバーの規約も一度ご確認ください。

背景画像や文字周りの切り替え方

全て<body>の中で切り替わるので、この部分を変更するだけで背景や文字の色などが変わります。

入れる文字は以下の英数字です。

bg1

青空背景(サンプルサイトのデザインです)

青空のサンプル

bg2

彼岸花(暗めのお話用)

彼岸花のサンプル

bg3

教室

教室のサンプル

bg4

本と眼鏡のしっとり背景

本と眼鏡のサンプル

bg5

夜桜で艶っぽい背景

夜桜のサンプル

 

スポンサーリンク

自分で背景を選びたい

PCとタブレット・スマホでスタイルシートを切り替えています。(PC用のままだとスマホで背景固定が効かないので)

背景は<body class=”bg●”>で指定していますが、このclass名はお好きなものに変えてください。

タブレット・スマホ用の背景(共通)

スマホ用のスタイルシートより前にあるので探してください。

参考:スマホで背景fixedしたい時のCSSメモ

PC用の背景

PCだけパソコン用の方で指定します。

背景画像の位置を少しずらしたい

背景は真ん中中央で固定していますが、もし左下の方を見せたい!という場合は、背景設定の「 background-position 」部分で調整してみてください。

%で指定することもできます。(例:20%(左から) 100%(上から)など)

文字を載せている背景色の変更

背景用につけたclass名を使うと個別に変更ができます。(何も指定しない場合は、背景・文字色・フッターのリンク色は青空で使っているカラーになります)

また、背景色は背景の画像を見せたいのでRGBで指定して透けるようにしています。(変換はこちらのサイトでできます

上のサイトで表示されたR,G,Bの数値をそれぞれ入れて使います。

隣の透過度は1が無透過、0で完全に透過になるので、0.6~0.8あたりで指定するといい感じかと思います。お好きに調整どうぞ!

スポンサーリンク

その他のカスタマイズ

無料レンタルサーバーで余白が使えない場合

規約によっては下の余白がひっかかる可能性がありますので(3行以上改行禁止など)、#wrapper の padding 調整をお願いします。

下の方だけ減らしたいなら、「 padding:120px(上) 40px(左右) 20px(下); 」といった形で、最後に20pxを追加すればOKです。

また、スマホ・タブレットも別で指定しているので探してください。

スマホの表示される横幅を狭くする

スマホ用のスタイルシートを弄ります。

本文も明朝体に変更したい

wrapperに「font-family」を追加してください。

CSSの切り替え方

当ブログで配布している小説用テンプレートは、中のHTMLは一緒ですが、CSSで切り替えが可能です。

このテンプレートのCSSは [ text_001.css ]という名前で保存されています。

画像も一緒にアップロードすると、CSSや<body>の部分を変更するだけでデザインが変わります。

また、CSSフォルダの中には[ reset.css ]というファイルも入っていますが、こちらも一緒にアップロードしてください。(もしすでに入っている場合は上書き保存やこちらのファイルを削除でどうぞ。)

スマホやタブレットで下にスクロールすると画像がちょっと動く現象について

iOSの場合、スクロールすると上下のバー(アドレスの部分など)が小さくなったり消えたりして、縦幅の画面サイズが変更されてしまうので、背景がちょっと動いたりしますがこれはブラウザの問題です。。。(仕方がないともいう)

固定できるように微調整もできますが、文章の領域の外(背景画像の方)に触れたらどのみち縦幅が動いてしまうので、そのままでもよいと思います。

念の為、対処法もご用意したので、気になるようでしたらお好みで修正してください。

スマホ用のCSS画面

タブレット用のCSS画面

参考:iOS safariで画面下部のメニューバーが消えないようにする

 

カスタマイズ方法は以上となります。

特に変更しなくてもそのまま利用できるので、どうぞ創作活動にお役立てください!

 

ダウンロードはこちら

 

スポンサーリンク

随時更新:京アニへの支援記事

コメントや誤字脱字報告などお気軽にどうぞ*
悪口系は弾かれて届かない場合があります。
その他お問い合わせはメールフォームへお願いします。

\ follow me! / ブログの最新情報をTwitterで配信中!フォローしてね! ただのツイ廃アカウント(SNSメモ
スポンサーリンク