スポンサーサイト

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

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

smpl_rc960 テンプレートで画像を表示すると、後続のテキストが右側に回り込みます。
回り込み解除のためには p 要素に style 属性を付与します (詳しくはこちら)。
しかしながら、画像を多用するブログの場合にその都度 style 属性を付与する必要があります。
そこで今回は、基本的にテキストが回り込まないようにする方法をご紹介します。

Looking for ...

© Wild Dogger

ミーアキャットかわいいですね。わかりやすいように小さめの画像を表示します。

続きを読む

スポンサーサイト

[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>
プロフィール

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

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