創造的でいたい
2009/01«│ 2017/03| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 »2009/02
--
--
--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Category:スポンサー広告│ コメント:--│ トラックバック :--
07
17
Fri
テンプレートの文字の設定は、以下の通りにやれば出来ます。

要素(div#xxなど){
font-size: 文字の大きさ;
font-weight: 文字の太さ;
font-family: フォントの種類;
letter-spacing: 文字の間隔;
word-spacing: 単語の間隔;
line-height: 行間;
}
で書くことが出来ます。
なお、具体的な書き方は以下の通りです。
・文字の大きさ→
ピクセル数またはパーセント値で指定します。
12pxが標準的です。
また、body要素以外の文字の大きさに関してはパーセント値で書くのが望ましいと言われています。
これは、文字を大きくしたい場合に、全体が比例して大きく出来るからです。
逆に、ここは絶対に大きくしたくない(カレンダーなど)ところはピクセル数で書きます。(ただし、ブラウザの機能で変えられることがあります。)
例えば、body要素の文字の大きさが12pxで、16pxにしたい部分がある場合は、16÷12=133%と書きます。

・文字の太さ→
bold(太い)、normal(中くらい)、100(細い)~900(太い)までの100刻みの数字なので表すことが出来ます。

・フォントの種類→
MS Pゴシックなら"MS Pゴシック"と書きます。
また、最後に、ゴシック体ならsans-serif、明朝体ならserif、草書体ならcursive、装飾的なフォントならfantasy、等幅のフォントならmonospaceと書いてください。コンピューターが自動的にふさわしいフォントを選んでくれます。(Macの場合、これが無いと文字化けすることがあります)

・文字の間隔、単語の間隔→
ピクセル数などで指定します。
適度に指定すると読みやすくなったり、雰囲気が出たりしますが、一部のブラウザでは文字の間隔を指定した場合、複数行の改行を1行にまとめられてしまう副作用があるようです。

・行間→
ピクセル数や数字などで指定します。
数字で指定した場合、数字×文字の大きさになります。


・例
body{
font-size: 12px;
font-weight: normal;
font-family: "Arial","Meiryo", "MS Pゴシック", "Osaka", sans-serif;
line-height: 1.8;
letter-spacing: 2px;
word-spacing: 3px;
}
スポンサーサイト

05
27
Wed
テンプレートの背景画像の設定は、以下の通りにやれば出来ます。

要素(div#xxなど){
background-image: url("画像のアドレス");
background-attachment: 背景画像の固定をするか;
background-position: 背景画像の左右の位置(%などで指定) 背景画像の上下の位置(%などで指定);
background-repeat: リピートについての設定;
}
で書くことが出来ます。
なお、具体的な書き方は以下の通りです。
・背景画像の固定をするかについて→
 背景画像を固定したい場合はfixed
 背景画像をスクロールと共に動かしたい場合はscroll
と書きます。
・背景画像の位置→
 左右の位置に関して・・・left(左)、center(中間)、right(右)、または%値(0%で左、100%で右)
 上下の位置に関して・・・top(上)、center(中間)、bottom(下)、または%値(0%で上、100%で下)
で設定します。
リピートについての設定に関して・・・
 repeat(上下左右共にリピートしたい場合)
 repeat-x(左右方向のみにリピートしたい場合)
 repeat-y(上下方向のみにリピートしたい場合)
 no-repeat(リピートなしの場合)
で設定します。

05
22
Fri
はじめに、デザインを変える場合、"どの要素の"デザインを変えるのかが重要になります。

デザインを変えるための設定を行うのは基本的にスタイルシートです。

例えば<div class="a">中身</a>
の中身のデザインを替えたいとしましょう。

そしたら、スタイルシートに、div class="a"のスタイルは
{
この中の通り
}
だよと伝えます。

具体的にあらわすと、
div.a{
デザインの設定
}
です。
もし、これがdiv id="a"の場合、
div#a[
デザインの設定
}
になります。
"class"が"id"になると、"."が"#"になる違いがありますので注意しましょう。
ただし、要素名は必ずしもdivではありません、
例えば、<dl class="plugin">中身</dl>
の中身のデザインを替えたいときは
dl.plugin{
デザインの設定
}
になります。
divのところがdlになったので、それと合わせて書き換えればいいのです。

各要素の配置や関係に関しては、ここから自分が使っているテンプレートをクリックしてみてください。

記事一覧
Let's customize templates! 1 ~透過率を変える~
Let's customize templates! 2 ~虹の出現率を変える(Free-sky、Water)~
Let's customize templates! 3 ~背景画像の設定の仕方~

03
27
Fri
HTMLを見て見ますと、
<script type="text/javascript">
i=Math.floor(Math.random()*8);
if(i==0){
document.writeln("<img src='http://blog-imgs-19.fc2.com/n/k/1/nk1616/Rainbow2.gif'>");
}
</script>
と書かれてる部分が上のほうに2箇所あると思いますが、そのうち上にあるほうはTopページに出る虹についての設定、下にあるほうは、記事などが見れる中身のページに出る虹についての設定です。
(したがって、中身のページだけをダウンロードされた方は1箇所のみです。)

このなかで、赤い字になっている8に注目してください。

これが確率です。

なお、8ならば8分の1、3ならば3分の1というように、赤い字をnとすると、n分の1の確率で出現するようになってます。

1であれば常時出現しますし、100であれば見れたら超ラッキーってことになるでしょう。

なお、これによって、虹を見たいがためにリロードを繰り返す方が出てしまう恐れがありますが、私はそのことに対する責を負いません。

03
26
Thu
当サイトのブログテンプレートには、透過率を指定しているものがあります。

これを指定すると、一定の割合で透過することが出来ます。

samp1.png

こんな感じに、記事の背景色を黒にしても、その下の背景画像が浮き上がって見えます。

しかしながら、画像を載せると、その下の背景画像が浮き上がって見えるため、微妙な感じになってしまいます。

そこで、透過率を変更することで、不透明にしたり、逆にもっと透明にすることが出来ます。
変えるためには、

filter: Alpha(opacity=50);
opacity: 0.50;
の数値を変えます。

filter: Alpha(opacity=50);の数値は0から100まで、
opacity: 0.50;の数値は0から1までの間で変えてください。

なお、いずれも低い数値ほど透明になり、高い数値ほど不透明になります。

なお、filter: Alpha(opacity=50);はInternet Explorerで適用され、opacity: 0.50;は他のモダンブラウザ(Firefox、Opera、Safariなど)で適用されるため、両方設定してください。

また、
div#calender2{
}
の中にある数値は横型カレンダーの欄で適用され、
div#fontsize{
}
の中にある数値は文字サイズを変えるボタンの欄で適用されるなど、

どれにくくられてる数値かにも着目してください。

一例を以下に挙げます。
div#main-side{}・・・記事・コメントを擁するカラム
div#left-side{}・・・プラグインのある左のカラム
div#right-side{}・・・プラグインのある右のカラム
div#foot{}・・・ブログ最下部の広告・著作権表記など

分からなかったらお気軽に尋ねてください。

Profile

空雄(旧HN:旅音)

Author:空雄(旧HN:旅音)
東京工業大学第5類生

/hidden
詳しいことは↑を見て。

もらって嬉しいもの。
テンプレートに関するおほめの言葉に対しては、喜んですべて目を通させていただいておりますし、それがブログテンプレート製作の原動力にもなっていますが、誠に申し訳ながら返信しておりません(返信するとしたらどうしても決まったパターンでしか返信出来ませんので・・・)。 また、質問に関しても返信が数日遅れることがあります。 その点をご理解いただけると嬉しいです。
最新記事
最新トラックバック
My black history
Category
適当に色々
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。