ココログのカスタムCSSの編集～プルダウンメニューの作成～

ココログのカスタムCSSの編集を使ってプルダウンメニューを作ってみる。上のタイトル欄のメニューように、マウスカーソルを重ねるとプルダウンメニューを出すことができるようになります。

ココログのカスタムCSSの編集～カーソルを重ねると色が変わるメニューの作成～

ココログのカスタムCSSの編集～メニューの作成～で作ったメニューに背景を付け、マウスカーソルを重ねると色が変わるようにしてみます。
↓こんな感じのメニューを作ることができます。「ブログのサブタイトル」にHTMLを書いてブログトップに配置します。

T O P ココログ関連 ログイン

ココログのカスタムCSSの編集～IE6ショック～

今までFirefox2とInternet explorer7で表示確認をしながらカスタムCSSを書いていました。ほぼ同じように表示できていたのですが、IE6では全く表示がくずれていました。
何が悪かったのかよくわかりませんが、おいおい直していきたいと思います。

追記(2008/2/6)：
セレクタのIDが何かと被ってたのが原因のようです。ID指定をやめたら正常に表示できました。今までの記事全部修正しました。

ココログのカスタムCSSの編集～Google検索ボックスの設置～

ブログのタイトル位置に、ブログ内検索ができるGoogle検索ボックスを取り付けてみます。ココログロゴの横にも検索ボックスはありますが、ここは敢えてGoogle検索を置いてみます。

↓こんな感じの検索ボックスをタイトル位置に置きます。

WWW を検索 http://shirabemono.cocolog-nifty.com/blog/ を検索

ココログのカスタムCSSの編集～メニューの作成～

「カスタムCSSの編集」を使ってブログのトップにメニューを作成してみます。メニューはブログの先頭に表示したいので、「ブログのサブタイトル」を使って書きます。「ブログのサブタイトル」は管理ページの「設定」タブで設定できます。
メニューには、このブログのトップページへのリンクと、ココログ関連カテゴリへのリンクを設定したいと思います。

ココログのカスタムCSSの編集～２段組レイアウトの設定～

カスタムCSSを編集して２段組レイアウトを実現してみます。HTMLのテーブルでも実現できますが、カスタムCSSで設定してしまえば細かいレイアウト設定もHTMLは煩雑にならず、比較的簡潔に書くことができるようになります。

次のようなレイアウトで文章を表示できるようになります。

ここは赤色にしました。幅は500pxです。

ここは左側のレイアウトになります。幅を200px、背景を緑色、線で枠を囲みました

ここは右側のレイアウトです。幅を300px、背景は青、点線で枠を囲みました。

ここは左枠と右枠の背景になります。

ココログのカスタムCSSの編集～ブログの横幅を変更する～

このブログは「唐草模様」のテーマを「右サイドバー付」のレイアウトで使っています。記事の幅はデフォルトでは400px、右サイドバーの幅は200pxとなっていて、記事の幅が狭い感じになっています。記事の幅を600pxに広げる方法を説明します。

ココログのCSSファイル

私のブログには次の３つのCSSファイルが読み込まれています。

1. http://shirabemono.cocolog-nifty.com/blog/styles.css
2. http://shirabemono.cocolog-nifty.com/.shared-cocolog/themes/texture/theme-arabesque.css
3. http://shirabemono.cocolog-nifty.com/.shared-cocolog/themes/common/base-weblog.css

1のCSSファイルは、2,3のCSSファイルのインポートと「カスタムCSSの編集」で追加したCSSが記述されています。
2のCSSファイルは、このブログで使っているテーマ「唐草模様」で設定されるCSSファイルです。
3のCSSファイルは、ココログのベースとなるCSSのようです。

ココログのカスタムCSSの編集～タイトルの背景を変更～

ブログのトップに表示されるタイトルの背景を変更してみます。CSSのセレクタは"#banner"です。background-image:に画像のURLを指定するだけです。

#banner{
  background-image: url("http://shirabemono.cocolog-nifty.com/blog/img/arabesque1.gif");
}

フォントサイズ・色・位置などを指定すれば、タイトルフォントも変更できます。

ココログのカスタムCSSの編集～タイトルに背景画像を設定する～

毎日のブログタイトルに背景画像を設定してみます。次の画像を設定します。

• TTL01.JPG (サイズ：570x40)

カスタムCSSは次のとおり。セレクタは"h3.entry-header"なので、そこに背景画像を指定します。

h3.entry-header{
  background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/TTL01.JPG");
  background-repeat:no-repeat;
  width:560px;
  height:35px;
  padding:5px 0 0 10px;
}