スポンサーサイト

--/--/-- (--)  カテゴリー/スポンサー広告

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

テーマの変更に関して

2004/05/13 (木)  カテゴリー/Computer

最近、ブログのテーマを試行錯誤しながらちょくちょく変更しています。

やったことのないスタイルシート(CSS)なんで、悪戦苦闘です。

やりながら気づいたこととかアドバイスできそうなことがあったので、
参考程度に載せておきます(注:livedoor Blog限定です)。

みなさん、読んでみてオリジナルに手を加えたテーマにしてみて下さい。

まずはテーマの変更

テーマの設定から"custom"の絵の方をクリックします。
すると、テーマの読み込みという欄が上のほうにあるので、
そこから好きなテーマを選択して下さい。
それでそれを読み込む。
下の空白スペースに沢山の文字が出てきましたか?

次に、これをちょくちょくいじっていきます。

・タイトルの画像を変更する

少し下の方にいくと、
background:#fff url('~~~~~~')
という部分が見つかると思います。
そこに自分の好きな画像のアドレスを打ち込めば完了です。
画像の使い方ですが、ファイルのアップロードから
タイトル画像にしたいファイルをアップロードして、投稿するを選んだ後に出てくる
img src="http://blog.livedoor.jp/自分のID/ファイル名"
という文章の""の中身を貼り付けるといいと思います。

次によくあるトラブルのサイドバー(リストとか最新記事とか載ってる)が
落ちるのを直すことにチャレンジしましょう。

・落ちたサイドバーを直す

サイドバーが落ちてしまうのは全体として設定しているの長さより
実際のメイン+サイドバーの長さが長いときに起きます。
これを直すためには
1.全体の長さを長くする
2.メインとサイドバーの長さを短くする
の二通りがあります。

二つまとめてやり方を説明します。
全体の長さに関する記述は上の方の
#container{
         width:○○px;
にあたります。
そして、本文の載るメインは
#content{
         width:△△px;
の部分です。
最後にサイドバーの記述は
#links{
         width:□□px;
にあたります。

ここで、○○が△△+□□よりも短い場合サイドバーが落ちます(他にも原因はあるそうですが)
そこで数字をいじって○○の長さを少し長めに設定してみてください。
直りましたか?

・タイトル部分の文字位置を変更する

身近にこの問題で困っている人がいたので、
ニーズがあると思って書いておきます。
この部分は
.blogtitle{
         margin:○ ○ ○ ○;

.description{
         margin:○ ○ ○ ○;
にあたります。
blogtitleがそのまんまタイトルのことで、
descriptionがタイトルの下の説明文に当たります。
そしてmargin以降がどの場所に配置するかの設定になります。
4つの数字で指定するのですが、左から順番に
上、右、下、左となっています。
どれぐらいスペースを空けるかを数値を入れることで変更します。
例えば、margin:40px 0 25px 0;
だと上を40px、下を25px分スペースを作ることになります。
pxってどれぐらいの長さを表す単位なのかわからないので、
これまた試行錯誤して頑張ってください(笑)

最後にフォントのサイズをもう少し大きくしたいって人に

・フォントサイズを変更する

これは各所にある
font-size:~~~;
の~~~部分を変更すればいけます。
pxで数値指定してもいいし、xx-smallやx-smallといったように言葉で指定してもいいです。

最後の作業として、保存するをクリックしてから
Blogの再構築のCSS部分を更新します。
これで反映されるはずです。

ちょっとわかりにくい説明でしたが、うまくいきましたでしょうか?
まだまだ勉強中なので、もうちょっとうまく説明できるようになったら
また説明をしたいなと思います。

スタイルシートについてお勧めのサイトを紹介して終わります。

とほほのスタイルシート入門
初心者向けにわかりやすい説明をしてくれています。
custom design
livedoor Blogのスタイルシートについて説明されたブログです。

長くなりましたが、頑張ってチャレンジしてみてください。
そして、俺に詳しくスタイルシートを教えてください(笑)
スポンサーサイト

この記事へのコメント

コメントを書く

管理人にのみ表示

この記事へのトラックバック

この記事にトラックバックする(FC2ブログユーザー)

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