2005/08/23
seesaaのテンプレートにある『オレンジ』を3カラム化してみました。
仕上がりはこのようになります。
『オレンジ』(3カラム)
背景画像などは3カラム用に少し変わっています。
自分なりに修正したソースを公開しますので、ご自由にお使いください。


body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-image:url(http://blog.seesaa.jp/img/bg/orange/bg.gif);
background-repeat:repeat-x;
background-color:#FFF;
}
#container{
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
width:1000px;
color:#856F51;
}
a{
text-decoration: underline;
color:#78A600;
}
#banner{
font-family:arial, Helvetica;
height:140px;
margin:0px;
padding:0px 0px 0px 0px;
text-align:left;
background-image:url(http://blog.seesaa.jp/img/bg/orange/header.gif);
background-repeat:repeat-x;
background-color:#FFF;
}
h1 {
margin-left:10px;
padding: 20px 10px 10px 0px;
font-size:18px;
font-weight:bolder;
}
h1 a{
color:#FFF;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}
h2 {
}
h3 {
font-size:12px;
font-weight:bolder;
font-family:arial, Helvetica;
margin-top:5px;
margin-bottom:0px;
padding:1px 0px 5px 17px;
background-image:url(http://blog.seesaa.jp/img/bg/orange/title.gif);
background-repeat:no-repeat;
}
h3 a{
font-weight:bolder;
color:#842515;
}
.description {
color:#FFF;
margin:0px 10px 10px 10px;
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}
.navi {
font-size:12px;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:400px;
text-align:center;
}
.blog {
margin:0px;
text-align:left;
margin-left:15px;
}
.blogbody {
margin:0px;
padding:0px;
}
.date{
font-size: 12px;
font-weight:bolder;
font-family:arial, Helvetica;
color:#F65A01;
margin:0px;
padding:5px 5px 10px 0px;
background-image:url(http://blog.seesaa.jp/img/bg/orange/date.gif);
background-repeat:no-repeat;
background-position:bottom;
}
.title{
font-weight:bolder;
text-align:left;
}
.title a{
border:none;
text-decoration: none;
font-weight:bolder;
}
.text{
font-size: 12px;
margin-top:0px;
padding:5px 0px 0px 0px;
line-height:18px;
}
.posted{
font-size: 10px;
padding:10px 0px 10px 20px;
text-align:right;
}
#links-left {
font-weight:normal;
width:253px;
float:left;
margin-left:20px;
}
#links {
font-weight:normal;
width:253px;
float:left;
margin-left:20px;
}
#calendar {
font-weight:normal;
text-align:left;
padding-left:30px;
background-image:url(http://blog.seesaa.jp/img/bg/orange/side_title.gif);
background-repeat:no-repeat;
}
#calendar table {
width:200px;
padding-bottom:10px;
text-align:center;
}
#calendar th{
font-size:12px;
font-weight:bold;
padding:6px 3px;
background-image:url(http://blog.seesaa.jp/img/bg/orange/th_bg.gif);
background-repeat:no-repeat;
color:#842515;
}
#calendar td{
padding:6px 3px;
background-image:url(http://blog.seesaa.jp/img/bg/orange/td_bg.gif);
background-repeat:no-repeat;

}
.calendarhead {
color:#FFF;
font-size:12px;
font-weight:bolder;
padding:6px 0px 7px 0px;
text-align:left;
}
.calendarday {
font-size:12px;
padding:2px;
}
.sidetitle {
background-image:url(http://blog.seesaa.jp/img/bg/orange/side_title.gif);
background-repeat:no-repeat;
color:#FFF;
font-size:12px;
font-weight:bolder;
padding:6px 0px 10px 30px;
text-align:left;
}
.side {
font-size:12px;
font-weight:normal;
line-height:18px;
margin-bottom:10px;
padding:5px 15px 10px 30px;
text-align:left;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:10px;
padding:5px 30px 0px 0px;
padding-bottom:10px;
}
#comments {
margin-top:25px;
margin-left:15px;
text-align:left;
}
#comments form{
padding-left:10px;
margin-top:5px;
}
#comments input{
max-width:250px;
}
#comments textarea{
max-width:400px;
}
.comments-head{
margin:0px;
padding:0px 0px 10px 20px;
background-image:url(http://blog.seesaa.jp/img/bg/orange/title.gif);
background-repeat:no-repeat;
font-size:12px;
font-weight:bold;
}
.comments-body {
padding:5px 5px 0px 0px;
font-size: 12px;
}
.comments-post{
font-size: 10px;
padding:10px 10px 10px 20px;
text-align:left;
}
#trackback {
font-size: 12px;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px dotted #666;
}
#footer{
clear:left;
padding:20px 0px; 5px 0px
text-align:center;
height:80px;
background-color:#FFF;
}
.copyright{
font-size:80%;
width:100%;
text-align:center;
}
#diet-container{
padding:5px;
}
.diet-title{
padding:2px 10px 2px 5px;
font-size:12px;
color:#D77D62;
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;
}


アクセスアップだけでなくお金まで【TReX】
2005/08/19
少し長めの記事を全文表示すると、どうしても画面が縦に長くなってしまいます。
そこで、途中を折りたたんで、「続きを読む」を選択して全文を表示するようにします。

これについては、goonersさんの、折り畳みで[続きを読む]@seesaaに詳しく載っているので、ぜひ参考になさってください。

とてもきれいにまとまっていて、他にも参考になる記事が多いです。
サガシヤ 16:21 | Comment(3) | TrackBack(0) | ブログカスタマイズ | TOP |
2005/08/10
ランキングサイトなどのバナーからリンクを張っていると、周りに枠線がでることがあります。
意図的にやっているならともかく、あまり見栄えのいいものではありません。


最初から枠線がきちんと設定されている場合は、表示されないのですが、
そうでないと、

blog-ktai.jpg

このように、周りを囲う線が表示されます。

表示させなくするには、画像を指定している部分に、border="0"を付け足せば大丈夫です。
 
 
<img src="画像のURL" border="0" width="幅" height="高さ" >


そうすると、

blog-ktai.jpg

このように周りの枠線が消えます。

自分で作った画像や、ランキングのバナーを張る際にご利用ください。
2005/08/04
「menu」から好きなカテゴリを選択すると、その中にある記事の一覧が表示されます。
これがあると、見たい記事がより探しやすくなると思います。


 デザイン ⇒ コンテンツ
⇒ 記事 ⇒ コンテンツHTML編集(画面右上にあります)


開くと上の方に、
<% if:page_name eq 'category' -%>
<% /if -%>
という表示があります。

これを
<% if:page_name eq 'category' -%>
<div id="clist">
<p>カテゴリの記事一覧</p>
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>" class="title"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>
<% /if -%>
と書きかえます。

あとはスタイルシートで、表示方法を整えます。
#clist {
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
border: 1px #006699 solid;
background-color: #FFFFFF;
}
#clist li {
font-size: 95%;
}
上記のスタイルシートを追加してください。
デザインや大きさは自分のサイトに合わせて変更するといいと思います。

参考サイト
 簡単seesaaカスタマイズ


2005/07/26
サイドバーのコメントやトラックバックをツリー形式にしていると、「⇒名前(日付)」のように表示されます。
この「⇒」の部分を他のものに変えてみます。


これも簡単な操作で変えることが出来ます。

 デザイン ⇒ コンテンツ
⇒ 最近のコメント ⇒ コンテンツHTML編集(画面右上にあります)


開くと下の方に
<% loop:list_article_child -%>
  <% article_child.writer %> (<% article_child.createstamp | date_format('%m/%d') %>)<br />
<% /loop -%>
という記述があります。

」の部分を好きな文字に置き換えればそれで完了です。このサイトでは「」を使っています。
あとは保存をして再構築してください。


サガシヤ 22:52 | Comment(7) | TrackBack(0) | ブログカスタマイズ | TOP |
2005/07/21
seesaaの場合、初期設定では、日付は0000年00月00日と表示されています。
この表示はさまざまな表示形式に変えることができます。


例として、記事の日付を変更してみます。
今回はスタイルシートではなく、コンテンツHTMLを書きかえます。

 デザイン ⇒ コンテンツ
⇒ 記事 ⇒ コンテンツHTML編集(画面右上にあります)


開いてみると、スタイルシートよりさらに分かりにくそうな数字と英語の羅列がでてきます。

その中から、date_format("%〜) という部分を探します。%〜の部分を書き換えると、表示を変えることができます。

%a 曜日名(省略)%A 曜日名(通常)
%b 月(英語・省略)%B 月(英語・通常)
%y 年(下2桁)%Y 年(4桁)
%m 月%d 日付

これらを組み合わせることにより、いろいろな表示の仕方ができます。


%y年%m月%d日 ⇒ 00年00月00日
%Y/%m/%d   ⇒ 0000/00/00 
上記のように、%〜と%〜の間に文字を入れると、その文字も同時に表示されます。

他にも、
%x ⇒ 00/00/00
%F ⇒ 0000-00-00
のように、1つの指定で全部を指定できるものもあります。

参考サイト
 Style book

アフィリエイトならアドチャンプル!

サガシヤ 10:08 | Comment(2) | TrackBack(0) | ブログカスタマイズ | TOP |
2005/07/18
枠線を変える(基本)」では、枠全体の指定をするため、全部が同じ線になってしまいます。そこで、それぞれに違う指定をし、1つの枠にいろいろな線を使ってみましょう。


枠線は、余白と同じように、
border-top: ○px; 
border-right: ○px; 
border-left: ○px; 
border-bottom: ○px; 
とバラバラに指定することができます。

これを利用することにより、

 background-color:#eeeeee;
 border-right:3px solid #777777;
 border-bottom:3px solid #777777;

このように立体的に見せることができます。

このサイトでは、.blogbodyに、
border-right:solid 3px #006699;
border-bottom:solid 4px #006699;
background-color:#FFF;
と指定しています。

けれども、日付部分の枠線はこれと別なので、同じように.date
border-right:3px solid #006699;
をつけたすことにより、ひとかたまりに見えるようになります。

他にも組み合わせにより、さまざまなデザインができると思うので、いろいろと試してみましょう。

■1円から振込み可能なASP【アフィラック】

2005/07/14
文字同士がぎっしりつまっていたり、枠線と文字がぴったりくっついていると、どうしても見づらい印象になってしまいます。
ある程度の余白を確保して、すっきりさせましょう。


まず、記事の行間(文字と文字との間隔)を変えてみます。

 デザイン ⇒ スタイルシート ⇒ (使用するスタイルシート)

記事全体の指定である.blogbodyを探します。
.blogbody {
font-weight:normal;
line-height:120%;
margin-bottom:15px;
}
line-heightが行間を表しています。もっと大きく広げたい場合は120%よりも大きな値を指定します。ちなみにこのサイトでは160%に設定してあります。

次は、枠線と文字との間隔を広げてみます。
今度は記事本文の指定である.textを探します。
.text{
font-size: 90%;
color: #333S;
padding-left:10px;
padding-top:5px;
padding-right:15px;

margin-top:5px;
}
paddingmarginというのが余白の指定です。

スタイルシートでは、全ての要素がそれぞれの箱の中にある、という考えをもっています。
padding.gif
どちらも余白の設定なのですが、paddingは枠線の内側marginは枠線の外側の指定になります。

なので、枠線と記事の間隔を広げるためには、paddingの値を大きくしなければなりません。それに対し、コンテンツとコンテンツの間隔を広げる場合は、marginの値を大きくします

指定の仕方もいろいろあります。
padding: ○px; 上下左右まとめて
padding: ○px ○px; 上下、左右
padding: ○px ○px ○px; 上、左右、下
padding: ○px ○px ○px ○px; 上、右、下、左
他にも、
padding-top: ○px; 
padding-right: ○px; 
padding-left: ○px; 
padding-bottom: ○px; 
のように、個別に指定することもできます。

あまり広げすぎると、空虚な感じがしますので、適切な余白の広さを見つけてみましょう。

■1円から振込み可能なASP【アフィラック】

2005/07/13
記事や、サイドバー、タイトルにはそれぞれ枠線(囲み)が設定されています。
それらは、色、太さ、線の種類を変えることができます。


例として、記事の枠線を変えてみましょう。

 デザイン ⇒ スタイルシート ⇒ (使用するスタイルシート)

記事全体の設定の.blogbody を探します。
.blogbody {
font-weight:normal;
line-height:120%;
margin-bottom:15px;
}
これはシンプルホワイトのスタイルシートです。
実際に見ると分かるのですが、枠線が設定されていないため、記事に囲いがありません。

そこで、
.blogbody {
font-weight:normal;
line-height:120%;
margin-bottom:15px;
border:1px solid #000;
}
赤の部分を付け加えます。

解説すると、
 border: 枠線の指定
 1px 枠線の太さ
 solid 枠線の種類
 #000 枠線の色
となり、この指定により黒の実線の枠線がつきます。

枠線にはいろいろ種類があるので、実際に例を挙げていきます。

 solid 実線

 dotted 点線

 dashed 破線

 double 二重線

 groove 立体的

 ridge 立体的(grooveと逆の色使い)

 inset ボタンが押されたような感じ

 outset ボタンのような感じ

枠線の種類のところに、上記の指定をすれば、枠線の種類を変えることができます。

例えば、の2pxの実線の指定をしたければ、
 border: 2px dotted #FF0000;
とすればいいわけです。

枠線は記事や、タイトル、サイドバーなどいろいろなところに指定できるので、自分でいいと思う組み合わせを考えてみましょう。



2005/07/11
いざブログをカスタマイズしようと思い、スタイルシートを見ると、英語と数字の羅列。「これじゃ、どれがどれだか分からないっ」という方のために、どの部分がなんと言う名前か、図で表してみました。


まず、大まかな全体の説明です。
ex-1.jpg
●body ブログ全体
●container ブログのコンテンツやサイドバーをおさめる箱のようなもの
●banner ブログ上部のタイトルや説明を入れる場所
●links-left 左サイドバー
●links 右サイドバー
●content 記事全体
●links 左サイドバー
●footer ブログ下部
containerは以前、「帰ってこい、サイドバーよ」にも書きましたが、スタイルシートにない場合もあります。デザインを崩さないようにするためには、つけ加えた方がいいと思います。

さらに細かく見ると、
ex-2.jpg
という感じです。
トラックバックはtrackbackという名前で、commentsと同じような構成になっています。

以上が基本的な部位の名前です。
他にもいろいろありますが、これらの部分だけおさえれば基本的には大丈夫だと思います。文字の指定に関しては、ブログカスタマイズのカテゴリーを参考にしてください。

これを参考に、自分なりのブログデザインを完成させましょう。


2005/07/06
Style bookの888さんが、これについて記事になさっています。
それを参考に導入してみました。ただのラインを引くよりアクセントになると思います。
サガシヤ 09:39 | Comment(4) | TrackBack(0) | ブログカスタマイズ | TOP |
2005/07/03
seesaaの場合、メニューから簡単にリンクを作ることができますが、必ず別窓で開いてしまいます。違うサイトへのリンクならまだいいのですが、自分のサイト内へのリンクが別窓で開くと、どんどん数が増えてきて個人的にあまり好きではありません。


実際に、リンクを作ってみるとわかるのですが、タグの中には、URLの他にtargetという項目があります。
これが_blankに指定されているので、必ず別窓で開かれるわけです。
なのでここに違う指定をします。いろいろ種類があるようですが、_topという指定をすれば同じウィンドウの中に表示されます。
 target="_blank" ⇒ target="_top"
この指定により、新しいウィンドウを開かなくなるので、訪問者をわずらわせません。(上にあるmenuはこの指定をしています。)
訪問者は右クリックで新しい窓で開くことを選択できますが、同じ窓で開くという選択はできません。できるだけ訪問者にストレスを感じさせないためにも、自サイトへのリンクは、別窓で開かない方がいいと思います。

click!

サガシヤ 21:46 | Comment(4) | TrackBack(0) | ブログカスタマイズ | TOP |
2005/07/02
カテゴリや、新着などのサイドバーの色を変えてみましょう。
ここの色を変えるとだいぶイメージが変わってきます。


 デザイン ⇒ スタイルシート ⇒ (使用するスタイルシート)

スタイルシートの中から.sidetitleという部分を探します。
.sidetitle {
padding:4px 10px 4px 10px;
font-weight:bold;
background-color:#d2d2e9; タイトルの背景色
font-family:Verdana;
}
sidetitleの中にbackground-colorがない場合は書き足しましょう。
色のコードの指定の仕方は前述の「リンクの色を変える」を参考にしてください。

他にも、
body 全体の背景色
#content 記事本文の背景色
blockquote 引用文の背景色
など、さまざまなところを指定することができます。

色のコードがある部分はとりあえずそのコードを変えてみて(#000000で黒、#FFFFFFで白)、それがどこの部分を表しているのか、プレビューで確認してみるといいと思います。

テンプレートが同じでも色が違うだけでだいぶイメージが違ってくるので、自分が好きな色に変えてみましょう。中には背景色の指定(background-color)がない場合もあるので、そういう場合は自分で書き足さなければなりません。

click!
サガシヤ 15:16 | Comment(6) | TrackBack(0) | ブログカスタマイズ | TOP |
2005/07/01
文字の装飾には何種類かあります。
今回はそのやり方を紹介します。


装飾には、
下線 上線 抹消線 点滅 上下線
 ※ブラウザによっては表示されない指定もあります。
などがあります。

リンクの色を変える」と組み合わせるといろいろなパターンができます。

例えばこのサイトでは、最初は何もない状態で、マウスが重なると下線がでるという方式を指定しています。これをするには、
a:link{color:#006699;text-decoration:none;}
a:hover{color:#ffa800;text-decoration:underline;}
という記述を加えます。
text-decorationというのが文字の装飾の指定になります。
それぞれ、
none 何もなし
underline 下線
overline 上線
line-through 抹消線
blink 点滅
underline overline 上下線
となります。

他にも、font-weight: boldを加えると文字が太字に、font-style: italicを加えるとイタリック体にすることができます。

例えば、最初は何もない状態で、マウスが重なると太字になるリンク(ともに下線部なし)を作りたい場合は、
a:link{color:#006699;text-decoration:none;}
a:hover{color:#ffa800;text-decoration:none;font-weight: bold;}
を記述するという感じになります。

文字の色と装飾を変えるだけで、だいぶイメージが変わってきますので、自分なりに最適な組み合わせを見つけましょう。



サガシヤ 11:27 | Comment(9) | TrackBack(0) | ブログカスタマイズ | TOP |
2005/06/30
記事の文字色と一緒にリンクの文字色も変えてみます。
リンクはこのサイトで使っているように、マウスが上に重なったときに、色が変わるように設定する説明をしていきます。こうすると、その部分がはっきりリンクだと確認できるので、訪問者を惑わせません。


まず自分が使っているスタイルシートを選びます。
 デザイン ⇒ スタイルシート ⇒ (使用しているスタイルシート)
それでは記事本文の文字色を変えてみましょう。
スタイルシートの中から.textという部分を探してください。
.text{
font-size:100%; 文字の大きさ
color:#000000; 文字色
padding:0px 0px 5px 0px;
margin-top:0px;
line-height:160%; 行間
font-family:Verdana; 使用するフォント
}

colorの部分が文字の色になります。色はwhiteやblackなどの名前で指定することもできますが、普通は上記のような6桁のカラーコードで指定しています。これは視覚的ではないので、なかなか何色になるかわかりません。CGIBOYのカラーコード作成マッシーンなどを使うと、自分で色を確認しながらカラーコードを取得することができます。

では、次にマウスが重なるとリンクの色が変わるように設定してみましょう。
恐らくseesaaのスタイルシートにはそのような記述がないので、以下の文を追加しましょう。追加する場所は特に決まっていませんが、わたしの場合はわかりやすいように上の方に記述してあります。
a:link{color:#○○○○○○;}
a:visited{color:#○○○○○○;}
a:active{color:#○○○○○○;}
a:hover{color:#○○○○○○;}

それぞれ、a:linkがクリックする前a:visitedがクリックした後a:activeがクリック中a:hoverがマウスが重なっているときの色になります。

サイトの背景色との兼ね合いを調整しながら色を決めましょう。
文字色と同系色だと、どれがリンクなのか分かりにくくなります。

ティーライフ ダイエットプーアル茶3点で1000円ポッキリセット
サガシヤ 11:04 | Comment(6) | TrackBack(1) | ブログカスタマイズ | TOP |
2005/06/29
文字の大きさというのは、見やすさを考える上で重視しなければなりません。
小さいと見づらいし、あまり大きすぎても見栄えがよくありません。


自分で確認してみて最適な大きさを見つけましょう。

 デザイン ⇒ スタイルシート ⇒ (使用しているスタイルシート)

スタイルシートを見ていくと、font-sizeというものがあります。
ここの設定を変えることにより、大きさを変えることができます。

文字の大きさの設定は、記事やサイドバー、タイトルなど、個別に設定することができます。

例えば、.textの設定を変えると、記事本文の文字の大きさが変わります。
.text{
font-size:100%; 文字の大きさ
padding:0px 0px 5px 0px;
margin-top:0px;
line-height:160%; 行間の広さ
font-family:Verdana;
}

この場合font-sizeは%で表されています。
どういうことかというと、これはブラウザの設定に対する大きさになります。
例えば、ブラウザの文字を大きく設定している人が見ると、大きく表示されますし、その逆もまた同じです。

大きさの指定として、他にpxもありますが、こちらは絶対的な指定になります。
つまり、どのブラウザで見ても同じ文字の大きさとなります。

どちらかというと、%で指定した方が、ユーザーフレンドリーであるといえます。
なぜかというと、例えば目がよくない年配の方はブラウザの文字の設定を最大にしている場合があります。このときpxで指定していると、大きさを変えることができず、非常に閲覧が困難になります。そうならないためにも%で設定することをお勧めします。

文字のサイズが変わるとデザインがくずれて困るという場合は、pxでもいいかもしれません。

アンケートに答えてお小遣い稼ぎ!超豪華賞品プレゼント中♪
サガシヤ 15:22 | Comment(3) | TrackBack(0) | ブログカスタマイズ | TOP |
2005/06/28
開設当時、このブログは2カラムでした。(左にメイン記事、右にメニュー)
その理由というのは3カラムにすると、デザインが崩れるからでした。
サイドバーや、ひどいときにはメインの記事までが下に落ちてしまい、
とんでもないことになってました。


それを何とかしようと、あれこれ試してみて、ようやく今の形ができあがりました。
今回は、自分なりの落ちない対策を述べていきたいと思います。

まず最初に、

 デザイン ⇒ スタイルシート ⇒ (使用するスタイルシート)

を選択します。

初めて見る人は思わず身を引いてしまうような英語の羅列が表示されます。
でも安心してください。
最低限これから述べる部分だけ修正すれば大丈夫のはずです。

1.ブログ全体の大きさを決める
文字の羅列の上の方に、containerと書かれていると思います。
スタイルシートによっては、ない場合もあります。
その場合は追加してください。
#container{
margin:0px; 余白
width:800px; 全体の大きさ
background:#FFF; 背景色
text-align:left; 文字の位置
}

実際もう少し項目があると思いますが、widthの部分は必ず設定してください。

2.メインの大きさを決める
次にcontentと書いてある部分を探してください。
#content{
margin:0px 15px 0px 15px; 余白(上 右 下 左)
float:left; 記事の位置
width:400px; 大きさ
background:#FFCCCC; 背景色
}

3.左サイドバーの大きさを決める
#links-left{
margin: 0px;
width: 120px;
float: left;
}

4.右サイドバーの大きさを決める
#links{
margin: 0px;
width:140px;
float:left;

}

それぞれに赤で示しているように、floatをleftに設定した方がいいようです。

この4つを設定すれば大丈夫のはずです。

メイン、左、右を合計してcontainerの大きさに収まればいいのですが、
ここで注意しなければならないのが余白です。

marginやpaddingの値は余白や空白を表しているのですが、これもきちんと計算しなければなりません。
計算するのが面倒な場合は(現にわたしがそうなのですが……)、合計の値をcontainerの大きさよりも少し小さめに設定するのがいいと思います。
少し空白が大きくなるかもしれませんが、3カラムで表示されるようになるはずです。
デザインにこだわりたい場合はこの余白の大きさを調整してみてください。

それから大きさには、%とpxの2種類の設定の仕方があります。
%は画面全体に対する割合で、pxは絶対的な値です。
経験上、%の場合、ブラウザを小さくしてみると、サイドバーが下に落ちること多いように感じました。
なので、このサイトは全てpxで設定してあります。恐らくブラウザを小さくしても表示は崩れないはずです。そこら辺は好みで使い分けてもいいかもしれません。

全ての設定が終わり、プレビューを見て、大丈夫だと思ったら保存し、再構築してください。

ちなみにわたしの場合、何かいじってはプレビューを繰り返し、どれが何を表しているのか自力で確認してみました。もしかすると上の説明も、おかしなところがあるかもしれませんが、ご了承ください。

広告を読むだけで、数十万以上の極秘攻略情報がすべて無料に!
2005/06/24
知っている方は何を今さらと思うかもしれませんが、今日気づきました。(seesaa用)


サイドバーにコメントやトラックバックを載せる部分があります。
一覧形式にした場合、記事名が長いと、ごちゃごちゃになってしまい、見づらい場合があります。
どうにかならないかなぁと思いながら、いくつかのブログを見ていると、いくつかのサイトでは、一覧形式ではなく、ツリー形式で表示されていることに気づきました。

どうやったらできるのだろうと、

[デザイン] ⇒ [コンテンツ] ⇒ [最近のコメント]

と開いていくと、なんと普通に設定できるんですね。

てっきりHTMLやスタイルシートをいじらなければならないと思ってました。

というわけで、最近のコメントと最近のトラックバックの欄をツリー形式にしてみました。
これで前よりすっきりしたのではないでしょうか。

 期間保証型のテキスト広告 Adconmatch

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。