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

Firefoxで連続した半角文字が折り返されない

URLなど半角文字が連続している文章を書くと、Firefoxでは改行されずに枠からはみ出します。ie7では勝手に改行されてはみ出すことはありません。これはFirefoxの仕様（バグ）らしいです。
対処法としては、Firefoxではurl_breakerという拡張が公開されているとのこと。

参考サイト
小粋空間: Firefox・Netscapeで連続した半角文字を折り返す

追記：
Firefox3ではデフォルトで自動的に改行されるようになったそうです。

参考サイト
url_breaker - あすかぜ・ねっと -

ココログのカスタムCSSの編集～文章を枠で飾りつけ その３～

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

青い枠

赤い枠

緑の枠

黄の枠

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

ココログのカスタムCSSの編集～文章を枠で飾りつけ その２～

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

このような一行の枠

このように
数行にわたる枠などが
簡単に作れます
作り方を説明します

ココログのカスタムCSSの編集～背景画像で文章を飾る～

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

海の画像を設定しました。このような感じで文章に背景を設定できます。背景画像は別途保存する必要があります。文の位置・幅の設定にちょっとクセがあります。画像の保存の仕方、背景画像の設定の仕方、文の位置・幅の設定の仕方を説明します。

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

ココログではカスタム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)

ブログをはじめる

• ブログ選びのポイント
  どのブログサイトを使おうか。無料ブログはたくさんあるし、さまざまな機能がある。あとで変えようにも記事の移動など面倒そうなので悩むところ。選定基準はいろいろあると思うが。。
• 編集の柔軟性（HTML、CSSが編集可能）
• アフィリエイトが利用できるかどうか
• ブログのアドレスがサブドメイン形式であること
• 個別記事のファイル形式が静的なページであること
• 再構築が必要であるかどうか(投稿時にかかる時間）

• 無料ブログサイト
  "ブログ、比較"でググれは、ブログ比較サイトが山ほど出てくる。そこで紹介されている中で目に付いたブログサイト。
  
  • FC2
    オススメしているサイトが多いかも。上の条件は満たしてるらしい。容量1GB。
  • DTi
    FC2と同等機能に容量2GBでFC2より一歩リード？
  • ココログ
    初心者向け？再構築が必要らしい。Niftyユーザは2GB。とりあえずコレか？
  • @Wiki
    ブログサイトではなさそう。Wikiが構築できるというのが面白そう。容量無制限。

• ブログマナー
  とりあえずブログを書く上での心構え
  
  • 他人を誹謗・中傷しない
  • 他人の著作権は守る
    
    • 無断転載、画像・音楽の使用
    • 素材配布サイトなどは使用条件を守る
  • 他人の肖像権を守る
    
    • 芸能人の写真は所属プロダクションに肖像権がある
    • 一般個人の場合はプライバシーの問題にもなる
  • 個人情報は書かない
  • コメント欄の管理
  • トラックバックマナー
    
    • 関係ない記事にはトラックバックしない
    • 相手の記事にコメントを残しておく
    • 相手の記事へのリンクを貼る

• 参考サイト
  
  • 無料ブログ比較(http://www.boraro.gozaru.jp/blog._guide.html)
  • ブログ比較表(http://maekin.cool.ne.jp/blog/)
  • ネットマナー(http://kogumaneko.tk/cc/manner_0802.html)