さて昨日に引き続き、しかたないシリーズ。
今回はメニュー見出しにプチ画像を貼ってみましょう。まずは使用する画像を作るなり盗んでくるなりしてください。ピンポイント画像の職人といえばbooさんがいますが、今はタイトル横にしかつけてないようです。

■ メニュー横にプチ画像を付けようぜ。
まず、当ブログのメニュー見出しを見てくれ！どこみてんのよ～！！
そしてCSSをみてみましょう。
※テンプレートはヒヨコ君増殖中プチを使って説明します。
.menu-header {
font-weight: bold;
font-size: 75%;
font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif;
border-bottom: 1px dotted #999;
color: #003366;
padding-bottom: 3px;
padding-top: 5px;
text-indent: 2px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
メニュー見出し部分のCSSはこんな感じです。まず要らない物を削除します。border-bottom: 1px dotted #999;(見出し下のドットライン)イラネ。そして画像の設定を追記します。
.menu-header {
font-weight: bold;
font-size: 75%;
font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif;
/* border-bottom: 1px dotted #999;*/
color: #003366;
padding-bottom: 3px;
padding-top: 5px;
text-indent: 2px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
background-image: url(画像のアドレス);
background-repeat: no-repeat;
background-position: left center;
}
太字の部分をそのままコピペでOKです。そして見出しの字下げ調節はtext-indentで調節します。そして画像の大きさによっては縦の幅の設定をしなければならない場合があります、そんな時はpadding-top・padding-bottomで調節してください。
※ちなみにヒヨコテンプレートのメニュー背景色は＃F7F7F7を使用してます。

さて今回はどうでもいいような、じみーな技を。
Doblogは記事を書くと”2004/10/04のBlog”ってな感じで”日付”と”のBlog”がつきます。でもシンプルに日付だけにしたいなんて思う人もいるかもしれません。そこで”のBlog”を消してしまおうってこった。

■ ”のBlog”を消してしまおうぜ！
まず、当ブログの日付部分を見てくれ！そしてHTMLをみてみましょう。
<div class="blog-date"><a name="20041031">2004/10/31</a>のBlog</div>
日付部分のHTMLはこんな感じです。要素としては 全体的な.blog-date と 日付部分に a 要素。弄れるセレクタが２つあればもうこっちの物です。まず .blog-date(全体） を visibility: hidden; で消してしまいます。そして a要素(日付） を visibility: visible; で表示にしてあげます。これで”のblog”は表示上では完全に消え去ります。

★ CSS書式
CSSの記述としては元からある.blog-dateを探しvisibility: hidden;を追記。
.blog-date {
visibility: hidden;
}
そして新たに .blog-date a を記述します。
.blog-date a {
visibility: visible;
}
★ 問題点
この超スーパーテクニックを実践するに当たっての最大の難点は、そう！あなたが気づかなかったように、地味すぎて誰にも気づいてもらえないってことでしょうか・・・orz
過剰な反応は期待しないでおきましょう。

こんな物は”CSS辞典”等でググればいくらでも出てきますが書いてみました。ちなみInternetExplorerのみ対応などのブラウザ固有のプロパティは外してあります。
※まだテスト中なので消すかもしれません。宜しく。
★ 今現在の問題点。
プロパティと共に値を入れたいのだが、入れてしまうとゴチャゴチャになってしまう。はたまた値がないこの状態で利用価値があるのか・・・ん～


■ 文字色に関するCSSプロパティ
color ･･･････････････　文字色

■ 文字に関するCSSプロパティ
font ････････････････　一括指定
半角スペースで区切る事により一括指定が可能です。順序に決まりがあります。

font-style ･･････････　斜体
font-variant ････････　スモールキャップ(小文字のサイズで大文字にします)
font-weight ････････　文字の太さ
font-size ･･･････････　文字サイズ
font-family ･････････　文字の種類

☆ フォント一括指定の順序について
1. font-style　font-variant　font-weight　順不同
2. font-size　省略できません。
3. line-height　値の前に/(スラッシュ)が必要
4. font-family　省略できません。

■ テキストに関するCSSプロパティ
line-height ･･････････　行の間隔
text-align ･･･････････　行揃え
vertical-align ････････　縦方向の位置
text-indent ･････････　一行目のインデント(字下げ)
text-decoration ･････　下線、上線など
text-transform ･･････　大文字・小文字
white-space ･････････　スペース・タブ・改行、処理方法
letter-spacing ･･･････　文字の間隔 (MacIEでバグ有り)
word-spacing ････････　単語の間隔

■ 背景に関するプロパティ
background ･･････････････　一括指定
半角スペースで区切る事で下記の一括指定が可能です。※順序は任意

background-color ･････････　背景色
background-image ････････　背景画像
background-repeat ････････　画像の並び
background-position ･･･････　画像の位置
background-attachment ･･･　画像の固定

■ ボックスに関するCSSプロパティ
★ 幅・高さ
width ･･･････････････　幅
height ･･････････････　高さ

★ 配置・表示等
display ･･････････････　要素の表示形式
float ････････････････　回り込み
clear ････････････････　回り込み解除
z-index ･････････････　ボックスの重なる順序
overflow ････････････　はみ出し部分の表示方法
clip ･････････････････　ボックスの表示範囲
visibility ････････････　ボックス内容の非表示

position ･････････････　要素の配置方法
top ･･････････････････　基準からの位置
right ･････････････････　基準からの位置
bottom ･･････････････　基準からの位置
left ･･････････････････　基準からの位置
※ top right bottom left はpositionでstatic以外が指定されている時のみで有効

★ パディング
padding ･････････････　一括指定　※複数指定には法則有り

padding-top ･･････････　上のパディング
padding-right ･････････　右のパディング
padding-bottom ･･････　下のパディング
padding-left ･･･････････　左のパディング

☆ パディング複数指定の法則について
※各値は半角スペースで区切ります。
値1つの場合　上下左右
値2つの場合　上下・左右
値3つの場合　上・左右・下
値4つの場合　上・右・下・左
※ 時計回りと覚えておきましょう。

★ マージン
margin ･･････････････　一括指定　※複数指定の法則はパディングと同じです。

margin-top ･･･････････　上のマージン
margin-right ･･････････　右のマージン
margin-bottom ･･･････　下のマージン
margin-left ･･･････････　左のマージン

★ ボーダー
border ････････････････　上下左右一括指定
border-top ･･･････････　上一括指定
border-right ･･････････　右一括指定
border-bottom ･･･････　下一括指定
border-left ･･･････････　左一括指定
※ 半角スペースで区切る事により一括指定が可能です。

border-width ････････　幅に対する一括指定
border-style ････････　線種に対する一括指定
border-color ････････　色に対する一括指定。
※ 複数指定の法則はパディングと同じです

border-top-width ･････　上ボーダー幅
border-top-style ･･････　上ボーダー線種
border-top-color ･････　上ボーダー色
border-right-width ････　右ボーダー幅
border-right-style ････　右ボーダー線種
border-right-color ････　右ボーダー色
border-bottom-width ･　下ボーダー幅
border-bottom-style ･　下ボーダー線種
border-bottom-color ･　下ボーダー色
border-left-width ･････　左ボーダー幅
border-left-style ･････　左ボーダー線種
border-left-color ･････　左ボーダー色

※ ボーダーの指定方法の例
セレクタ {
border-top-width : 1px ;
border-top-style : solid ;
border-top-color : #000000 ;
}

セレクタ { border-top : 1px solid #000000 }

上記2つの記述は同じ意味を持っています。

Doblogさんがメンテなのでドットシティに遊びに行ってきました。みんな遊びに来てくれました。みんなありがとう。もうね、チャットログ残らない？から実は必至だったのですよ・・・ﾌﾌﾌ。みんなに返答できなくてごめんよ。

★ 速攻で酔っちまうコロ助★可愛い。（´m`）ｸｽｸｽ

お参りしようと思って神社にいったんだよ。

雲に乗ったんだ。

スキー場にも行ったよ。

そして温泉に入ってきたよ。

■ ヒヨコ君増殖中はDoblogデザイン変更ネタ中心で作られております。
当コンテンツに書かれている物すべてはCSSの技術として誰でも使用できる物なので、お気軽にどうぞ。すべてのコンテンツはジャンルに格納されてます。
■ ピックアップ記事
★ CSSってどうやって編集するの？
★ CSSの追記とかってどうやってやるの？
★ CSSで使用されるコメントについて。
★ 公式テンプレCSSセレクタ領域はこうなっているかも！?
★ 公式テンプレCSSセレクタ領域！?　パート2

■ ヒヨコ君増殖中ではオリジナルテンプレートを配布しております。
★ ヒヨコ君増殖中テンプレート一覧
★ ヒヨコ君増殖中テンプレート基本カスタマイズ！
☆ ver2.0各ブラウザ表示結果
■ ヒヨコ君テンプレ改 ＆素材提供blog様情報
★ オシャレBlog普及委員会！

■ 只今使用中の画像
★ *Signs and Wonders* by signさんの素材リンク集より。
★ PhotoBox YAS からお借りいたしました。

■ GUESTBOOK　
・ 感想・要望・足跡等、お待ちしてます。
・ CSS関連の疑問質問もどうぞ。ある程度の事なら何とかお答えできそうです。
・ また、当ブログ・テンプレートのデザイン崩れなど教えてもらえると大変助かります。
※ すべてにお答えできる訳ではないのであらかじめご了承を・・・・

★ デザイン変更。今回は定番な空です。 ※ 少し大きめ20KB程度あります。
★ 9月は歌の強化月間です（ネタ切れとも言う)。ブルーになれる詩満載です。
★ 見に来てくださった皆様、サーバが重くて本当に申し訳ありません。
★ ヒヨコ君増殖中INDEX← 実験用なので気にしないでください。

何気に好評なプチで右メニュー版を作ってみました。
blogの幅などはほぼ同じになっております。

★ ヒヨコ君増殖中テンプレート一覧

■ お題：Doblogに毎月いくら払える？

ん～払えない。

★ 理由 (何気に要望)
・ こんな囚人番号のようなアドレスに(略
・ SEO対策的な部分での不満。
・ Doblogサポート体制の不安。
・ お金払ってまでDoblogの自称サポート系を続ける気がない
※ 正式サービス後に現β版ユーザーさん達に広告やら制限なんてつけやがりましたら、あんな事やこんな事して(以下自粛

★ 余談
Doblogさんはやる気なし状態？それとも急ぐ理由がなくなったのでしょうか・・・TOPも放置、要望メールも放置ですよ。
バグ報告ならメール返ってくるのかな？何てね・・・(´Д｀；) uhehe

※ ちょいと修正しました

★ 余談
※ あいのりの歌で壊れかけています。妙なコメントはスルーでお願いします。(汗

■ Doblogをただの日記に改造
Doblogはシンプルな日記としての機能は十分備えています。そこで日記を目的としたレイアウトを考えてみました。
★ サンプル

日記の投稿はDoblogツールバーを使用、又はCSSを解除させる事により可能になります。コメントが貰いたいなら表示も可能です。このようにDoblogはCSSを屈指する事でさまざまな用途での使い方が実現できます。ピーク時に重くなるのが欠点ですがね。
※ サンプルページのCSSを抜いて使用してしまうと、デザインを元に戻せない危険性がありますので注意してください。

今度は画像の表示のみにこだわった使用方法でも考えてみます。
※ 次回があるかは不明です

さて、変な歌をアップしたためヲタ疑惑浮上中ですが(笑)
久しぶりのまともCSS関連です。

■ コメント欄・記事投稿で使用する太字・斜体・下線の差別化
記事投稿で太字・斜体・下線が使用できますが、これはコメントにも使用できます。
今回は一歩進んでコメント欄と投稿記事で別の効果をあたえる方法を紹介します。

★ すべてに適応
b { プロパティ: 値; }
i { プロパティ: 値; }
u { プロパティ: 値; }
★ 投稿記事限定の適応
.blog-text b { プロパティ: 値; }
.blog-text i { プロパティ: 値; }
.blog-text u { プロパティ: 値; }
★ コメント欄限定での適応
.blog-popup-text b { プロパティ: 値; }
.blog-popup-text i { プロパティ: 値; }
.blog-popup-text u { プロパティ: 値; }
■ 初めての方は下記を参考にどうぞ。
★ blogインプットで好きな色が３色使えるって知ってるかい？
★ blogインプットで好きな色が３色使えるって知ってるかい？
★ 限定指定の応用編です。気合入れていきましょう