Style Sheets

ダイエット・ログをお使いの方のブログで、記事中の「一回目測定」「二回目測定」の画像がズレて表示されることがあります。
その際は、ご利用になっているスタイルシート中「.blog」の箇所に「font-size:12px;」を追加してください。

なお、上記修正を加えた場合、サイドに表示するコンテンツと文字サイズが異なってしまう場合がございます。
その際は、
.sidetitle
.side
.calendarhead
.calendarday
等のフォントサイズも合わせて修正を行って頂きますよう、お願い致します。

また、スタイルシートの変更を行った場合、以前の状態に戻すことが出来ませんので、変更する際にはご注意下さい。

本日、新しくダイエット機能が追加されました。
そこで、今回は記事欄に表示されるダイエット・ログの構成を作ってみました。

■ダイエットログの構成について
text

diet-container diet-content 目標体重：？？kg 目標までの残り：？？kg [ダイエットグラフ表示] diet diet-title 一回目測定 diet-content 体重 体脂肪率 ＢＭＩ diet-title 二回目測定 diet-content 体重 体脂肪率 ＢＭＩ diet-content 目標体重：？？kg 目標までの残り：？？kg [ダイエットグラフ表示] diet-foods 食事 food-title 朝食 food-content 朝食の内容 food-title 昼食 food-content 昼食の内容 food-title 夕食 food-content 夕食の内容 food-title おやつ food-content おやつの内容

■8月11日以前にブログを作成された方へ
機能追加以前(8月11日以前)にブログを作成された方は、スタイルシートにダイエットログ用の記述が入っていないため、ここのような表示ができません。
その場合、このサンプルページと同じ表示を行う場合は、
・以下の記述をスタイルシートに設定する。

#diet-container{
border:1px solid #999;
padding:5px;
margin-bottom:5px;
}
.diet-title{
background-color:#333333;
padding:2px 10px 2px 5px;
font-size:12px;
color:#FFFFFF;
background-image:url(https://blog.seesaa.jp/img/diet/right_bt.gif);
background-position:right;
background-repeat:no-repeat;
width:90px;
margin-top:5px;
}
.diet-content{
padding-left:10px;font-size:12px;
}
#diet-foods{
padding-left:10px;font-size:12px;
}
.food-title{
width:20%;
clear:left;
float:left;
}
.food-content{
width:75%;
padding-top:10px;

}

・テンプレート管理でスタイルシートの変更を行う
テンプレート管理中にあるスタイルシートの設定画面で(テンプレート名)を初期値に戻す
のどちらかを行ってください。

よろしくお願いします。

またまた長い間放置してしまいました。
申し訳ありません。。。

すでにご存じの方が多いと思いますが、ここ1、2週間の間にテンプレートを8つ追加しました。

そこで、今までのものと今回新たに追加しているテンプレートの違いを二つほど書いておきたいと思います。
まず一つ目というかこれが一番違うのですが、今回のものはデザインを重視してみようということで、横幅を固定しています。
具体的には、
■旧デザインの横幅指定
#content{width : 75%;}
＊ブラウザの画面幅によって、contentの表示幅が変動
■新デザインの横幅指定
#content{width : 400px;}
＊ブラウザの画面幅に関係なく、contentの表示幅を固定

このように横幅を固定することで、ブラウザの表示幅を気にせずちょっと凝った背景画像を使ったり、記事のタイトルに背景画像を設定したりといったことを行えるようになりました。

もう一つが、Seesaaからのお知らせにもありますが、ブログデザイン向上のために新たにcontainerというIDを追加しました。
ブログのタグ構成は下記表のとおりになります。
body

container banner links-left content links footer

このcontainerをうまく利用するとダイアリーのような、ブログの本体が真ん中に表示され、ブログ全体の背景と記事等のコンテンツを表示する箇所の背景を別にするというデザインが可能になります。

いつものように、わかりづらい点もあるかと思いますが、スタイルシートの変更を行う際の参考にしてください。

Seesaa BLOGをご利用頂き、誠にありがとうございます。

旧バージョンから新バージョンに移行した際、記事ページにおいて投稿した記事とコメント入力欄・トラックバックURLがかぶってしまう場合があります。
これは、コメント入力欄の表示位置を、スタイルシート側で強制的に設定していたために起こった現象になります。

この場合、下記手順に従って修正を行ってください。
＜スタイルシート(CSS)の変更＞
1.ブログのメニューより、「テンプレート管理」を選択します。
2.テンプレート管理画面にある、「テンプレート一覧」から、変更するテンプレート名の「CSS」欄にあるリンクを選択します。
3.CSS(スタイルシート)にある、テキストボックス内に、使用しているスタイルシートが表示されますので、修正を行います。
修正内容は、
#commentsにある
・position:absoluteの行の削除
・widthの行の削除
になります。

4.「スタイルシートの変更」ボタンを選択します。

なお、テキストボックス内にあるスタイルシートは、いったん変更すると元に戻すことができませんので、必ずバックアップをとってから修正を行ってください。

以上、よろしくお願いいたします。

長らく放置してしまい、申し訳ありませんでした。
新バージョンに移行したのを機会に、更新するようにしようと思います。

すでに、何人かの方が、新バージョンへの移行について書いているので今更遅いかもしれませんが、今回はスタイルシートの変更点を中心に書いていきます。

まず、今回の大きな変更点の一つの「両サイドバー対応」から。
シーサーからのお知らせにも書いてありますが、両サイドバーに対応するため
＃links-left
というIDを追加しました。
左サイドバーは、links-left
右サイドバーは、links
で表示されます。

banner
links-left	content	links
footer

ちなみに、links-leftの中に置かれるclassは、今までと同じものになります。

なので、デフォルトのスタイルシートのカスタマイズをしている場合は、今使っているスタイルシートに

#links-left{
/*ここにlinksと同じ内容をいれる*/
}

を追加し、contentとlinksの横幅(width)を変更すれば、両サイドバーに対応したスタイルシートができあがります。
ただ、この変更だけでは、トップページやカテゴリページ、過去ログのページにしか対応できません。

記事ページにコメントとトラックバックが入るように変更されているからです。

次に記事ページに対応した変更方法を説明します。
旧バージョンでは、コメントページとトラックページという感じで別ページに別れていたのですが、今回の修正で同じページに表示されるようになってます。
同じページに表示されるように変更したため、記事ページの構成は

content

blog ブログの記事 comments コメント欄 trackback トラックバック

このように変わっています。
※コメントとトラックバックのIDが「content」に含まれています。

そのため、Seesaa BLOGが提供しているスタイルシートの場合、
commentsとtrackbackの

・widthを100%に変更
・margin-left:10px;を削除
・blogのスタイルを、commentsとtrackbackに適用(一部デザインテーマのみ)

を行っています。

最後に、フッターを使用する場合、

#footer{
width:100%;
}

を追加します。

わかりづらい点もあるかと思いますが、新バージョン変更後にあわせたスタイルシートを作成する際に参考にしてもらえればと思います。

本日は、cdontent(ブログの記事の箇所)についてです。

どのようなセレクタを使用しているかは、下記画像をご確認下さい。
(今日の手抜きですね。。。)

同じ日に、複数の記事を投稿する場合は、blogbodyがその日の記事数分表示されることになります。

また、この中には入っていないのですが、記事を書く際にHTMLタグを使用する場合(例えば引用のタグ<BLOCKQUOTE>)は、CSSファイルに新たにセレクタ名を追加するようにして下さい。
例：
blockquote {
margin:10px;
border-left:solid 2px #CCCCCC;
padding:5px;
width:auto;
}

今回からは、実際Seesaaブログで使っているCSSのセレクタ名を説明したいと思います。
(種類が多いので何回かに分けてやりたいと思います。)

基本的には、3つの構成要素から成り立っています。
1.ヘッダー箇所になる「banner」
2.記事を表示する「content」
3.カレンダー、カテゴリ等を表示する「links」

その中から、今回はbannerについてどのようなセレクタを使っているか説明します。
というか、参考画像を見てみてください。
(手抜きになってしまい、もうしわけありません。。)

前回から引き続き、seesaaブログで使っている属性の説明です。
(更新が遅れてすいません。。。)

■文章系
・text-align
文章の配置位置を設定します。
tezt-align:center;
属性値は
left　左寄せ
center　中央揃え
right　右寄せ
justify　両端揃え(IE5・NN6以上、safariに対応)
になります。
・text-decoration
文字の装飾設定を行います。
text-decoration:none;
属性値は
none　文字飾りなし
inderline　下線
overline　上線
line-through　取消線
になります。

・line-height
行間隔の設定を行います。
line-height:120%;

■背景系
・background
背景の設定を行います。
background:#000000;
ただし、属性値については、設定の方法がいくつかあります。
1.#000000(色を16進数で2桁ずつ指定)
2.#000(色を16進数で1桁ずつ指定)
3.black(色を定義されている色名で指定)

・background-image
背景画像の設定を行います。
backround-image:url(https://blog.seesaa.jp/hoge.gif)
url(　)に、設定したい背景の置き場所を指定します。
・background-repeat
背景画像の繰り返し設定を行います。
background-repeat:no-repeat;
この属性で使用する属性値は、以下の通りとなります。
repeat　指定された画像を繰り返し表示する
no-repeat　指定された画像の繰り返しを行わない
repeat-x　指定された画像を横方向に繰り返す
repeat-y　指定された画像を縦方向に繰り返す

もちろん、現在Seesaaブログで使っていない属性も使用できます。

なので、その他の属性については、スタイルシートの本やWEBサイトを参考にしてみて下さい。

今回は、seesaaブログで使っている属性を簡単に説明します。
(とりあえず、一部紹介させて頂きます。)

■段落系
・margin
段落と段落との間隔を設定します。
margin:5px;
この場合は、上下左右均等に5pxと設定しています。
それぞれ異なる値を設定する場合は、
margin:1px 2px 3px 4px;
のように、上、右、下、左の設定を行います。
ちなみに、
margin-topって、設定で個々に行うのもOKです。
・padding
段落の枠線と段落の内容との間隔を設定します。
padding:5px;
この場合は、上下左右均等に5pxと設定しています。
それぞれ異なる値を設定する場合は、
padding:1px 2px 3px 4px;
のように、上、右、下、左の設定を行います。
ちなみに、
paddingtopって、属性名で個々に行うのもOKです。
・width
段落の横幅の設定を行っています。
wodth:560px;
ちなみに、
・border
段落の枠線を設定するのに使用しています。
一括で指定する場合は、
border:2px dotted #000000;
こんな感じで、線の太さ、線種、線の色を指定します。
上下左右の設定を個別にする場合は、
border-top、border-bottom、border-left、border-right
で個別に設定します。
・position
段落の表示位置を設定しています。
Seesaaブログでは、absoluteという値を使って、絶対位置で配置するようにしています。
position:absolute;left:10px;top:5px;
ただし、この属性を使うと、IEで文章のコピーができないってバグがあります。
※現在変更を検討中です。

■文字系
・font-weight
文字の太さの設定を行っています。
font-weight:normal;
・font-size
文字の大きさの設定を行っています。
font-size:100%;
・font-family
フォントの指定を行っています。
font-family: Arial, Helvetica, sans-serif;
・color
文字の色を設定しています。
color:#FF9966;

その2です。

今回は、CSSの書き方について、前回よりも、もう少しつっこんだ説明をします。

まず、セレクタについて
セレクタには、基本セレクタ、IDセレクタ、classセレクタ、疑似クラスの4種類があります。
ちなみに、現在Seesaa BLOGで使ってるのは、基本セレクタ、IDセレクタ、classセレクタの3種類です。
なので、この3種類の説明をします。
・基本セレクタ
<H1>や<A>などの要素になります。
たとえば、<H1>要素をスタイルシートに設定すると、HTMLファイル内にある、<H1>全てにスタイルシートの内容が反映されます。
例：
H1 {color:#000000;}
HTMLでの記述
<H1>SeesaaBLOGについて</H1>

・IDセレクタ
ID属性を設定した要素に対し、スタイルシートを適用します。
ただし、一つの文章のなかで、複数IDセレクタを設定することはできないので、注意して下さい。
IDセレクタを設定する場合、セレクタ名の前に「＃」をつけます。
例
#contents{border:10px;}
HTMLでの記述
<DIV id="contents">

・classセレクタ
class属性を設定した要素に対し、スタイルシートを適用します。
複数の要素に対し、同じスタイルを設定する際に使用します。
classセレクタを設定する場合、セレクタ名の前に「．」をつけます。
例
.text{font-size:12px;}
HTMLでの記述
<SPAN class="text">テキストテキスト</SPAN>