Top＞
スタイルシート(ＣＳＳ)＞CSSを編集してページの基本設定をしてみよう！
■CSSを編集してページの基本設定をしてみよう！
スポンサードリンク
皆さん、CSS(スタイルシート)の編集できているでしょうか？
それともやはり私の説明が拙いばっかりに、まだまだ何の事だかまったくわからないでしょうか？
基本設定につきましては､カテゴリ「スタイルシート(CSS)」を参考にしていただきたいと思います。
今日から少しずつではありますが､具体的にCSSの編集について説明していこうと思います。
分からない部分がありましたら、遠慮なく言ってください。
但し､何度も言っておりますが､Seesaaカスタマイズに関しては､自己責任でお願いします。
スタイルシートの編集をするときは、メモ帳などにバックアップを取っておきましょう。
今日は､ページの基本設定に関してお話していきたいと思います。
リニューアル前との比較(２箇所)もあわせてで説明していきます。
今回は、長くなるので先に順位を確認！
Seesaaブログ
にはもう登録した？
変更する部分は､セレクタの説明の時にもでてきました以下の部分です。
まずは、皆さんのスタイルシートで自分で編集したいと思う部分のセレクタを探してください。
見つかりましたか？
私のリニューアル前のブログの設定は､以下のようになっていました。
編集したところ(２箇所)のみ赤字にしております。
本当はもう少し多いのですがデザインに影響のないものは削除しております。
編集する時は、「プロパティ(属性)と値について」もあわせてご覧下さい。
ここでは、よく編集する以下の５つにについて、説明していこうと思います。 １.body(ブログ全体)の説明です。
今回のリニューアルで、背景色をbackground:#FFC;から#ffffff(白)に編集しました。
こちらのカラーコード表を参考にしてください。
また、背景は色だけでなく画像も使う事が出来ます。
基本は､カラー・バックグラウンド(背景)に関わる物で説明しております。
text-align:center;は、ブログ全体の配置を決定するものです。
これを、leftにすれば、左によりますし､rightにすると右側によります。
基本は､ﾃｷｽﾄ(文字の配置や行間)に関する物で説明しております。
２.container(すべての要素を入れる箱)の説明です。
この値を増やせばもっと幅が広くなりますが､ブラウザでお気に入りをサイドバーにだして、閲覧している方には、はみ出して表示されてしまうので､できるだけ800px以内で設定するのがいいと思います。
先ほど同様に、今回のリニューアルでは､背景色に関して､色を変えました。
３.banner(ページ上部のタイトル部分)の説明です。
boderの詳しい説明は､ﾎﾞｰﾀﾞｰ(枠線)に関する物を参考にしてください。
margin、padding、widthに関しては､先ほどのcontainerを参考にしてください。
backgroud(背景)は、bodyと同様に画像を使う事もできます。
４.content(メイン部分)の説明です。
float:left;にする事で、contentが、左サイドバーの下に落ちる事を防いでいます。
自分のブログを最小化して､このcontent部分がサイドバーの下に落ちる人は､
containerの設定(width)をしたあと、この設定(float:left;)をしてみてください。
widthは、幅の指定です。
指定は､％、pxでもどちらでもいいです。
但し､containerの設定をしていない人が、この設定を％ですると、最大化したときは､その画面に対する割合になるので、自分の想定していない状況になる事があります。
注意してください。
５.links-left(左サイドバー)、links(右サイドバーの設定)の説明です。
詳しくは､フォントに関わる物を参考にしてください。
widthは、先ほどのcontentと同様に%、px、どちらでも構いません。
floatは、leftにしないと、先ほど同様メインが落ちる可能性があります。
marginについても、自分の好きなように設定してください。
これでブログの基本設定は､終了です。
皆さんも私の説明を参考に色々試してみてください。
編集してみてここが分からないなど、質問がありましたら、遠慮なくコメントしてください。
その際は､自分のブログを教えていただけたら具体的な説明ができると思います。
ランキング参加中！
それともやはり私の説明が拙いばっかりに、まだまだ何の事だかまったくわからないでしょうか？
基本設定につきましては､カテゴリ「スタイルシート(CSS)」を参考にしていただきたいと思います。
今日から少しずつではありますが､具体的にCSSの編集について説明していこうと思います。
分からない部分がありましたら、遠慮なく言ってください。
但し､何度も言っておりますが､Seesaaカスタマイズに関しては､自己責任でお願いします。
スタイルシートの編集をするときは、メモ帳などにバックアップを取っておきましょう。
今日は､ページの基本設定に関してお話していきたいと思います。
リニューアル前との比較(２箇所)もあわせてで説明していきます。
今回は、長くなるので先に順位を確認！
にはもう登録した？変更する部分は､セレクタの説明の時にもでてきました以下の部分です。
body
container
| |||||||||
- body＝BLOG全体
- container＝以下の部品を入れる箱だと思ってください。(テンプレートによってはないものもあるかもしれません。)
- banner＝TOPの背景
- links-left＝左サイドバー
- content＝記事全体
- links＝右サイドバー
- footer＝BLOG最下部
まずは、皆さんのスタイルシートで自分で編集したいと思う部分のセレクタを探してください。
見つかりましたか？
私のリニューアル前のブログの設定は､以下のようになっていました。
編集したところ(２箇所)のみ赤字にしております。
本当はもう少し多いのですがデザインに影響のないものは削除しております。
編集する時は、「プロパティ(属性)と値について」もあわせてご覧下さい。
ここでは、よく編集する以下の５つにについて、説明していこうと思います。 １.body(ブログ全体)の説明です。
body {margin:0px;、padding: 0px;とすることで、いらぬ余白が入らないようになっています。
margin:0px;
padding: 0px;
background:#FFC;
text-align:center;
}
今回のリニューアルで、背景色をbackground:#FFC;から#ffffff(白)に編集しました。
こちらのカラーコード表を参考にしてください。
また、背景は色だけでなく画像も使う事が出来ます。
基本は､カラー・バックグラウンド(背景)に関わる物で説明しております。
text-align:center;は、ブログ全体の配置を決定するものです。
これを、leftにすれば、左によりますし､rightにすると右側によります。
基本は､ﾃｷｽﾄ(文字の配置や行間)に関する物で説明しております。
２.container(すべての要素を入れる箱)の説明です。
#container {widthは、幅です。
width:800px;
margin:0px;
padding: 0px;
background:#FFC;
text-align:left;
}
この値を増やせばもっと幅が広くなりますが､ブラウザでお気に入りをサイドバーにだして、閲覧している方には、はみ出して表示されてしまうので､できるだけ800px以内で設定するのがいいと思います。
先ほど同様に、今回のリニューアルでは､背景色に関して､色を変えました。
３.banner(ページ上部のタイトル部分)の説明です。
#banner{borderを設定する事で、バナーが枠線で囲まれます。
border:1px solid #666;
margin:0px;
width:100%;
padding:10px;
background:#94ff72;
}
boderの詳しい説明は､ﾎﾞｰﾀﾞｰ(枠線)に関する物を参考にしてください。
margin、padding、widthに関しては､先ほどのcontainerを参考にしてください。
backgroud(背景)は、bodyと同様に画像を使う事もできます。
４.content(メイン部分)の説明です。
#content {contentについては、marginをbottom、top、left、rightそれぞれについて､設定しています。
margin-bottom:30px;
margin-top:0px;
margin-left:5px;
margin-right: 0px;
float:left;
width:73%;
}
float:left;にする事で、contentが、左サイドバーの下に落ちる事を防いでいます。
自分のブログを最小化して､このcontent部分がサイドバーの下に落ちる人は､
containerの設定(width)をしたあと、この設定(float:left;)をしてみてください。
widthは、幅の指定です。
指定は､％、pxでもどちらでもいいです。
但し､containerの設定をしていない人が、この設定を％ですると、最大化したときは､その画面に対する割合になるので、自分の想定していない状況になる事があります。
注意してください。
５.links-left(左サイドバー)、links(右サイドバーの設定)の説明です。
#links-left {私は､フォントの設定に､bold(太字)を用いていますが､特にこの設定は､しなくてもいいと思います。
font-weight:bold;
width:25%;
float:left;
margin-right: 5px;
margin-top:0px;
}
詳しくは､フォントに関わる物を参考にしてください。
widthは、先ほどのcontentと同様に%、px、どちらでも構いません。
floatは、leftにしないと、先ほど同様メインが落ちる可能性があります。
marginについても、自分の好きなように設定してください。
#links {links-leftと同様に自分で好きなように設定してみてください。
font-weight:normal;
width:20%;
float:left;
margin-left: 5px;
margin-right: 5px;
margin-top:25px; }
これでブログの基本設定は､終了です。
皆さんも私の説明を参考に色々試してみてください。
編集してみてここが分からないなど、質問がありましたら、遠慮なくコメントしてください。
その際は､自分のブログを教えていただけたら具体的な説明ができると思います。
ランキング参加中！
ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→
Seesaaブログ
最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→
RSSをRSSリーダーに登録しても便利だと思います。
スポンサードリンク
最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→
RSSをRSSリーダーに登録しても便利だと思います。
| ■人気記事ベスト５ | |
この記事へのコメント
初めましてー。
昨日からSeeSaaブログ始めまして、いろいろ設定するのに参考にさせていただいてます。
「シンプルホワイト」のスタイルシートをちょこちょこいじってるんですが分からない事が・・・。
記事の追記「続きを読む」を表示させると左サイドバーの下に落ちてしまうんです。
アドバイスいただけると有り難いです。
昨日からSeeSaaブログ始めまして、いろいろ設定するのに参考にさせていただいてます。
「シンプルホワイト」のスタイルシートをちょこちょこいじってるんですが分からない事が・・・。
記事の追記「続きを読む」を表示させると左サイドバーの下に落ちてしまうんです。
アドバイスいただけると有り難いです。
Posted by みち子 at 2005年04月16日 23:58
はじめまして、みち子さん。
> 昨日からSeeSaaブログ始めまして、
> いろいろ設定するのに参考にさせていただいてます。
> 「シンプルホワイト」のスタイルシートを
> ちょこちょこいじってるんですが分からない事が・・・。
> 記事の追記「続きを読む」を表示させると
> 左サイドバーの下に落ちてしまうんです。
ブログ拝見させて頂きました。
ブログ初心者の方ですか？それとも他でブログをやっていたけど、
日記だけSeesaaに引っ越してきたという事でしょうか？
もし始めたばかりであれば､いきなり設定をいじるのは､
結構無謀かなと思うんですが…。
もし、他でやられていたのであれば､これで分かっていただけるでしょうか？
スタイルシートに､containerを追加して､widthで幅を設定して､
links-left、contentでもwidthの設定をしてみてください。
おそらくこれでできると思います。
これで解決しない場合は､サイドバーの下に落ちる現象については､
今後記事にするつもりだったので､そちらを参考にして下さい。
> 昨日からSeeSaaブログ始めまして、
> いろいろ設定するのに参考にさせていただいてます。
> 「シンプルホワイト」のスタイルシートを
> ちょこちょこいじってるんですが分からない事が・・・。
> 記事の追記「続きを読む」を表示させると
> 左サイドバーの下に落ちてしまうんです。
ブログ拝見させて頂きました。
ブログ初心者の方ですか？それとも他でブログをやっていたけど、
日記だけSeesaaに引っ越してきたという事でしょうか？
もし始めたばかりであれば､いきなり設定をいじるのは､
結構無謀かなと思うんですが…。
もし、他でやられていたのであれば､これで分かっていただけるでしょうか？
スタイルシートに､containerを追加して､widthで幅を設定して､
links-left、contentでもwidthの設定をしてみてください。
おそらくこれでできると思います。
これで解決しない場合は､サイドバーの下に落ちる現象については､
今後記事にするつもりだったので､そちらを参考にして下さい。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月17日 22:54
先ほどの補足になりますが､
最近のテンプレートならサイドバーの下には､
落ちないようです。
もしシンプルホワイトを編集して設定できない場合は､
お試しください。
最近のテンプレートならサイドバーの下には､
落ちないようです。
もしシンプルホワイトを編集して設定できない場合は､
お試しください。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月17日 23:23
はじめましてケンジさん
最近ブログ作成にはまっている、るると言います
教えて君で申し訳ないのですがケンジさんのページではトップの各カテゴリーをクリックすると個別のカテゴリの記事一覧がメインに表示されてますよね。これは便利だと思い自分でも挑戦してみたのですがどうしてもうまくいきません…
(どのカテゴリーをクリックしても同じ記事一覧がでてしまうのです）どのようにすれば適切なカテゴリの記事一覧を作成することができるのでしょうか？
アドバイスお願いいたします。
最後にケンジさんのブログはいつも大変参考にみています。これからもよろしくお願いします。
追伸〜どこに質問を書いてよいか分からず最新記事に書いてしまいました。すみません。
最近ブログ作成にはまっている、るると言います
教えて君で申し訳ないのですがケンジさんのページではトップの各カテゴリーをクリックすると個別のカテゴリの記事一覧がメインに表示されてますよね。これは便利だと思い自分でも挑戦してみたのですがどうしてもうまくいきません…
(どのカテゴリーをクリックしても同じ記事一覧がでてしまうのです）どのようにすれば適切なカテゴリの記事一覧を作成することができるのでしょうか？
アドバイスお願いいたします。
最後にケンジさんのブログはいつも大変参考にみています。これからもよろしくお願いします。
追伸〜どこに質問を書いてよいか分からず最新記事に書いてしまいました。すみません。
Posted by るる at 2005年04月18日 13:50
はじめまして、るるさん。
> 最近ブログ作成にはまっている、るると言います
> 教えて君で申し訳ないのですがケンジさんのページではトップの
> 各カテゴリーをクリックすると個別のカテゴリの記事一覧が
> メインに表示されてますよね。これは便利だと思い自分でも
> 挑戦してみたのですがどうしてもうまくいきません…
>
教えて君は､かまいませんが、名前に自分のブログのリンクを
貼って頂いてよろしいですか？
今回､コメントに関して､記事に追加させて頂きました。
http://blogdehp.seesaa.net/article/3024890.html
質問の件ですが､そのカスタマイズに関しても
今後紹介していくつもりです。
もうしばらくお待ちください。
今後ともよろしくお願いします。
> 最近ブログ作成にはまっている、るると言います
> 教えて君で申し訳ないのですがケンジさんのページではトップの
> 各カテゴリーをクリックすると個別のカテゴリの記事一覧が
> メインに表示されてますよね。これは便利だと思い自分でも
> 挑戦してみたのですがどうしてもうまくいきません…
>
教えて君は､かまいませんが、名前に自分のブログのリンクを
貼って頂いてよろしいですか？
今回､コメントに関して､記事に追加させて頂きました。
http://blogdehp.seesaa.net/article/3024890.html
質問の件ですが､そのカスタマイズに関しても
今後紹介していくつもりです。
もうしばらくお待ちください。
今後ともよろしくお願いします。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月18日 16:37
＞管理人様
アドバイスありがとうございます。
シンプルホワイトに手を加えるのではまだ難しそうなので他のテンプレ使ってみます。
もともとHPを持ってて、日記をブログにしたくて始めたんです。HPもHP作成ソフトで作ってたんでほとんど初心者ですね。やっぱりいきなりCSSをいじるのは無謀でした（苦笑。
これからも参考にさせていただきます！
アドバイスありがとうございます。
シンプルホワイトに手を加えるのではまだ難しそうなので他のテンプレ使ってみます。
もともとHPを持ってて、日記をブログにしたくて始めたんです。HPもHP作成ソフトで作ってたんでほとんど初心者ですね。やっぱりいきなりCSSをいじるのは無謀でした（苦笑。
これからも参考にさせていただきます！
Posted by みち子 at 2005年04月19日 01:33
みち子さん､こんばんは。
> シンプルホワイトに手を加えるのでは
> まだ難しそうなので他のテンプレ使ってみます。
ブログ拝見させて頂きました。
サイドバーの下に落ちずにばっちりになってましたね(^_^)
> もともとHPを持ってて、日記をブログにしたくて始めたんです。
> HPもHP作成ソフトで作ってたんでほとんど初心者ですね。
> やっぱりいきなりCSSをいじるのは無謀でした（苦笑。
そうだったんですか。
けど、向上心を持つことは､とてもいいとこだと思うので
少しずつ前進できたらいいですね。
今後ともよろしくお願いします。
> シンプルホワイトに手を加えるのでは
> まだ難しそうなので他のテンプレ使ってみます。
ブログ拝見させて頂きました。
サイドバーの下に落ちずにばっちりになってましたね(^_^)
> もともとHPを持ってて、日記をブログにしたくて始めたんです。
> HPもHP作成ソフトで作ってたんでほとんど初心者ですね。
> やっぱりいきなりCSSをいじるのは無謀でした（苦笑。
そうだったんですか。
けど、向上心を持つことは､とてもいいとこだと思うので
少しずつ前進できたらいいですね。
今後ともよろしくお願いします。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月19日 01:48
こんにちは。はじめまして！Seesaaブログにお引越ししてきて、まだ数日しかたっていないのですが、ケンジさんのお陰で色々なことが少しずつ分かるようになってきました。
ところで、ブログ背景の色は変更できたのですが
その他の（タイトル、記事、サイドバーの文字色、ブログタイトルなど）を変えたいのですが、編集画面のどこに入れれば良いのかわかりません。よろしければ教えてください。
あと、ブログタイトルがメインページに二箇所（左と右）にも表示されてしまっていて消えないのですが何か原因があるのでしょうか？
質問だらけで申し訳ございません。
ところで、ブログ背景の色は変更できたのですが
その他の（タイトル、記事、サイドバーの文字色、ブログタイトルなど）を変えたいのですが、編集画面のどこに入れれば良いのかわかりません。よろしければ教えてください。
あと、ブログタイトルがメインページに二箇所（左と右）にも表示されてしまっていて消えないのですが何か原因があるのでしょうか？
質問だらけで申し訳ございません。
Posted by さち at 2005年09月09日 12:40
こんにちは、さちさん。
カスタマイズお疲れ様です。
今回の質問に関しては、こちらの記事が参考になると思います。
http://blogdehp.seesaa.net/article/2975367.html
ブログタイトルが２つ出ることに関しては、
私もちょっと分からないですね。
コンテンツを確認して２つあるなら１つ消してみてください。
カスタマイズに関しては、他にも色々と記事を書いているので時間があるときにでも見てください。
カスタマイズお疲れ様です。
今回の質問に関しては、こちらの記事が参考になると思います。
http://blogdehp.seesaa.net/article/2975367.html
ブログタイトルが２つ出ることに関しては、
私もちょっと分からないですね。
コンテンツを確認して２つあるなら１つ消してみてください。
カスタマイズに関しては、他にも色々と記事を書いているので時間があるときにでも見てください。
Posted by Seesaa大好きケンジ(管理人) at 2005年09月10日 14:44
初めまして。
いつも大変参考にさせて頂いております。
どうしても分からないことがあるので
ご教示ください。
プログ全体の横幅が狭いので1.3〜1.5倍くらいに
したいのです。
スイタイルシート変更の件ですが
.container が見当たりません。
どうしたら宜しいでしょうか？
お忙しいところ恐縮ですがアドバイスお願いします。
いつも大変参考にさせて頂いております。
どうしても分からないことがあるので
ご教示ください。
プログ全体の横幅が狭いので1.3〜1.5倍くらいに
したいのです。
スイタイルシート変更の件ですが
.container が見当たりません。
どうしたら宜しいでしょうか？
お忙しいところ恐縮ですがアドバイスお願いします。
Posted by ななみ at 2005年09月18日 22:24
こんにちは。カフンと言います。
いつも参考にさせていただいてます。
サイトマップを作りたいのですがどこから入って良いのか分かりません。
「デザイン」→「コンテンツ」→「記事の設定」→「挿入テキスト(上部)」まで行って「挿入テキスト(上部)」で編集すればいいのでしょうか？
お時間のあるとき教えて下さい。
いつも参考にさせていただいてます。
サイトマップを作りたいのですがどこから入って良いのか分かりません。
「デザイン」→「コンテンツ」→「記事の設定」→「挿入テキスト(上部)」まで行って「挿入テキスト(上部)」で編集すればいいのでしょうか？
お時間のあるとき教えて下さい。
Posted by カフン at 2006年03月18日 12:48
はじめまして。ちょびといいます。
ブログをはじめたばかりで参考にさせてもらっています。
スタイルシートを初期値に戻しても右サイドバーが戻らなくなってしまいました。
コンテンツ一覧では右サイドバーになっているの
ですが…
もとに戻すにはどうしたらよいですか？
よろしくお願いしますッ！
応援ポチッとΣd(ゝ∀・)
ブログをはじめたばかりで参考にさせてもらっています。
スタイルシートを初期値に戻しても右サイドバーが戻らなくなってしまいました。
コンテンツ一覧では右サイドバーになっているの
ですが…
もとに戻すにはどうしたらよいですか？
よろしくお願いしますッ！
応援ポチッとΣd(ゝ∀・)
Posted by ちょび at 2006年05月10日 18:30
はじめまして。ずっと困っていた事がこちらで解決しそうです。
問題はバナーだと思うのですが、バナーと下のcontentやlinksが
バナーの画像と重なって記事の上の方がみられないのです。
スタイルシートでの編集をしり、いろいろやってみた所、
プレビューではバナー画像と記事がかさならずに見れるようになりましたが、
スタイルシートを変更するの、ボタンを押しても、
実際のブログのページでみると変更されていません。
再構築をしてみましたが、それでも変わっていませんでした。
プレビューでは、ちゃんと変更した物がみれます。
下記のようにしてみました。
#banner{
margin:0px;
text-align:left;
height:280px;
}
.description {
font-family:Verdana;
font-weight:bold;
padding:0px 10px 0px 0px;
}
なにか、解決法を教えて頂けませんか？
もう少しだと思うのですが、、、
問題はバナーだと思うのですが、バナーと下のcontentやlinksが
バナーの画像と重なって記事の上の方がみられないのです。
スタイルシートでの編集をしり、いろいろやってみた所、
プレビューではバナー画像と記事がかさならずに見れるようになりましたが、
スタイルシートを変更するの、ボタンを押しても、
実際のブログのページでみると変更されていません。
再構築をしてみましたが、それでも変わっていませんでした。
プレビューでは、ちゃんと変更した物がみれます。
下記のようにしてみました。
#banner{
margin:0px;
text-align:left;
height:280px;
}
.description {
font-family:Verdana;
font-weight:bold;
padding:0px 10px 0px 0px;
}
なにか、解決法を教えて頂けませんか？
もう少しだと思うのですが、、、
Posted by なお at 2008年01月05日 19:35
コメントを書く
特に､質問される方は､名前に自分のブログのリンク貼ってください。
リンクがない場合は､基本的に返事をしないつもりです。私一人で運営しておりますので､ご理解の程よろしくお願いします。
当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう！
トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。
特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。