スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[smpl_rc960][How to] 画像下部にキャプションを入れる

画像の下にキャプション (コメント) を表示させる方法です。

© imaginary animal

左の画像の下に表示されている著作権表示のように、ちょっとしたテキストを表示させたいときがあると思います。
その場合は、以下のソースのように div で囲み、p 要素内にキャプション内容を記述することで表示させることができます。

<div class="objwrap">
<img src="画像URL" />
<p>キャプション内容</p>
</div>

[smpl_rc960][How to] 画像の表示位置

smpl_rc960 テンプレートでの画像表示位置について説明します。

Red Left

img タグで画像を表示させた場合、基本は左寄せで表示されます。また、img タグに続くテキストは右側に回りこみます。

<img src="画像のURL" />
To the right?

画像を右寄せで表示させたいという場合は、
class="rightside" を img タグ内に記述することで右寄せにすることができます。
この場合、後続のテキストは左側に表示されます。

<img src="画像のURL" class="rightside" />

1枚目の画像は grebo guru さん、 2枚目の画像は clspeace さんからお借りしました。

[テスト] 表示確認用エントリー

h4サイズの文字

h5サイズの文字
h6サイズの文字
  • リストテスト
  • りすとてすと
  • listtest

パラグラフ。p 要素。

引用。blockquote 要素。
thtest thてすと thテスト
tdtest tdてすと tdテスト
tdtest tdてすと tdテスト
ソース。pre 要素。
プロフィール

webcata

Author:webcata
FC2 ブログ用テンプレート作ってます。
ご質問などあればできる限りお答えします。
コメントにてご質問お願いします。

検索フォーム
カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
カテゴリ
月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。