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いじり | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/4308404

この記事へのトラックバック
×

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