調べものブログ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 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;
}

画像の枠に色違いのバリエーションを増やしてみた。

CSSとHTMLの書き方を説明します。

ココログのカスタムCSS編集機能を使って、文章の行数に応じて長さが変わる画像の枠を作って飾りつけしてみます。

ココログのカスタムCSS編集機能を使って、枠の中の背景画像を指定して文章を飾ってみる。次のような感じに文章に背景画像を設定できます。

ココログのカスタムCSS編集機能を使って、簡単に文章を枠で飾りつけしてみます。たとえば次のような目立つ枠が作れます。

設定方法を説明します。

ココログのカスタムCSSの編集機能を使って、毎日のブログタイトルに飾りをつけたいと思います。記事に飾りをつけるときは、自分で決めたセレクタ名をHTMLで指定することができました。ところがブログタイトルのHTMLソースはいじれません。つまりセレクタ名を自分で決めて、スタイルシートを書いたとしても、それをブログタイトルに適用することができないわけです。

では、ブログタイトルにカスタムCSSが適用できないのかというとそうではありません。実はブログタイトルにはセレクタが決められているのです。そのセレクタを使ってカスタムCSSを書いてあげればいいわけです。

• ブログタイトルのセレクタの調べ方
  1. ブラウザで自分のブログを表示する
  2. ブラウザでソースを表示
     IE7の場合:「ページ」メニュー→「ソースの表示」
     FireFoxの場合:「表示」メニュー→「ページのソース」
  3. ブログタイトルの文字列を探す
     このブログの場合次のようなタグが見つかります。
     

     <h3 class="entry-header"><a href="http://shirabemono.cocolog-nifty.com/blog/2008/01/post_b2c8.html">ココログのカスタムCSSの編集</a></h3>

  4. タグ"h3"とclass"entry-header"を"."でつないだものがセレクタになります。つまり、セレクタは"h3.entry-header"となります。
• ブログタイトルの飾りつけ
  次のようなCSSを書いて、このブログに適用しました。
  

  h3.entry-header{    border-width:2px 1px 1px 0.6em;    border-color:#339900;    border-style:inset double;    background-color:#EEEE99;    padding:0.2em 0 0 0.2em; }

  結果はこのブログのタイトルのようになります。なお、ブログタイトルのセレクタは毎日同じなので、CSSを適用すると過去から未来永劫同じスタイルが適用されます。

追記(2008/1/30)：
ブログタイトルのスタイルを変更しました。
詳細はこちら

ココログではカスタムCSS(Cascading Style Sheets)の編集ができます。スタイルシートをカスタマイズして、ブログ記事に飾り付けをしたいと思います。

• CSS編集手順
1. ココログ編集画面のデザインタブを選択
2. "カスタムCSSを編集"をクリック
3. 編集画面でCSSを記述
• CSSの記述例

  span.ltitle{border-width:0 0 1px 0.6em;             border-color:#006600;             border-style:solid;             background-color:#CCCC99;             margin-left:-1em}

  • 1行目：span.ltitleは"セレクタ"といい、後に続く"{}"で囲まれた部分を"宣言"といいます。宣言はスタイルの定義で、セレクタはその定義の名前のようなものです。HTML内でセレクタを指定するとそのスタイルが適用されることになります。border-widthは文字列を囲む箱の太さで、上、右、下、左の順に指定します。px,emは太さの単位です。pxはピクセル(1px=1ドット)、emは文字幅(1em=半角1文字分の幅)です。
  • 2行目：border-colorは文字列を囲む箱の線の色です。#rrggbb(rr=赤の明るさ、gg=緑の明るさ、bb=青の明るさ）で16進数で00-FFの間で指定します。
  • 3行目：border-styleは線のスタイル指定です。solidのほかにdotted, dashed, doubleなどがあります。
  • 4行目：background-colorは文字列の背景色です。
  • 5行目：margin-leftは、文字列の左位置です。-1emを指定することで文字列を１文字分左にずらします。
• HTMLにCSSを適用
  
  1. ココログの記事編集画面に行き、記事を書きます。
  2. "HTMLの編集"タブをクリックし、HTMLを表示します。
  3. CSSを適用したい文字列の前後に<span class="ltitle">、</span>を追加します。↓例
     <span class="ltitle">文字列</span>

ここで作成したCSSを各パラグラフのタイトルに適用しています。工夫次第でさまざまなスタイルが作成できます。

• 参考サイト
  CSS解説(http://anslasax.net/css-make/)
  W3C Cascading Style Sheets, level1(http://www.w3.org/TR/REC-CSS1)