スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
人気ブログランキングへ ブログランキング・にほんブログ村へ


本文中の画像の横に文章を書く方法

ブログ本文中の画像の横に文章を書く方法を調べたのでメモ代わりに書いておきます。
FC2ブログの場合で説明しますが、他のブログでもほぼ同じです。

単純に本文中に画像と文章を入れた場合、次のようになります。


風の谷のナウシカ Blu-ray版 (7/14発売予定)

画像の右側のスペースがもったいないですね。
これを次のように画像と文章を並べるやり方です。




探偵物語 Blu-ray版
これで右側のスペースに文字を入れることができます。

(探偵物語というとTVドラマ版をあげる人が多いですが、私は映画版も好きです。ドラマと映画は全く別物です。)


基本はサイトで文章の回り込みをやるのと同じ方法で、CSSを使います。

1.スタイルシートの修正
 環境設定→テンプレートの設定
 ×××のスタイルシート編集で
  一番下に次の2行を追加して更新
.amazon_af { float: left; margin-right: 1em; }
.af_clear { clear: both; }

2.本文中にCSSの記述
<div class="amazon_af">
 ここに画像と画像のリンク
</div>
 ここに画像の右側の文章
<div class="af_clear"></div>

※ amazon_afとaf_clearの名前は自分の好きなものに変えてもOKです。
※ 記事を書く画面の下にあるプレビューの画面では文章が横に来ませんが、プレビューボタンで出る画面や実際の画面では、ちゃんと文章が横に来ます。
スポンサーサイト
人気ブログランキングへ ブログランキング・にほんブログ村へ


コメント

非公開コメント

プロフィール

wombat

Author:wombat
名前の由来は家にある、このぬいぐるみからです

Sponsored Link
カルビー フルーツグラノーラ
カルビー フルーツグラノーラ

My Keepon マイキーポン
My Keepon マイキーポン

ホイップる
明治チョコレートセット

ホイップる 明治チョコレートセット
きのこの山、たけのこの里、アポロなどがアクセに





ウイルスバスター トレンドマイクロ・オンラインショップ







吉川友 YOU! ~the DVD~
吉川友 YOU! ~the DVD~

秋山莉奈 ザ・おしり3 [DVD]
石田紗英子 晴れのちドキドキ[DVD]

秋山莉奈 ザ・おしり3 [DVD]
秋山莉奈 ザ・おしり3 [DVD]

秋山莉奈 ザ・おしり2 [DVD]
秋山莉奈 ザ・おしり2 [DVD]

秋山莉奈 ザ・おしり[DVD]
秋山莉奈 ザ・おしり[DVD]

Cica写真集
Cica loves YOU!

Cica写真集 Cica loves YOU!

CicaファーストDVD
ハジメマシテ…Cicaデス

CicaファーストDVD ハジメマシテ…Cicaデス

1/32 小惑星探査機 はやぶさ 特別メッキ版 【Amazon.co.jp限定販売】
1/32 スペースクラフトシリーズ No.SP 小惑星探査機 はやぶさ 特別メッキ版 【Amazon.co.jp限定販売】

魔女の宅急便 [Blu-ray]
魔女の宅急便 [Blu-ray]

となりのトトロ [Blu-ray]
となりのトトロ [Blu-ray]

天空の城ラピュタ [Blu-ray]
天空の城ラピュタ [Blu-ray]

風の谷のナウシカ [Blu-ray]
風の谷のナウシカ [Blu-ray]


参考記事

Sponsored Link



ブログ内検索
最新記事

  全記事一覧
カテゴリ
月別アーカイブ
人気記事
   
アクセスランキング
   
最新コメント
最新トラックバック
リンク
RSSリンクの表示
QRコード
QRコード
Counter

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