解決済

clip!clip!
Ads By Google

昨日からライブドアを利用し始めました。
教えていただきたいことがあります。
写真を文章の間に挿入し、写真の両側は空白にしたい場合の設定方法はありますか?


2006-04-14 17:48の質問
ライブドア  写真  文章      方法  
ライブドア
ライブドア のホームページはこちらです
www.livedoor.com/
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(2)

1.

2006-04-14 18:24:18みんなナイスな
方法はいろいろあると思いますが,例えばこんなタグで書いてみてはどうでしょうか.

--サンプル開始--
写真の上の文章
<center><a href="http://image.blog.livedoor.jp/livedoorID/imgs/x/x/xxxxxxxx.jpg" target="_blank"><img src="http://image.blog.livedoor.jp/livedoorID/imgs/x/x/xxxxxxxx-s.jpg" width="160" height="213" border="0" alt="XXXXX" hspace="5" class="pict"></a></center>
写真の上の文章
--サンプル終了--

もっと体裁を工夫をしたい場合はこちらを参照してください.

2.

2006-04-14 18:30:43みんなナイスな
その写真は文章に対して左側に? 右側に? 中央に?
どこに挿入したいのですか?

空白と言うのは、字と写真が引っ付かないようにしたいと言うふうに捉えれば良いですか?

基本的な CSS ( スタイルシート ) の中に、.pict{} と書かれた部分があります。初期の段階では何も中には指示がされていないと思います。この中に、写真の周りに隙間を空ける為の指示を書き入れます。

そして、ブログの記事に貼り付ける写真画像のタグに、その指示を受ける為の " クラス " と言う属性を付け足します。

CSS ( スタイルシート ) は、管理画面の中の、『 カスタマイズ/管理 』 > 『 デザインの設定 』 > その下の方に 『 カスタマイズ 』 をクリックすると、でてきます。一番左側にあるタブをクリックするとでてくるのが CSS です。( ページが開いた初めから出てますけどね )

その中の .pict{ } の中にこう書き入れます。↓

margin:5px 10px 10px 0px;

この指示は、上に5px、右に10px、下に10px 周りに間を空けなさいという意味です。左側に写真を配置した場合は、左側に空白を明けない方が綺麗ですよね。必要ならば、一番最後の 0px のところにも数字を書き入れます。そして保存。CSS の再構築をして下さい。

次に記事中に貼り付けた写真画像のタグ中に、その指示を受け付けるクラスを設定します。こんな感じです。↓

<img border="0" src="写真画像のアドレス" width
="幅" height="高さ"> これを ・・・

こうします。↓

<img class="pict" border="0" src="写真画像の
アドレス" width="幅" height="高さ">

そして、記事を投稿する。そうすると、その指示どおりに写真画像の周りに隙間ができますよ。パディングとマージンの話はここを参考にして下さい。↓


回答レベル : 回答
Ads By Google

コメント(2)

#1.  KISS
2006-04-14 18:52:13

ありがとうございました。
なんか、適当にやってたら出来てしまいました。
せっかく教えて下さったのに、
自力で解決してしまい、申し訳ない。

#2.  
2006-04-14 19:06:33

自力達成できましたか.

トラックバック(3)

トラックバックURL:

パディングとマージン

2006年03月18日 AQ 『 ボックスと要素 』 の関連記事となります。先に説明したボックスを構成するものの中に、今回説明するパディングとマージンがあります。CSS ( スタイルシート ) を覗いているとやたら出てくるので、もうみなさんお馴染みの記号ではないでしょうか ...

Pet Lovers Only♪ at 2006年04月14日 18:32:53