とある夢女の雑記ブログ

2019/08/27

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

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

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

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

スポンサーリンク

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

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

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

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

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

背景画像の固定のやり方

元となるHTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- レスポンシブ//viewportの設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes">
<!-- 検索避けタグ -->
<meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<title>小説のタイトル</title>
<link href="読み込むスタイルシート.css" rel="stylesheet" type="text/css">
</head>
<body class="CSSで指定した好きな文字">

<!-- ここに本文 -->

</body>
</html>

外部CSSファイル

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

@charset "utf-8"; /*文字コードにつき削除禁止*/

/* =================================================
背景の指定
================================================= */

/*ここにコードをコピペ*/

元のHTMLに直接書く場合

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

<style type="text/css">
<!--

	/*ここにコードを書く*/

-->
</style>

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

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

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

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

body.好きな文字::before {
	display: block;
	position: fixed;
	background:url('画像のURL') no-repeat;
	background-size: cover; /* 画像を全体表示 */
	background-position: center; /* 中央表示 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	z-index: -1;
}

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

昔同人サイトでよく使っていた背景固定タグは、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>などで文字の部分を囲います。

<body class="CSSで指定した好きな文字">

	<div id="wrapper">

		<p>ここに小説の文章</p>

	</div>

</body>

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

#wrapper {
	margin: auto;
	padding: 80px 40px;
	width: 80%;
	background-color: rgba(255,255,255,0.9); /*背景を少し透過する場合はRBGで指定*/
	box-sizing: border-box;
}

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

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

background-color: rgba(Rの数字,Gの数字,Bの数字,0.8);

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

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

CSS:右上背景固定

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

body.好きな文字::before {
	display: block;
	position: fixed;
	background:url('画像のURL') no-repeat;
	background-size: auto ;
	background-position:top right;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	content: "";
	z-index: -1;
}

CSS:左上背景固定

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

body.好きな文字::before {
	display: block;
	position: fixed;
	background:url('画像のURL') no-repeat;
	background-size: auto ;
	background-position:top left;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	content: "";
	z-index: -1;
}

CSS:右下背景固定

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

body.好きな文字::before {
	display: block;
	position: fixed;
	background:url('画像のURL') no-repeat;
	background-size: auto;
	background-position:bottom right;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	content: "";
	z-index: -1;
}

CSS:左下背景固定

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

body.好きな文字::before {
	display: block;
	position: fixed;
	background:url('画像のURL') no-repeat;
	background-size: auto auto;
	background-position:bottom left;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	content: "";
	z-index: -1;
}
スポンサーリンク

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

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

HTMLなどは基本一緒です。

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

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

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

html,body {
	height: 100%
}

body{
	color:#ffffff; /*文字の色*/
}

body:after {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: #c279ba; /*グラデが効かないブラウザ用*/
	background: -moz-linear-gradient(top, #7c46cb 0%,#c279ba 100%); /*FireFox用*/
	background: -webkit-linear-gradient(top, #7c46cb 0%,#c279ba 100%); /*Safari・Chrome用*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c46cb', endColorstr='#c279ba',GradientType=0 ); /*IE9以下*/
	background: linear-gradient(to bottom, #7c46cb 0%, #c279ba 100%); /*正規のプロパティ*/
}

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

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

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

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

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

グラデーションの角度

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

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

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

<body>
<h1>小説のタイトル</h1>
</body>
h1 {
	background: -webkit-linear-gradient(#7c46cb, #c279ba);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

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

お役立ちリンク

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

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

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

スポンサーリンク
\ LINE@はじめました / 友だち追加 更新したらお知らせします

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

スポンサーリンク