« ココログのカスタムCSSの編集~文章を枠で飾りつけ~ | トップページ | ココログのカスタムCSSの編集~文章を枠で飾りつけ その2~ »

2008年1月26日 (土)

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

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

海の画像を設定しました。このような感じで文章に背景を設定できます。背景画像は別途保存する必要があります。文の位置・幅の設定にちょっとクセがあります。画像の保存の仕方、背景画像の設定の仕方、文の位置・幅の設定の仕方を説明します。
  • 画像の保存
    1. ココログ管理ページから「コントロールパネル」をクリック
    2. 「コントロールパネル」内の「ファイル」をクリック
    3. 「blog」フォルダをクリック
    4. 「新しいフォルダの作成」に「img」という名前を入力し、「フォルダを作成」ボタンをクリック
    5. 「img」というフォルダができる
    6. 「img」フォルダをクリック
    7. 「新規ファイルのアップロード」の「参照」ボタンをクリック
    8. 画像ファイルを選択する
    9. 「アップロード」ボタンをクリック
    10. 以上で、ブログのimgフォルダに画像ファイルが保存される。このブログの場合、URLはhttp://shirabemono.cocolog-nifty.com/blog/img/{画像ファイル名}
    11. UMI004.JPGという画像を保存した場合、URLは、http://shirabemono.cocolog-nifty.com/blog/img/UMI004.JPG、となる
  • カスタムCSSで本文中の背景画像を設定
  • ここでは<div>タグを使います。「カスタムCSSを編集」で次の設定を追加します。

      div.umiback{
      background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/UMI004.JPG");
        width:220px;
        height:184px;
        padding:20px 40px;
      }
    • background-imageで背景画像のURLを設定します。
    • width,heightはその背景画像を適用する領域の幅と高さからpaddingを引いた値を指定します。
    • paddingは、背景の外枠から文章までの間隔です。"padding:20px 40px"の場合、上下が20pxの間隔、左右が40pxの間隔に設定されます。
    • この場合、背景画像が適用される範囲は、幅300px(220px+40px+40px),高さ224px(184px+20px+20px)になります。
  • HTMLの書き方
    上の例では次のようにHTMLを書きました。文章を<div class="umiback">と</div>で挟むだけです。
    <div class="umiback">海の画像を設定しました。このような感じで文章に背景を設定できます。背景画像は別途保存する必要があります。文の位置・幅の設定にちょっとクセがあります。画像の保存の仕方、背景画像の設定の仕方、文の位置・幅の設定の仕方を説明します。</div>

以上で文章中に背景画像が設定できます。背景画像も工夫次第でいろいろな効果を出せそうです。

« ココログのカスタムCSSの編集~文章を枠で飾りつけ~ | トップページ | ココログのカスタムCSSの編集~文章を枠で飾りつけ その2~ »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/17850274

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集~背景画像で文章を飾る~:

« ココログのカスタムCSSの編集~文章を枠で飾りつけ~ | トップページ | ココログのカスタムCSSの編集~文章を枠で飾りつけ その2~ »