とある夢女の雑記ブログ

随時更新:京アニへの支援方法一覧

2019/08/27

【コピペでOK】同人サイトの小説ページ・背景固定や装飾アイディア集

この記事のデザインは、すべてPCで制作している同人サイトで実装ができます。

モバイル向けサーバーでもCSS(スタイルシート)が利用できるところでは可能な場合もありますが、自己責任でお願いします。

こちらで利用している素材はすべてNEO HIMEISM様のものです。

スポンサーリンク

PCとスマホでスタイルシートを切り替える(レスポンシブ)

PC用のままだとスマホでみた時に文字がかなり小さかったり、横にはみ出したりしてしまいます。

そんな時はviewportやメディアクエリを使って対応させます。

詳しいやり方はこちらの記事に書いているので、どうぞ参考にしてください。

これをマスターできれば、「PCでは画像サイズはぴったりなのに、スマホだと大きすぎる…」という時などに、それぞれ簡単に調整や対処ができます。

スポンサーリンク

背景画像の固定のやり方

元となるHTML

外部CSSファイル

読み込むスタイルシートにコードを書くか、

元のHTMLに直接書く場合

<head>~</head>の中に以下のコードを入れます。

どちらかやりやすい方を選んでください。

イマイチやり方がわからん!という方は、サルワカさんの「CSSはどこに書く?外部CSSファイルの読み込み方&インラインでの書き方」をご覧ください。

CSS:全面背景固定(中央固定)

背景を全面で固定した場合

※サンプル画像は見やすいように本文に背景色を入れています。テンプレート配布中

昔同人サイトでよく使っていた背景固定タグは、PCからは問題ないのですが、スマホでは固定されないため、このように指定しています。

背景画像のカスタマイズ

背景画像をページ全体で覆いたい場合は background-size:cover; にします。

サイズを調整したい場合は background-size: 100px auto; など指定できます。

繰り返す画像の場合は、 no-repeat の部分を repeat や repeat-x(横方向のみ) repeat-y(縦方向のみ)に変更します。

background-position:center; は background-position:50% 50%; など、%で調整もできます。

文字の背景に透過した背景色をつけたい場合

bodyに背景画像を入れているので、<div>~</div>などで文字の部分を囲います。

<div id=”wrapper”>~</div>の部分にCSSで背景色をつけます。

背景色を少し透過させたい場合はRGBで指定します。

こちらのサイトで16進数からRGBに変換できます。

0.8はどれくらい透過するかです。1にした場合は無透過になります。

paddingやwidthはこちらで好きに指定しているので、お好みで変更してください。

CSS:右上背景固定

背景画像を右上固定したサンプル

CSS:左上背景固定

背景を左上で固定した場合のサンプル

CSS:右下背景固定

背景を右下に固定した場合

CSS:左下背景固定

背景を左下で固定した場合

スポンサーリンク

背景をグラデーションにしたい場合

CSSでグラデーション背景を作る

HTMLなどは基本一緒です。

こちらは素材なし・CSSで簡単に実装ができます。

※コードはサルワカさんの「CSSでグラデーションを背景に使う方法:スクロール固定するには?」と同じです。

こちらの記事を参考にしたほうがよいです。

※小説ページなので、背景が動かない固定の方を選んでいます。

グラデーションの組み合わせ

グラデーションを自動で組み合わせてくれる「shade」や「uiGradients」というサイトがあるので、こちらで自由に試してみてください。

shade」の場合は右下にグラデーションのコード(#から始まるもの)、「uiGradients」は<>というマークをクリックするとコードが表示されます。

それを上のコードにある、backgroundのカラーコードの部分を変更してください。(backgroundと書いてあるところは全部)

グラデーションの角度

グラデーションは横方面にもできますし、斜め方面でもできます。

詳しくはサルワカさんの「CSSのグラデーション(linear-gradient)の使い方を総まとめ!」をご覧ください。

文字をグラデーションにしたい場合

こちらはタイトルのみですが、文字全体を指定することもできます。

お役立ちリンク

Webクリエイターボックス」さんで、CSSの小技集を書かれています。

複数のclassを指定する方法やCSSのみで画像を丸く表示させる方法など、小説ページでも使えそうなテクニックばかりなのでぜひご覧ください。

※ページは随時追加予定です。

スポンサーリンク

随時更新:京アニへの支援方法一覧

  • ブログランキング・にほんブログ村へ
スポンサーリンク