アレンジの仕方について

※ここで紹介している以外のアレンジの仕方についての質問は基本的には受け付けません。ページ最下部につなげているサイトさんなどでご自分で調べてください。
○○：〜〜;のようになっているのはCSSです。HEAD内を見てください。


head内のCSS部分に

background-image:url('!!!');
background-repeat:repeat;
background-position:right top;

このような部分があると思います。
多少違う場合もありますが、とりあえず background-image があるところを探してください。
ない場合は↑をコピー。


この部分の、

・!!!にお好きな画像のURLもしくは画像URL独自タグをいれると背景画像を変えられます。

・repeatは両方向に繰り返すという意味です。
no-repeat に変えると繰り返さない。
repeat-x に変えると横にだけ繰り返す。
repeat-y に変えると縦にだけ繰り返す。
お好みに変えてください。

・right topの部分は、画像を右上におくという意味です。繰り返す場合は始点になります。
right → left またはcenter や、
top → bottom または center など変更してください。
数値で細かく指定する方法もありますが、ここでは割愛します。専門のサイトさんで調べてください。

・背景画像を指定している部分がいくつかある場合があります。その場合はclass名で見分けるか、わかりやすい画像で一度試しに変えてみるとその指定がどの部分に対応しているかわかると思います。

・背景画像設定がないものでも追加できます。上のようなスタイルシートをheadのallやheaderなど好きなclassに追加してください。
.all{〜}などのようになっている〜部分のどこかに、既存のスタイルシートを崩さないように入れれば大丈夫です。




基本的にはhead内のCSSのカラーコードを変えるだけです。どのカラーコードがどこに対応しているかはclassの名前で見分けてください。
たとえば、<div class="all">のclassはallです。
全体を囲む枠の色を変えたい場合は
.all {
(省略)
border:solid 1px #dddddd;}
の#ddddddの部分をお好きな色のカラーコードに変えてください。

また、上記 border:solid 1px #dddddd;を削除すると枠があるデザインの場合枠が消えます。



ページ本文編集で、文字を大きくしたい部分や小さくしたい部分には
<div class="midashi1">文字</div>
のように書いてください。
<span class="midashi1">文字</span>
だと改行されずタグに挟まれた部分のみの適用になります。

midashi1の部分はhead内のhead内の下の方にあるclass名を参考に変えることもできます。その場合、先頭のピリオド(.)は除いてください。また、全体のレイアウトにかかわるclassもありますので注意してください。

もちろん、classを利用しなくても普通のタグ指定もできます。
慣れた方は上記の方法だとCSSをいじるだけでページの一括変更ができるのでおすすめです。




リンク下線もHEAD内のスタイルシートで設定してあります。
現在当サイトのテンプレートはほとんどはリンク下線点線で指定してあります。
リンク下線変更の仕組みを以下に簡単に説明します。より正確で詳しい情報はページ下部につないである専門のサイトさんで調べてください。
1．リンクは初期状態で下線が付いていますのでまずそれを消します。
例)
a:link,a:visited {
text-decoration:none;
border-bottom:dotted 1px #555555;}
a:hover {
color:#bbbbbb;
text-decoration:none;
border-bottom:dotted 1px #bbbbbb;}
a:active {
text-decoration:none;
border-bottom:dotted 1px #555555;}

赤文字が下線を消す指定です。下線がいらない方は灰色の部分を消して終了です。

2．下線を付けて、その種類を指定する。
a:link,a:visited {
text-decoration:none;
border-bottom:dotted 1px #555555;}
a:hover {
color:#bbbbbb;
text-decoration:none;
border-bottom:dotted 1px #bbbbbb;}
a:active {
text-decoration:none;
border-bottom:dotted 1px #555555;}

赤文字がその設定です。border-bottomは下線を付加する指定で、dottedが線の種類、1pxは線の太さ、#555555などのカラーコードが線の色を表しています。
線の種類は、dottedが点線、dashedが破線、solidが実線、doubleが二重線となっています。
ちなみに、リンクにカーソルが乗ったときの指定は
a:hover {〜}で行っています。カーソルが乗っている時だけ色を変えたい、下線を出したいなどの時はここを編集してください。(編集に際し個人への説明はいたしませんのでご注意ください)




当サイトのテンプレートでは、文章部分などに行間をとっています。特にナノの小説機能用のテンプレートには本文部分に広めの行間を設定しています。
その行間を調節したい場合は、以下の手順で行ってください。

1.body部分（HEADでない、ページ内容を書くところ）で、行間を調節したい文章を挟んでいるタグとクラス名を確認する。
<div class="text">
行間を調節したい文章(ナノ小説機能の本文だったら#text#)
</div><!--/text-->
この場合はクラス名はtextです。

2.そのページのHEAD内で.クラス名となっているところ(この場合は.text)を探す。

3.
.クラス名{
　〜}
となっている中で「line-height:数字;」となっているところを探して数字を1以上の好きな数値に変える。

数値が1だと行間は文字を含めて文字の高さと同じ(行間なし)、1.5だと行間は文字を含めて文字の高さの1.5倍(行間だけだと文字の半分の高さ)、2だと行間は文字を含めて文字の高さの2倍(行間だけだと文字の高さ)というようになります。
0.5などとすると行間は文字を含めて文字の高さの半分、つまり、文字が半分重なってしまうので、もし自分の機種で読めても他機種では読めないという可能性も高いので使わない方がいいと思います。

文字間も1〜2までは同じことをして「letter-spacing:数字px;」というところを探してください。
これは、文字の幅を含めない文字の間の空間だけを示しているので、文字の大きさより小さい値でも重なりません。

ちなみに、「line-height:数字;」「letter-spacing:数字px;」を消せば行間文字間はなくなります。




body{
(省略)
font-size:80%;
(省略)}
というような部分の80という数字を大きくすると全体の文字サイズが大きくなります。これがpx指定の時も同様で、数値を大きくすれば文字サイズが大きくなります。ページコピーをするなどしてバックアップをとってから、この数値をいじってお好みにしてみてください。





以下に載せるサイトさんで詳しい説明がされています。
ここに書いてある以上のアレンジがしたい方や、ここの説明がさっぱりわからないという方は調べるときの参考にしてください。

ＣＳＳ
おタグるーむ
34567
TAG INDEX(PC向け)
総合HP作成支援(リンク集)