« カスタマイズ・サンプル<No.5:sewing> | トップページ | 第37回:記事欄を角丸の画像で囲んでみよう »

2006/09/24

第36回:記事内に挿入した写真にキャプション(説明文)をつけてみよう

先日『みんなで解決!広場』で「写真にキャプションが付けたい」という質問を見て検索した結果、「All About」の下記の記事を見つけました。

キャプション付き画像を左右の端に寄せたい

アドレスをつけて回答したのですが「よく判らなかった」という返事が返ってきてしまったので、僭越ながら内容をココログ用にアレンジしてみました。
※以下の内容は、AllAbout掲載の該当記事を全面的に参考にさせて頂きました。ありがとうございました。


写真にキャプション:サンプル
*江戸東京博物館内「モダン亭」にて*

実際にCSSを適用すると、こんな感じで画像の下にキャプションが表示されます。
CSSで文章の回り込みを右(または左)に設定するので、画像の後ろにキャプション以外の文章を記述すると画像の横に表示されます。


手順

CSSを編集する

  1. 「管理ページトップ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・ テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 「編集」画面のCSS記述欄に

    div.imagebox {
       float: right;/*画像の配置場所*/
       font-size: 80%;/*キャプションの文字サイズ*/
       color: gray;/*キャプションの文字色*/
    }

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

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

記事に画像を挿入する

記事欄への画像の挿入方法は
基本3: 記事欄への画像の挿入
を参照して下さい。
※この際に、<2.画像オプション>→<カスタム設定>にて「テキストの回り込み」を『指定なし』(チェックを外す)にして下さい。
※上記で設定したCSSで既に回り込みが設定されているためです。

画像タグにCSSを呼び出す記述を追加する

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

    <img alt="画像の名前" title="画像の名前" src="画像のアドレス" border="0"  />

    ※「カスタム設定」でサムネイルやポップアップを設定した場合はもっと複雑なタグが記入されます。
    というようなタグが表示されるので、上記のタグを

    <div class="imagebox">~</div>

    で囲む。
  3. 更に、最後の</div>の前にキャプションとなる文章を前後に<br />を付けて記述する。
    ※つまり、上の画像タグの場合だったら、

    <div class="imagebox">
    <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0"  />
    <br />キャプション<br />
    </div>

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

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

ここがポイント

  • 「カスタムCSS」内に記述するCSSのそれぞれのプロパティの値(上記では「right」「80%」「gray」) は自分の好きなようにアレンジして下さい。
    ここではそれぞれ「left」「small」「orange」にしてあります。
    ※色はいつものようにカラーコード(#●●●●●●)で指定してもOKです。
  • キャプションの文章が長くなる場合は、画像の幅に合わせて適当なところで改行(<br />)を入れて下さい。
  • 画像横の文章の回り込みを解除する場合は、解除したい場所(文章やタグの最後)に

    <br style="clear:both;" />

    を記述して下さい。

お世話になりました

「All About」
■素材サイト 「PRISM」様<記 事内のボタン素材>


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


|

« カスタマイズ・サンプル<No.5:sewing> | トップページ | 第37回:記事欄を角丸の画像で囲んでみよう »

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

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

コメント

All aboutのヤツ、実際のCSSをみると margin-left: 0.5em; が加わってますね。
「必要な記述は、わずかこれだけです。」
とか言いながら。ヒドイ…。(笑)

投稿: facet | 2006/09/24 18:34

■facetさん
こんにちは♪

>実際のCSSをみると margin-left: 0.5em; が加わって

そ、そうでしたか^^;
ソースまでは確認しなかったので気付きませんでした。

まあでも、確かに
「これだけだと何だかちょっと体裁が悪いなあ。でも、CSS加えるとまた説明が長くなるしなあ…」
と悩むことは私も時々ありますから気持ちは判る気がします(笑)

コメントありがとうございました。

投稿: tako→facetさん | 2006/09/30 11:39

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: 第36回:記事内に挿入した写真にキャプション(説明文)をつけてみよう:

» No.00 ご挨拶 [発見★Good Items!]
はじめまして、えると申します。 日常で見つけたお気に入りの『もの』『場所』『食 [続きを読む]

受信: 2006/10/01 21:49

« カスタマイズ・サンプル<No.5:sewing> | トップページ | 第37回:記事欄を角丸の画像で囲んでみよう »