Top＞
スタイルシート(ＣＳＳ)＞CSS(スタイルシート)の基本その１〜セレクタについて〜
■CSS(スタイルシート)の基本その１〜セレクタについて〜
スポンサードリンク
今日は、スタイルシートを編集する際にとても大事な「セレクタ」についてもう少し詳しく説明していきますね。
最初はよく分からないと思いますが、読んでいくうちに少しでも分かっていただけたら幸いです。
自分で編集していくことでなんとなく分かってくると思います。
特に､アフィリエイトに挑戦される方は､CSS編集ができたらだいぶ自由度が増します。
どんどん挑戦していってください。
ランキングに参加中！←今回は、長くなるので記事を読む前に応援お願いします！
Seesaaブログ
にはもう登録した？
皆さん、自分のスタイルシートを一度は見ていただけましたか？
まだ見てない方がほとんどだと思うので今日は、自分のスタイルシートも表示してどんな風に使われているか見てください。
やっぱり説明を聞くだけでは、分かりにくい面があると思います。
「習うより慣れろ」なんで頑張っていきましょう！
前回紹介すればよかったのですが、忘れていましたのでオフィシャルページを紹介しておきます。
結構詳しく説明してあるので参考にされてください。
今日は、かなり引用しています。
ブログの基本的なセレクタの構成は、以下のようになっています。(テンプレート追加中より引用。)
ちなみにこれは、両サイドにサイドバーがある場合です。
body
ご自分のスタイルシートの中から見つけることが出来ましたでしょうか？
ここの部分を編集することによって自分のブログをカスタマイズしていくことが可能です。
次は、先ほどとかぶる部分もありますが、少し細かいセレクタの構成になります。(CSSについてその5より引用)
次に、content(記事本文)のセレクタは以下のようになっています。(CSSについてその6より引用)
本当は、Ｈ３よりＨ２の方が重要度は、高いのでＨＴＭＬ編集をして記事の日付のＨ２と記事のタイトルのＨ３を入れ替えた方がいいのですが、今話すとこんがらがると思うので、それはまた後日紹介したいと思います。
今日は、これで終わりにしようと思います。
スタイルシートのどこをを編集したら、ブログのデザインのどこが変わるか少しは分かっていただけたでしょうか？
スタイルシートの説明は難しいのでどうやったら一番いいのか私自身まだ分かりかねています。
今の説明で少しでも分かっていただけているのならいいのですが、まったく分からないという方がいたらどこが分からないかコメントして頂けたら幸いです。
次回は、このセレクタの編集の仕方を説明していこうと思います。
ランキングに参加中！←応援お願いします！
最初はよく分からないと思いますが、読んでいくうちに少しでも分かっていただけたら幸いです。
自分で編集していくことでなんとなく分かってくると思います。
特に､アフィリエイトに挑戦される方は､CSS編集ができたらだいぶ自由度が増します。
どんどん挑戦していってください。
ランキングに参加中！←今回は、長くなるので記事を読む前に応援お願いします！
にはもう登録した？皆さん、自分のスタイルシートを一度は見ていただけましたか？
まだ見てない方がほとんどだと思うので今日は、自分のスタイルシートも表示してどんな風に使われているか見てください。
やっぱり説明を聞くだけでは、分かりにくい面があると思います。
「習うより慣れろ」なんで頑張っていきましょう！
前回紹介すればよかったのですが、忘れていましたのでオフィシャルページを紹介しておきます。
結構詳しく説明してあるので参考にされてください。
今日は、かなり引用しています。
ブログの基本的なセレクタの構成は、以下のようになっています。(テンプレート追加中より引用。)
ちなみにこれは、両サイドにサイドバーがある場合です。
body
container
| |||||||||
- body＝BLOG全体
- container＝以下の部品を入れる箱だと思ってください。(テンプレートによってはないものもあるかもしれません。)
- banner＝TOPの背景
- links-left＝左サイドバー
- content＝記事全体
- links＝右サイドバー
- footer＝BLOG最下部
ご自分のスタイルシートの中から見つけることが出来ましたでしょうか？
ここの部分を編集することによって自分のブログをカスタマイズしていくことが可能です。
次は、先ほどとかぶる部分もありますが、少し細かいセレクタの構成になります。(CSSについてその5より引用)
- H1＝BLOGのタイトル
- description＝BLOGの紹介文
次に、content(記事本文)のセレクタは以下のようになっています。(CSSについてその6より引用)
- blog＝記事全体
- H2＝記事の日付
- date＝記事の日付。Ｈ２との区別が分かりにくいかもしれませんが、日付の行と思って頂いたらいいと思います。
- blogbody＝記事の日付を除いた記事全体。同じ日に、複数の記事を投稿する場合は、blogbodyがその日の記事数分表示されることになります
- H3＝記事のタイトル
- title＝記事のタイトル。Ｈ３との区別が分かりにくいかもしれませんが、タイトルの行と思って頂いたらいいと思います。
- text＝記事本文
- posted＝「posted by 〜」の箇所で名前や日付などにあたります。
本当は、Ｈ３よりＨ２の方が重要度は、高いのでＨＴＭＬ編集をして記事の日付のＨ２と記事のタイトルのＨ３を入れ替えた方がいいのですが、今話すとこんがらがると思うので、それはまた後日紹介したいと思います。
今日は、これで終わりにしようと思います。
スタイルシートのどこをを編集したら、ブログのデザインのどこが変わるか少しは分かっていただけたでしょうか？
スタイルシートの説明は難しいのでどうやったら一番いいのか私自身まだ分かりかねています。
今の説明で少しでも分かっていただけているのならいいのですが、まったく分からないという方がいたらどこが分からないかコメントして頂けたら幸いです。
次回は、このセレクタの編集の仕方を説明していこうと思います。
ランキングに参加中！←応援お願いします！
ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→
Seesaaブログ
最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→
RSSをRSSリーダーに登録しても便利だと思います。
スポンサードリンク
最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→
RSSをRSSリーダーに登録しても便利だと思います。
| ■人気記事ベスト５ | |
この記事へのコメント
ケンジさん、こんにちは！
ケンジさんのこのブログに出会ったおかげで、ブログ立ち上げに踏み切り、少しずつでも作り上げていくことを楽しんでいます（もちろん、Seesaaです）、ありがとうございます。ほんと超初心者が見切り発車したものですから、既定の構築を整えていくことさえもアップアップです。
こんな僕でもカウンターや「現在の閲覧者は○人です」を貼りたいのですが、難しいのでしょうか？検索してみると「設置用タグを貼りたい場所に貼り付ければいいだけ」と教えられていることが多いのですが、それ自体？？？（そのタグをブログ画面に直接コピぺできるわけもなく）
これは今回のスタイルシートの構造に手を加えてカスタマイズする作業のひとつですか？HTMLの知識がなければやめといたほうがいいのですか？
ネタは日々の生業のことですし、幸いにも更新が日課にできる時間の余裕はありますので、ぜひ続けてよいものにしていきたいのですが。
お忙しいところ申し訳ないですが、このコメント目に留まりましたら、お教えいただけないでしょうか？
ケンジさんのこのブログに出会ったおかげで、ブログ立ち上げに踏み切り、少しずつでも作り上げていくことを楽しんでいます（もちろん、Seesaaです）、ありがとうございます。ほんと超初心者が見切り発車したものですから、既定の構築を整えていくことさえもアップアップです。
こんな僕でもカウンターや「現在の閲覧者は○人です」を貼りたいのですが、難しいのでしょうか？検索してみると「設置用タグを貼りたい場所に貼り付ければいいだけ」と教えられていることが多いのですが、それ自体？？？（そのタグをブログ画面に直接コピぺできるわけもなく）
これは今回のスタイルシートの構造に手を加えてカスタマイズする作業のひとつですか？HTMLの知識がなければやめといたほうがいいのですか？
ネタは日々の生業のことですし、幸いにも更新が日課にできる時間の余裕はありますので、ぜひ続けてよいものにしていきたいのですが。
お忙しいところ申し訳ないですが、このコメント目に留まりましたら、お教えいただけないでしょうか？
Posted by Katsu at 2005年03月31日 12:15
はじめまして、Katsuさん。
ブログ開設おめでとうございます。Seesaa仲間が増えて嬉しいです。
> こんな僕でもカウンターや「現在の閲覧者は○人です」を貼りたいのですが、難しいのでしょうか？検索してみると「設置用タグを貼りたい場所に貼り付ければいいだけ」と教えられていることが多いのですが、それ自体？？？（そのタグをブログ画面に直接コピぺできるわけもなく）
> これは今回のスタイルシートの構造に手を加えてカスタマイズする作業のひとつですか？HTMLの知識がなければやめといたほうがいいのですか？
質問ですけど、これはスタイルシートを編集するのでなく、デザインのコンテンツ機能を追加してカスタマイズしていきます。詳しくは、スタイルシートの解説が一段楽してからコンテンツ機能について紹介していこうと思っています。
せっかく質問がありましたので、簡単ではありますが、やり方を書いておきますね。これを見て何とか自分で頑張っていただきたいです。これで分からなかったらもう少しお待ち頂ければ幸いです。
あと、記事にも書いていますが、カスタマイズに関してはアドバイスは致しますが、自己責任でお願いします。
また、参考URLは、http://blog-help.seesaa.net/article/1606567.htmlです。
まずは、デザインのコンテンツにいって、新しいコンテンツの追加をします。
その際、種類は自由形式、追加先ページは自分が表示させたいページです。カウンターなら全ページでいいと思います。
配置は自分の設置したい場所です。サイドバーが一般的だと思います。
順番は、サイドバーの順番です。他のサイドバーを見ながら設定してください。
これで、設定が終わったらコンテンツの追加をクリックします。
クリックしたら自由形式の設定画面にタイトルを入力します。これは、コンテンツの設定画面のタイトルでありサイドバーに表示されるものではありません。
次に、自由入力欄に自分で設置したい設置用タグを貼り付けます。
これで、作業は完了です。保存を押して最後にすべて再構築してください。
ちょっと分かりにくかったかもしれませんが、これで出来ると思います。
今後とも宜しくお願いします。
追伸、ブログ拝見させて頂きました。今は、株式投資に限らず、資産運用に興味を持っている人はたくさんいると思うのでとても需要は高いと思います。その分競争相手も多いわけですが…。
私も資産運用に興味を持っています。これから勉強していきたいと思っています。
これからもたまに覗かせていただきますね。
ブログ開設おめでとうございます。Seesaa仲間が増えて嬉しいです。
> こんな僕でもカウンターや「現在の閲覧者は○人です」を貼りたいのですが、難しいのでしょうか？検索してみると「設置用タグを貼りたい場所に貼り付ければいいだけ」と教えられていることが多いのですが、それ自体？？？（そのタグをブログ画面に直接コピぺできるわけもなく）
> これは今回のスタイルシートの構造に手を加えてカスタマイズする作業のひとつですか？HTMLの知識がなければやめといたほうがいいのですか？
質問ですけど、これはスタイルシートを編集するのでなく、デザインのコンテンツ機能を追加してカスタマイズしていきます。詳しくは、スタイルシートの解説が一段楽してからコンテンツ機能について紹介していこうと思っています。
せっかく質問がありましたので、簡単ではありますが、やり方を書いておきますね。これを見て何とか自分で頑張っていただきたいです。これで分からなかったらもう少しお待ち頂ければ幸いです。
あと、記事にも書いていますが、カスタマイズに関してはアドバイスは致しますが、自己責任でお願いします。
また、参考URLは、http://blog-help.seesaa.net/article/1606567.htmlです。
まずは、デザインのコンテンツにいって、新しいコンテンツの追加をします。
その際、種類は自由形式、追加先ページは自分が表示させたいページです。カウンターなら全ページでいいと思います。
配置は自分の設置したい場所です。サイドバーが一般的だと思います。
順番は、サイドバーの順番です。他のサイドバーを見ながら設定してください。
これで、設定が終わったらコンテンツの追加をクリックします。
クリックしたら自由形式の設定画面にタイトルを入力します。これは、コンテンツの設定画面のタイトルでありサイドバーに表示されるものではありません。
次に、自由入力欄に自分で設置したい設置用タグを貼り付けます。
これで、作業は完了です。保存を押して最後にすべて再構築してください。
ちょっと分かりにくかったかもしれませんが、これで出来ると思います。
今後とも宜しくお願いします。
追伸、ブログ拝見させて頂きました。今は、株式投資に限らず、資産運用に興味を持っている人はたくさんいると思うのでとても需要は高いと思います。その分競争相手も多いわけですが…。
私も資産運用に興味を持っています。これから勉強していきたいと思っています。
これからもたまに覗かせていただきますね。
Posted by Seesaa大好きケンジ(管理人) at 2005年03月31日 13:12
始めまして、お忙しいところ大変恐縮です。初歩的な質問で大変恐縮ですが、第一歩から躓いてしまいました。下記の質問ですが、お答えいただけますと大変有難いのですが、よろしくお願いします。
１：一旦入力したブログ名は変更できないのでしょうか？
２：スタイルシートによっては、ブログ名の納まりが異なるのでしょうか？・・・毛面の途中、字句の途中から改行されて、画面の左端に寄せられてしまうのですが、修正するにはどうすればいいのでしょうか？
今は、この２点ですが、よろしくお願いします。
１：一旦入力したブログ名は変更できないのでしょうか？
２：スタイルシートによっては、ブログ名の納まりが異なるのでしょうか？・・・毛面の途中、字句の途中から改行されて、画面の左端に寄せられてしまうのですが、修正するにはどうすればいいのでしょうか？
今は、この２点ですが、よろしくお願いします。
Posted by 有水洋一 at 2005年04月02日 22:10
始めまして、お忙しいところ大変恐縮です。初歩的な質問で恐縮ですが、第一歩から躓いてしまいました。下記の質問に、お答えいただけますと大変有難いのですが、よろしくお願いします。
質１：一旦入力したブログ名は変更できないのでしょうか？
質２：スタイルシートによっては、ブログ名の納まりが異なるのでしょうか？・・・画面の途中（字句の途中）から改行していないのに改行され、画面の左端にブログタイトルが片寄ってしまいます。シート全体に広げるにはどうすればいいのでしょうか？
今はこの２点です。よろしくお願いします。
質１：一旦入力したブログ名は変更できないのでしょうか？
質２：スタイルシートによっては、ブログ名の納まりが異なるのでしょうか？・・・画面の途中（字句の途中）から改行していないのに改行され、画面の左端にブログタイトルが片寄ってしまいます。シート全体に広げるにはどうすればいいのでしょうか？
今はこの２点です。よろしくお願いします。
Posted by e-papa at 2005年04月02日 22:23
はじめまして、e-papaさん。
質問に答えますね。
> 質１：一旦入力したブログ名は変更できないのでしょうか？
ブログ名の変更は、可能です。
設定の中のブログ設定で、ブログタイトルを編集してからすべて再構築されてください。
やり方は､オフィシャルガイドにも書いてあります。
http://blog-help.seesaa.net/article/1579439.html
> 質２：スタイルシートによっては、ブログ名の納まりが異なるのでしょうか？・・・画面の途中（字句の途中）から改行していないのに改行され、画面の左端にブログタイトルが片寄ってしまいます。シート全体に広げるにはどうすればいいのでしょうか？
e-papaさんが、使われているテンプレートは､月夜(両サイドバー)ですよね？
タイトルが途中で改行されるようにはなっていませんし、
このようなことは、今回初めて聞きました。
私が、ただ知らないだけかもしれませんので参考程度にしてください。
気になるようでしたらテンプレートを変えるか､少し面倒ではありますが、
Seesaaに直接問い合わせるのがいいと思います。
質問に答えますね。
> 質１：一旦入力したブログ名は変更できないのでしょうか？
ブログ名の変更は、可能です。
設定の中のブログ設定で、ブログタイトルを編集してからすべて再構築されてください。
やり方は､オフィシャルガイドにも書いてあります。
http://blog-help.seesaa.net/article/1579439.html
> 質２：スタイルシートによっては、ブログ名の納まりが異なるのでしょうか？・・・画面の途中（字句の途中）から改行していないのに改行され、画面の左端にブログタイトルが片寄ってしまいます。シート全体に広げるにはどうすればいいのでしょうか？
e-papaさんが、使われているテンプレートは､月夜(両サイドバー)ですよね？
タイトルが途中で改行されるようにはなっていませんし、
このようなことは、今回初めて聞きました。
私が、ただ知らないだけかもしれませんので参考程度にしてください。
気になるようでしたらテンプレートを変えるか､少し面倒ではありますが、
Seesaaに直接問い合わせるのがいいと思います。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月03日 01:04
はじめまして。
ｃｓｓをいじってオリジナルを作りたいのですが
シーサーの「ブルー」(両サイドバー）を使って
バナーに画像を貼ったまではよかったのですが
記事エントリの部分の幅を％表記にして
広くとるところまで出来たのに
右サイドバーの部分が背景の色で
（要は白い部分からはみ出てしまってます）
サイドと記事を分ける境界線が元の位置のままなので白地の部分の幅の広げ方と縦線の位置の変更の仕方を教えていただけないでしょうか？
ｃｓｓをいじってオリジナルを作りたいのですが
シーサーの「ブルー」(両サイドバー）を使って
バナーに画像を貼ったまではよかったのですが
記事エントリの部分の幅を％表記にして
広くとるところまで出来たのに
右サイドバーの部分が背景の色で
（要は白い部分からはみ出てしまってます）
サイドと記事を分ける境界線が元の位置のままなので白地の部分の幅の広げ方と縦線の位置の変更の仕方を教えていただけないでしょうか？
Posted by Ageha at 2005年07月08日 17:16
コメントを書く
特に､質問される方は､名前に自分のブログのリンク貼ってください。
リンクがない場合は､基本的に返事をしないつもりです。私一人で運営しておりますので､ご理解の程よろしくお願いします。
当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう！
トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。
特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。