【CSS 初級】 CSSで画像の中にキャプション（説明）を入れるサンプル
何だか最近のブログでは、画像の中に文字を入れるのがちょいちょい流行ってるようです。 でもこれって若干の知識がある人しか使えませんよね。 なので今日は、誰でもこの技が使えるように簡単なCSSサンプルを作ります。
こんな感じですね↓
では、まずはCSSから。 コピーしてご自分のスタイルシートに追加するだけでＯＫです。 (ダブルクリックで全選択されます)
あとは、下記のように記事内などで呼び出すだけです。 ただし、自動改行で記事を書いている方は、改行しないでそのまま並べて書きましょうね。
HTML
「あれれ？ 何だかさっきと違わない？」 って思った方、あなたは正しい。 これだと、文字の部分だけにしか背景の黒は出ません。 一番上のサンプルみたいに背景を伸ばすには、CSSにピンクでハイライトされた部分を追加します。
これで背景色が最大まで表示されます。 px指定は 「画像の横幅-10px」 です。 このサンプル画像は500pxですので、-10pxで490pxですね。 さっきの表示でいいって方は、このカスタマイズは忘れてＯＫです。
以上、「CSSで画像の中にキャプション（説明）を入れるサンプル」 でした。 今回は初級という事ですので割合しますが、このサンプルの内容をいじれば、表示する場所とかサイズとか、かなり色々と変える事が出来ます。 やってみたい方はご自由にいじってみて下さい。
＊ 追記
ご質問をいただいたので、背景を横全体に表示する場合で、画像サイズを複数指定する時の簡単なサンプルを追記しておきます。
CSS スタイルシート
こんな感じでコーディングしておけば、様々なサイズの画像にも対応出来ますね。
HTML
上記のように、p タグにクラス指定してあげればＯＫです。
こんな感じですね↓
公園で、何か楽器みたいなのを持ちながら見つめあってるそんな画像
では、まずはCSSから。 コピーしてご自分のスタイルシートに追加するだけでＯＫです。 (ダブルクリックで全選択されます)
あとは、下記のように記事内などで呼び出すだけです。 ただし、自動改行で記事を書いている方は、改行しないでそのまま並べて書きましょうね。
HTML
ここにキャプション
「あれれ？ 何だかさっきと違わない？」 って思った方、あなたは正しい。 これだと、文字の部分だけにしか背景の黒は出ません。 一番上のサンプルみたいに背景を伸ばすには、CSSにピンクでハイライトされた部分を追加します。
ここにキャプション
これで背景色が最大まで表示されます。 px指定は 「画像の横幅-10px」 です。 このサンプル画像は500pxですので、-10pxで490pxですね。 さっきの表示でいいって方は、このカスタマイズは忘れてＯＫです。
以上、「CSSで画像の中にキャプション（説明）を入れるサンプル」 でした。 今回は初級という事ですので割合しますが、このサンプルの内容をいじれば、表示する場所とかサイズとか、かなり色々と変える事が出来ます。 やってみたい方はご自由にいじってみて下さい。
＊ 追記
ご質問をいただいたので、背景を横全体に表示する場合で、画像サイズを複数指定する時の簡単なサンプルを追記しておきます。
CSS スタイルシート
こんな感じでコーディングしておけば、様々なサイズの画像にも対応出来ますね。
HTML
上記のように、p タグにクラス指定してあげればＯＫです。
この記事へのコメント
もきち
どうも、ご無沙汰しております！もきちです^^
おお！何だかｵｼｬﾚですねえ～。これは使わせてもらいます！
でも僕みたいに画像のサイズを画像ごとに変えているとなると
どうなるのでしょう…？
基本、横幅400pxですので-10pxの390pxなのですが…
横に4枚ほど並べるとき横幅の関係上、÷4の100pxにしたりするのです。
記事全部の画像が400pxではないので…100pxの画像はどうしましょう？
あ、縮小するので拡大するときに通常の400pxとなるので
問題ないんですかね？
乱文ですみません・・・
返信お待ちしております。
2012年03月29日 21:32
n-life
非常に参考になりました！
ありがとうございますm(__)m
2012年03月29日 23:09
TACHIBANA_3
右の子供「おい、バンドやろーぜ!!」
これが後の『けいおん!』となる伏線であった
2012年03月30日 02:28
にっしん41
はい、どうも。相互リンクの承諾感謝です！よろしくお願いしますね！
なるほど、画像に文字を入れるとはシャレてますね～
自分はずっと画像の上か下に書いてただけだけど、こっちのほうがなんか断然見栄えが良いですね。
しかし結構知識がいるのか、他ブログの人が難なくやってたから設定かなんかで勝手にできるのかと思ってたｗ
今度やる気になったら挑戦してみようと思います！ありがとうございました！
2012年03月31日 01:02
HiRo
もきちさんへ
あーこれは書いておいた方が良さそうですね☆
後で、いくつかのサイズを指定する場合のCSSサンプルを追記しておきますねー＾＾
>>拡大するときに
多分その拡大ってのは、直接画像のURLにアクセスすると思うので、拡大画面でのCSSは指定出来ないと思います。
2012年03月31日 11:05
HiRo
n-lifeさんへ
いえいえ＾＾
使いたくなったら是非是非！☆
2012年03月31日 11:06
HiRo
TACHIBANA_3へ
それ何てショタゲ？wwww
くっそ！ こんな事なら、画像は幼女にしとけばよかっ(ry
2012年03月31日 11:08
HiRo
にっしん41さんへ
>>はい、どうも。相互リンクの承諾感謝です！よろしくお願いしますね！
こちらこそ！ ご依頼ありがとうございます＾＾
>>自分はずっと画像の上か下に書いてただけだけど、こっちのほうがなんか断然見栄えが良いですね。
最近流行ってるみたいですが、私も記事で使った事は無いですw
やる気になったら是非是非！www
2012年03月31日 11:10
mimihei
あれ、そういえばアニメ系のネタ以外の記事が増えてるような気がするのは俺だけだろうか？？
ってゆうか新しい今のブログになってもＧｏｏｄデザインのテンプレ
また作って配布してくれますよね？？？？？
配布してくれたら毎回テンプレ変えちゃいますよｗ（笑）
2012年03月31日 21:19
HiRo
mimiheiさんへ
一応、前のブログでもデザインの事をもっと書くつもりでしたが、あれって書くの結構 「ﾏﾝﾄﾞｸｾｰ」 ので、今回はもうブログの名前からして書かなきゃいけないように自分を追い込んでいますw
>>ってゆうか新しい今のブログになってもＧｏｏｄデザインのテンプレ
また作って配布してくれますよね？？？？？
上手なコーディングが固まり次第作り始めますが、もうちょいかかるかもです＾＾；
2012年04月01日 16:06