アジアンビートカンケリキッズ

アジアの子供はほとんど裸足だ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

[ black ] のカスタマイズ

シンプルデザインのテンプレート[ black ]のカスタマイズ方法です。
テンプレート掲示板の質問に答えようと思ったら意外と長くなったので、せっかくだから記事にしちゃえと。

【記事の文字色変更】

スタイルシートから以下の部分を探してください。

.left {
padding: 1.7em 0 0 240px;
border-right: 1px solid #777;
}

これは記事部分の指定を行っている文字列です。これを見ると文字色の指定は行われていないので、以下のように一列書き加えてください。

.left {
padding: 1.7em 0 0 240px;
border-right: 1px solid #777;
color: #FFF;
}

書き加えた部分が記事の文字色を指定する文です。「#FFF」が色を表しているので、この部分をお好きな色へと変えてください。
色指定の文字列については「色表」などのキーワードで検索してください。検索に慣れるのも自分の力でデザインを変更するための近道です。
色の指定は「#000」などのカラーコードでも「blue」などのカラーネーム(アルファベット)でも構いませんが、せっかくなのでカラーコードで指定するといいと思います。

【枠線の色変更】

まずはブログの一番右に位置する長い縦線の色を変更します。

.left {
padding: 1.7em 0 0 240px;
border-right: 1px solid #777;
}

「border-right」とは「枠線(右の)」という意味です。
「.left{ ~ }」が記事部分の指定であることは上記の【記事の文字色変更】で書きましたね。つまりこの部分の「border-right」は「記事の右の枠線」であることがわかります。
この線の色を変える方法はもうおわかりだと思います。「#777」を好きな色のカラーコードに変えてください。

【記事タイトルの枠線の色変更】

次はスタイルシートから以下の部分を探してください。

.left h3 {
font-size: 100%;
color :#bbb;
border-left: 5px solid #777;
border-bottom: 1px solid #777;
padding: 0.1em 0 0.3em 0.7em;
margin: 1.7em -2.7em 0 0;
}

記事タイトルの指定がされているのがこの部分です。
「.left{ ~ }」が記事全体の指定であったのに対し、こちらは「.left(記事)」の「h3(見出し=タイトル)」の指定になっています。

見るとわかりますがここでは「border」が2本分指定してあります。
「border-left」は文字通り「左の枠線」の意味です。つまり「記事タイトル左の縦線」です。この部分でも[#777]を好きな色に変えてください。
その下の「border-bottom」は「下の枠線」です。もう迷うことはありませんね。「#777」を好きな色に変えましょう。

【記事下の箱の枠線色変更】

記事の投稿時間とカテゴリ、トラックバック、そしてコメントが入っている箱のような部分があります。この部分をスタイルシートから探し出します。

.sub {
text-align: right;
font-size: 80%;
margin: 2.7em -5.7em 0 0;
color: #777;
border: 1px solid #777;
background: #333;
padding: 0.1em;
}

ここではただ「border」としか指定されていません。これは上下左右すべての枠線を一括指定する書き方です。この部分の「#777」を変更すれば、囲いの枠線の色が上下左右すべてに適応されることになります。

【記事の左下の十字線】

これは実は画像です。

http://blog2.fc2.com/template/black/image/body_back.gif

この線の色を変えようと思った場合、自分でこの画像をダウンロードし、各種ペイントソフトなどで色を変更する必要があります。
画像のURLはスタイルシートの真ん中辺り、以下の部分を見つけてください。

.body {
/* border-left: 1px solid #555;
border-right: 1px solid #555;
border-bottom: 1px solid #555;
*/ margin: -2.3em 1.7em 3.7em -1em;
padding: 3.7em 1.7em 3.7em 3.7em;
background-image: url(http://blog2.fc2.com/template/black/image/body_back.gif);
background-position: 0 100%;
background-attachment: scroll;
background-repeat: no-repeat;
line-height: 1.4;
}

「background-image」が画像のURLを指定してある部分です。
このURLをブラウザのアドレスバーに直接ペーストし、移動した画面の画像を保存してください。そしてペイントソフト等で色を変更したのち、FC2ブログの管理画面で「ファイルアップロード」でこの画像を保存します。アップロードされた画像のURLをコピーし、上記のURLと置き換えます。


background-image: url(http://blog2.fc2.com/b/userid/file/20041217010101.gif);

【補足】

このテンプレートでは枠線の指定に

border-right: 1px solid #777;

と3つの指定がされていることが多いことがわかると思います。
これは左から「線の太さ」「線の種類」「線の色」を表しています。
最初は「1pxの太さ」「実線」「グレー系の色」となっていますが、それぞれについて他にどんな指定ができるのかは検索してみてください。

今回は記事部分の説明しかしませんでしたが、左のメニューの部分も同じように変えたいと思った場合は、自分で挑戦してみてください。サイドメニューの指定は「.right { ~ }」の部分です。
自分でやってみてもわからなかった場合はテンプレート掲示板に書き込んでください。


スポンサーサイト
  1. 2004/12/17(金) 01:32:06|
  2. custom
  3. | コメント:0

コメント

<%template_post\comment>


管理者にだけ表示を許可する

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。