2005年07月31日

記事が横に伸びるのを防ぐ

URLとか半角英数の連続が記事にあると
うまく折り返ししてくれず横長になってサイドバーが落ちたりします。
それを回避するために「overflow:○○」
ではみ出し部分の表示方法を決めるんですが
○○や「overflow:○○」を入れる場所によって
見え方が違うのでまとめてみました。


■前提■
確認環境はWinXP+InternetExplorer(以下IE6)/Firefox1(FF)/Netscape7(N)、
○○に入るのはvisible/hidden/scroll/autoの四つ、
入れる場所はcontent/blog/blogbody/textの四箇所です。

他のブラウザやMacについては
持ってないのでわかりません。ごめんなさい。
○○の四つ目「auto」は表示方法が
ブラウザに依存するので環境によって左右されやすいかもです。
三つのブラウザ全てで横に伸びるのが回避されるものは赤+太字で表記。


■先にまとめ■
IE/FF/Netscape全てではみ出しを防ぐには
content又はblogに
「overflow:hidden」「overflow:scroll」「overflow:auto」
のいずれかを入れると吉。


■visible■
content
伸びる[IE]/伸びる+半角5文字ほどはみ出す[FF/N]
blog
伸びる[IE]/伸びずにはみ出す[FF/N]
blogbody
伸びる[IE]/伸びずにはみ出す[FF/N]
text
伸びる[IE]/伸びずにはみ出す[FF/N]

■hidden■
content
隠れる[IE/FF/N]

blog
隠れる[IE/FF/N]

blogbody
伸びる[IE]/隠れる[FF/N]
text
伸びる[IE]/隠れる[FF/N]

■scroll■
content
content全体に縦横スクロールバー[IE/FF/N]

blog
全ての個別記事(日付から投稿情報まで)に縦横スクロールバー[IE/FF/N]

blogbody
伸びる[IE]/全ての個別記事(日付以外)に縦横スクロールバー[FF/N]
text
伸びる[IE]/全ての個別記事(text部分のみ)に縦横スクロールバー[FF/N]

■auto■
content
content全体に縦横スクロールバー[IE/FF/N]

blog
はみ出しのある記事のみ(日付から投稿情報まで)縦横スクロールバー[IE/FF/N]

blogbody
伸びる[IE]/はみ出しのある記事のみ(日付以外)縦横スクロールバー[FF/N]
text
伸びる[IE]/はみ出しのある記事のみ(text部分のみ)横だけスクロールバー[FF/N]


□以下個人的な感想□
IEでもtext&autoが反映されるなら
横スクロールバーだけの方がすっきりしていいなーと思うんですけどね。
縦にもついてると勝手に個々の記事を短縮されちゃって
いちいちスクロールするのがめんどい…
content全体だとその点はましだけど
反面右方向のスクロールがしにくくてつける意味が半減しちゃうので
善し悪しかと。

あとFirefox/Netscapeのvisible+content、
半角5文字前後だけはみ出すのはどういうこだわりなの、
とか思いました。
文字数増やしても同じだけしかはみ出さないんですよ、これが。
ラベル:CSS
posted by 四葉屋 at 03:03| Comment(2) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする

2005年06月12日

sideやsidetitleを個別に設定

こんにちは。
気がついたらまた1ヶ月も空いちゃってました;

今回は「sideやsidetitleを個別に設定」です。
この表現でうまく伝わるかちょっと自信がないので
スクショをつけておきます。(例によってクリックで拡大)
カテゴリごとに色分け
これは二次会の方のメニュー部分なんですが、
「新着記事」と「過去ログ」がそれぞれ
ブルーからグリーン・ピンクに変わってます。
こんな風にカテゴリ名の背景とかをいじくろう!
というのが今回のテーマです。
今回はHTMLもちょっといじります。


注意事項
  ・クラス名が一致しないとそこだけまったく装飾なし状態になるので
   かならず一致させてください。
  ・全部のコンテンツを個別に指定するとしても
   一応「sidetitle」「side」の記述は残しておいた方がいいと思います。
  ・コラム開閉をしている場合、これをやると
   その部分についてはコラム開閉が無効になります。

[やり方]
1.まず変えたいコンテンツのクラス名を考えておきます。
  ここではコンテンツ名:sidetitle-test、コンテンツ内容:side-testとします。
  「aaaa」「bbbb」みたいにまったく変えても問題ないはずですが、
  「sidetitle」「side」は残しておいた方が後で見たときにわかりやすいと思います。

(2.3.はどちらからやってもOKです。)
2.デザイン→スタイルシート→変更するCSS
  編集欄に
.sidetitle-test {
好きな色等を指定
}
.side-test {
好きな色等を指定
}

  を追加してスタイルシートを変更。
  位置は別にどこでもいいんですが
  「sidetitle」や「side」とセットの方があとでわかりやすいと思います。

3.デザイン→コンテンツ→表示を変更したいコンテンツ→右上の「コンテンツHTML編集」
  HTML編集欄の一番上に

<div class="sidetitle"><% content.title %></div>
<div class="side">

  の二行があると思います。
  タイトル部分の表示を変更したい場合は「sidetitle」、
  コンテンツの中身の表示を変更したい場合は「side」の部分を
  1.で決めたクラス名に変えてください。
例:<div class="sidetitle-test"><% content.title %></div>
  <div class="side-test">

  *2.が終わっていない場合はまだ再構築しないでください。
  
4.2.3.両方ができたら再構築してください。表示が変わっているはずです。

以上です。

ちなみにひとつの設定を複数のコンテンツで共用することも可能です。
例えば新着記事と過去ログ両方のHTMLを
<div class="sidetitle-test"><% content.title %></div>
とすれば
.sidetitle-test {
好きな色等を指定
}
の設定が両方に反映されます。

あと試してませんが個別記事のタイトルなどはこの方法では無理だと思います。
記事タイトルを変更したい方は
「無料ブログでビジネスブログ(マスター:深田さん)」
「記事タイトルを色分け」という記事で詳しく解説されているので頑張ってください。

それでは今日はこのあたりで。お付き合いありがとうございました(^0^)
ラベル:CSS HTML
posted by 四葉屋 at 17:19| Comment(0) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする

2005年04月13日

片方専用のサイドバーを逆側に表示

一ヶ月ほど前に言ってたサイドバーを逆にする方法、すっかり忘れてました。

なんか簡単でした。

・デザイン→コンテンツ→サイドバーを表示したい側に
・CSS→links-left(links)の中身をlinks(links-left)にコピー


これだけです。
ただ余白とかいじったりしなきゃならない場合もあるかも。
片方専用ってことでデザインに凝ってる場合はなんか微妙な見栄えになったりします。
でも表示はできます。

というわけでearthpiece2の右サイドバーver.も作ったのでそのうちアップします。
earthpieceはlinks-leftからlinksに移しただけでいけました。
どちらかというとサンプルHTMLのほうがややこしかったです。
idだけじゃなくて位置も変えなきゃだめなんですね。
ラベル:CSS
posted by 四葉屋 at 21:08| Comment(0) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする

2005年02月07日

カレンダー解説

こんにちは。
今日はカレンダーの部分についてです。
テンプレートは「雪だるま」を使ってます。

CSSの中でカレンダーのデザインに関するものは
1)#calendar {}
2)#calendar table {}
3)#calendar th{}
4)#calendar td{}
5).calendarhead {}
6).calendarday {}
の六つです。
下のカレンダーにつけてある囲みと番号はこれに対応しています。

カレンダー解説


1)ではカレンダー全体の大きさや上下左右との間隔等を指定できます。
ここで文字や背景について指定することも可能です。
ただし文字については他の部分でそれぞれ指定するとここに書いた分は反映されないようです。
また背景については他の部分よりサイズが小さい場合隠れてしまうので指定する意味はありません。

2)では日付の部分の大きさを指定できます。
日付は指定された幅に応じて等間隔に配置されます。
1)で指定した大きさとうまく合うようにしないと背景からはみ出してしまうのでご注意を。

3)では日付の後ろに表示する画像を指定できます。
{}の中に
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center;

と入れるとうまくいくようです。
画像なしで背景色を指定することも可能で、その場合上の記述は必要ありません。
ここで日付の文字について指定することもできます。
指定の方法は記事などと同じなので省略(^-^;A
上下左右についてはここでは指定できません。

2005.04.09追記
この「画像」は3)なら青い丸、2)・4)・6)なら白い四角一つの画像のことです。
枠で囲ってある部分全体の画像を用意する必要はありません。


4)では曜日の後ろに表示する画像を指定できます。
方法は3)と同じです。
こちらも3)と同様に背景色や文字の指定も可能です。

5)ではカレンダーの年と月の部分の背景を指定できます。
{}の中に入れるのは
background-image:url(画像のURL);
background-repeat:no-repeat;

の二つです。
ここで年月の文字や背景色を指定することもできます。

6)では日付について指定することができます。
文字や背景色、上下左右との間隔などが指定できます。
文字と背景色については3)で指定した部分については3)が優先されるようです。
優先順位はどうも3)>6)>1)っぽいです。(1は文字のみ)


わかりにくいところがあるかもしれませんが、
カレンダーについてはとりあえずこんな感じです。

読んでくださってありがとうございました!

ラベル:CSS
posted by 四葉屋 at 17:21| Comment(0) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする

2004年12月11日

スクロールバーの色を変える

ブログのデザイン自体とは関係ないんですが
今回はスクロールバーの色を変えてみようと思います。

変更箇所は「body{}
中に「scrollbar-base-color:カラーコード;」という一文を入れました。
これでスクロールバーが指定した色を基本とした配色になります。
部分ごとに指定とかもできるんですがこれが一番簡単。

これでこう↓なります。

変更9・スクロールバーの色を変更しました


今回はこれだけです。おつきあいありがとうございました!
ラベル:CSS
posted by 四葉屋 at 21:44| Comment(2) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする
×

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