スポンサーサイト

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

[smpl_rc960][How to] テキストの回り込みを解除する方法

下の画像のように、右側に余白が少しだけ残るようなサイズの画像の場合、
テキストが右側に回りこむととても読みづらくなります。
以下のように記述することで回り込みを解除することができます。

One bored sweet cat in the park

© Rachel16857

回り込みを解除して画像の下に文章を表示させます。

<img src="画像URL" />
<p style="clear: both;" >
回り込み解除後のテキスト
</p>
スポンサーサイト

[smpl_rc960][Update] 110221 修正内容

2/21アップデートしました。
主な修正内容は以下。
その他、表示不良がありましたらぜひご連絡お願いします。

  • 拍手、Twitter、Facebook アイコンの表示位置を調整
  • 大きなサイズの画像が右側で切れる現象を修正
  • <pre>要素のスタイルを変更

[smpl_rc960][How to] 埋め込み動画をすっきり表示させる

埋め込み動画をきれいに表示させる方法。

キャプションを入れる方法と同様に div で囲むことで、動画右側にマージンを作りすっきり見せます。

<div class="objwrap">
埋め込みソースを貼り付け
</div>

[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 さんからお借りしました。

プロフィール

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

検索フォーム
カレンダー
01 | 2011/02 | 03
- - 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 - - - - -
カテゴリ
月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。