ウェブログ・ココログ関連

2008年2月10日 (日)

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

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

続きを読む "ココログのカスタムCSSの編集~プルダウンメニューの作成~" »

2008年2月 8日 (金)

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

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

続きを読む "ココログのカスタムCSSの編集~カーソルを重ねると色が変わるメニューの作成~" »

2008年2月 5日 (火)

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

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

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

2008年2月 4日 (月)

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

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

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

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

続きを読む "ココログのカスタムCSSの編集~Google検索ボックスの設置~" »

2008年2月 3日 (日)

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

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

続きを読む "ココログのカスタムCSSの編集~メニューの作成~" »

2008年2月 2日 (土)

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

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

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

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

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

続きを読む "ココログのカスタムCSSの編集~2段組レイアウトの設定~" »

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

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

続きを読む "ココログのカスタムCSSの編集~ブログの横幅を変更する~" »

2008年2月 1日 (金)

ココログのCSSファイル

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

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

続きを読む "ココログのCSSファイル" »

2008年1月31日 (木)

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

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

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

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

続きを読む "ココログのカスタムCSSの編集~タイトルの背景を変更~" »

2008年1月30日 (水)

ココログのカスタム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;
    }