« 第23回:サイドバーに掲示板を設置してみよう | トップページ | 第25回:記事に挿入した画像をポラロイド写真風に表示してみよう »

2006/04/02

第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう

shidarezakura 記事部分に挿入した画像に写真風の枠線と影を付けてみましょう。
携帯のカメラで撮った写真でも立体感のある、ちょっとスタイリッシュ(?)な雰囲気で表示させることが出来ます。


このカスタマイズは、下記ブログの記事を全面的に参考にさせて頂いています。

「小粋空間」様 内 『CSSで画像に影をつける(ドロップシャドウ)』(CSSタグ)
「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』(影用画像入手)

ありがとうございました。

手順

事前準備1:影用の画像を準備する

「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』の記事からリンクしてある影用の画像をダウンロードします。
該当ページの真ん中辺りで「画像はこちら。」と書いてある部分の「こちら」に貼ってあるリンクをクリックし、表示されたページの画像を自分のPC内に保存して下さい。

事前準備2:影用の画像をココログにアップロードする

上記で入手した画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1:ファイルのアップロード』
を参照して下さい。

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしリンクを開く。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は
    『第3回:カスタムテンプレートを作ってみよう』
    を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    .shadow {
        background: url(●●●) right bottom;
        float: left; /* 回り込み制御 */
    }

    .shadow img {
        position: relative;
        left: -5px; /* 画像を左へ移動 */
        top: -5px; /* 画像を上へ移動 */
        padding: 5px; /* 画像枠 */
        background: #ffffe0; /* paddingを設定した場合の背景色 */
        border: 1px solid #999999; /* 画像の枠線 */
    }


    を全て半角英数で記述する。
    ※●●●には上記で保存した画像のURLを入力して下さい。
    上記のCSSは全て 「小粋空間」 様に記載してあるタグのコピーです。
  5. 「変更を保存」ボタンを押す。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。

今までのCSS設定はここで終了でしたがこのカスタマイズの場合、画像を挿入する都度その画像に上記のCSSを呼び出すタグを挿入する必要があります
今回は画像の挿入方法も合わせて説明します。

画像の挿入

  1. 記事作成画面の任意の位置で「IMG(画像の挿入)」ボタンを押す。
  2. 「画像の挿入」ウィンドウが開くので、「1.画像の選択」の「参照」ボタンを押し挿入したい画像を選択、「開く」ボタンを押す。
  3. 元の画面に戻るので「画像の挿入」ボタンを押す。
    ※「カスタム設定」は必要に応じて設定して下さい。
    ※詳細については下記の記事を参考にして下さい。
    基本3: 記事欄への画像の挿入
  4. 記事作成画面に画像が表示されれば完了。
    ※「プレーンテキストモード」の場合は、画像は表示されず画像表示用のタグが自動入力されます。

画像タグに影を付けるための記述を追加する

  1. (「リッチテキストモード」の場合)「HTMLの編集」画面に切り替える。
    ※「プレーンテキストモード」の場合はそのままでOKです。
  2. 画面に

    <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left; MARGIN: 0px 5px 5px 0px" />

    というようなタグが入力されていると思うので、そこから

    MARGIN: 0px 5px 5px 0px

    を削除する。

    ※「カスタム設定」を設定した場合はもっと複雑なタグが記入されますが、 そこからも同様に「MARGIN: 0px 5px 5px 0px」の部分を探して削除して下さい。
    ※この部分が残っていると影の表示がずれてしまいます。
  3. 上記のタグを

    <span class="shadow">~</span>

    で囲む。
    ※つまり、上の画像タグの場合だったら、

    <span class="shadow"><img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left" /></span>

    になります。
  4. 記事が書き終わったら「保存」ボタンを押す。
  5. ブログを表示してイメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか?

ここがポイント

  • 今回のカスタマイズは、画像タグに「shadow」というセレクタを指定することによって、 影を付ける場合と付けない場合を選択できるようになっています。
    影を付ける場合は、必ず画像タグに<span class="shadow">~</span>を追加入力して下さい。
  • 画像を挿入するときに生成されるタグの「margin」指定が残っていると影がずれて表示されてしまいます。
    必ず「margin」指定を削除して下さい。
  • 既に入力されている画像にもCSSを設定した上で<span class="shadow">~</span>を追加すれば影を付けることが可能です。
  • 上記以外の詳細な設定についても「小粋空間」様の該当記事で解説されていますので、ご参照下さい。

お世話になりました

「小粋空間」
「POCHIKING」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


|

« 第23回:サイドバーに掲示板を設置してみよう | トップページ | 第25回:記事に挿入した画像をポラロイド写真風に表示してみよう »

カスタマイズ」カテゴリの記事

エントリー部分」カテゴリの記事

画像処理」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

画像なのですが、添付はできるのですが、いつも左端によっています。これを中央に持ってきたいのですが、どうすればいいですか?
教えて下さい。

投稿: ant | 2006/05/22 17:50

■antさん
こんにちは。
ご質問の件ですが、下記のページの内容が参考になると思います。
参照してみて下さい。

http://www.tagindex.com/kakolog/q1bbs/1101/1305.html

尚、画像を挿入する際には「カスタム設定」にして「テキストの回り込み」のチェックを外すのをお忘れなく。

投稿: tako→antさん | 2006/05/22 21:32

コメントを書く



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


コメントは記事投稿者が公開するまで表示されません。



トラックバック

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

この記事へのトラックバック一覧です: 第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう:

» 写真に枠をつけたい! [別館 ソメイヨシノ-KinKi Kids only-]
 写真に枠をつけてみたくって  いつも参考にさせて頂いている  takoさんの [続きを読む]

受信: 2006/08/12 15:02

« 第23回:サイドバーに掲示板を設置してみよう | トップページ | 第25回:記事に挿入した画像をポラロイド写真風に表示してみよう »