7/27

まず初めにスキン。大枠から設定しましょう。背景色を変えたり背景画像を使ったり意外といろいろできますよ。

魔改造しておく上で大切なのが全体の設定。まずはこれをしておきましょう。

ということで早速魔改造を始めましょう。

まずは全体の設定です。

活動報告全体に適用するスタイルを一番始めに決めておきます。

PC派の人の、途中から文字が小さくなるといった現象をなくすことができます。

また背景画像や背景色を使うことで、個性的な割烹にする事ができます。

これで自分のオリジナルを出してみましょう。

スキンの設定例としてはこんな感じになります。

ここに本文を入力する。

</div>

font-size:14px;　　－文字サイズ

line-height:1.7;　－行間

padding:10px;　－内側余白

margin:-10px;　－外側余白

color:#333;　－文字色

background:#fff;　－背景色

ここでpadding:10px;margin:-10px;を設定しているのは、画面幅いっぱいに適用させるためです。

背景色が白なら別に設定する必要はないですが、色付きの場合は画像や文字の境界が若干汚くなるので設定しておくときれいになります。

padding:10px;

margin:-10px;

小説家になろうの活動報告では表示する部分にmarginがかかっているのでそれを打ち消す処理です。

このプロパティを指定すると、背景を広げることができます。

まぁ、文字で説明しても分かりにくいと思うので、図で説明しましょう。

背景黒、文字白で設定してみます。

margin、paddingを設定しないとこんな感じです。

背景色と画像がぴったり重なって、背景色があまり目立たないです。

また文字も左右余白がないのでちょっと窮屈な感じになってます。

margin、padding設定するとこうなります。

背景色が広がって、文字の余白が生まれたり、画像を入れてもきちんと背景色が分かるようになります。

背景色を使うときは、padding:10px;margin:-10px;を指定することをお勧めします。

特に背景を変えないのであれば、最低限指定するのはこの2つです。

font-size:14px;　又は font-size:1.2em;

line-height:1.7;

フォントサイズと行間は必ず指定してください。フォントの大きさは14px~16px程度が無難です。なろうのCSSを考えると font-size:1.2em;でもOKです。行間は1.5~2あたりが無難ですね。初期値に合わせる場合は1.7にしてください。

この2つを設定しておくとPC読者ページのバグが回避できます。

色合いはcolorとbackgroundで指定します。

color:#333;

background:#fff;

好きなカラーコードをいれて設定してください。

ここで注意するのは文字色が黒ではない場合です。

スマホ版のバグにより自動で色が変わるため、中に入れる要素には気をつけてください。

例えば黒地に白という配色にして途中で太字にするとこんな風になります。

スマホで見ると、<strong>悲惨</strong>なことに……

</div>

スマホ版読者ページの場合はユニバーサルセレクタ先輩がしゃしゃり出るので、中に要素を入れると、その要素の文字色が自動変更されます。要素を入れる場合は、文字色を必ず指定してください。

PC派の人は多分気付かない人もいるかも。

余計な設定が増えるので、なろうでは黒地は使用しない方が無難です。使う場合はなるべく要素を入れないようにした方がいいですね。

その場合はきちんと文字色も指定するようにしましょう。

そういう意味では文字色は黒系にするのが無難です。

背景画像を使うこともできます。

背景画像を使います

</div>

background-image:url(https://22980.mitemin.net/userpageimage/viewimage/icode/i480876/);

background-repeat:repeat;

background-imageで背景画像を指定します。URLの中にみてみんの画像URLを入れます。background-repeat:repeat;で画像を繰り返します。

background-repeat: no-repeat;の場合は、その画像サイズで表示されます。

通常は小さめに画像を作って、それを繰り返して表示させるようにするのが無難だと思います。

背景画像は原寸大でしか表示できないので、スマホもPCも全体が見られるようにするなら小さく作って、繰り返すのがキレイに見えます。

といことでスキンについてでした。

■ポイント

活動報告を作る際はまず初期設定を全体に適用しましょう。

確実に指定するのは

font-size:

line-height:

です。

最低限これだけ指定します。

背景色や背景画像を指定指定する場合は

padding:10px;margin:-10px;

を忘れずに。

あとは、文字色、背景色、背景画像はお好みで指定してください。

color:

background:

background-image:url();

background-repeat:repeat;

</div>

■魔改造用のテンプレ

・基本レイアウト設定。

この中に本文を入れる。

好みで文字サイズ、行間を変える。

</div>

・背景色を変える場合の設定

この中に本文を入れる。

好みで文字サイズ、行間、文字色、背景色を変える。

</div>

・背景画像を変える場合の設定

この中に本文を入れる。

好みで文字サイズ、行間、文字色、背景色、背景画像を変える。

※背景色も指定しないと背景画像が表示されない場合があるため指定しています。

</div>

PC派は減ってきているので、全体設定をしなくてもあまり大きな影響はないですが、まぁ見た目は大事ですからね。

PC派の人にも読みやすくするのは大事ですね。

背景画像を使う場合は文字色を見やすいように変えましょう。ただし、黒地系の背景画像を使う場合は、中に要素を入れるのを控えたほうが無難ですね。入れる場合は文字色もきちんと設定しましょう。