解決済

clip!clip!
Ads By Google

サイドバーの画像のズレについて

サイドバーに画像を数枚アップロードしたのですが、画像の横にリンクつきの文字を打つと文字数によって画像がずれてしまいます。左寄せでキレイに縦に並べたかったので、
<left><img src="画像"></a><a href="URL">文字</a></left>
って感じで書けば文字数に関係なく縦にキレイに画像が並んでくれると思ったのですが、だめでした。どうすればよいのでしょうか?

説明が下手なのでURLのっけます。
問題のページ

member's blogとなっているところの写真五枚を左揃えで画像を並べたいです。

よろしくお願いいたします。

2006-06-27 03:37の質問
画像  ズレ  
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(4)

2.

2006-06-27 08:01:18ベスト
質問者の思っているよりも色々、間違っています。

まず、<left>というHTMLタグはありません。<center>というのはありますが。
次に、imgタグに</a>は要りません。
一番の失敗は、画像ファイルをインターネットにアップロードしていないことです。
質問者のPCの中のファイルを指定していますから、他のPCで見ることはできません。

まず、画像をインターネットにアップロードしてください。
livedoor Blogを利用して、ファイルを使う方法は、
「livedoor Blogで、ファイルをアップロードして、記事の中以外で使うために
)」
を参考にしてください。

必要なURLを求めたら、フリーエリアプラグインの中に
<div align="left">
<a href="ブログ1のURL"><img src="画像1のURL">ブログ名1</a><br>
<a href="ブログ2のURL"><img src="画像2のURL">ブログ名2</a><br>
<a href="ブログ3のURL"><img src="画像3のURL">ブログ名3</a><br>
<a href="ブログ4のURL"><img src="画像4のURL">ブログ名4</a><br>
<a href="ブログ5のURL"><img src="画像5のURL">ブログ名5</a>
</div>
という感じで、記入してください。
下の「改行設定」を「変換しない」にセットし[この内容で設定する]をクリックします。

<br>は改行です。
これは、一行目の <div align="left">と最後の </div>で改行させたくないために、「改行設定」を「変換しない」にして、自分でわざわざ、改行を指定する方法を取りました。
一行目と二行目、最後の行とその前の行をくっつけて、入力すれば、「改行設定」を「変換する」にセットすることで、<br>は不要になります。
どちらも結果は同じですので、お好きなほうを。

プラグインの設定はできているので、これで大丈夫だと思いますが、うまく行かない場合は、コメントに書いてください。解決したら、この質問を解決済にしておいてください。
回答レベル : 回答

返答まで時間がかかってしまい申し訳ありませんでした!
無事に直すことができました。ありがとうございました!

1.

2006-06-27 06:50:47
次の書き方をすればどうでしょうか.

<img src="画像" align="left"></a><a href="URL">文字</a><br clear="left">

変更はimgタグに align="left" を追加するのと <br clear="left"> を使う点です.

4.

2006-06-27 10:36:40
>>1
で何か妙なタグを書いてしまったので訂正.

現在の状態だと自分のパソコンでしかリンクの画像表示されないので,まずローカルにあるこの画像をアップロードしてください.
C:\Documents and Settings\tatsuya\My Documents\My Pictures\blog_banner\img02.jpg
C:\Documents and Settings\tatsuya\My Documents\My Pictures\blog_banner\kazuya.jpg
C:\Documents and Settings\tatsuya\My Documents\My Pictures\blog_banner\st_rin_s.jpg
C:\Documents and Settings\tatsuya\My Documents\My Pictures\blog_banner\ryousuke.jpg
C:\Documents and Settings\tatsuya\My Documents\My Pictures\blog_banner\riku.jpg

次のタグの "src=" の部分をアップロードしたアドレスに置き換えて "PRESIDENTmember's blog" のフリーエリアへ書き込んでください.
画像部分はリンクになっていませんでしたがリンクになるように変更してみました.
<a href="http://blog.livedoor.jp/atsushi_shinjou/"><img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg">淳のたわ言。</a><br>
<a href="http://blog.livedoor.jp/kazuya_jsw/"><img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg">はいさい!島人より</a><br>
<a href="http://blog.livedoor.jp/rin_mini/"><img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg">☆ちっちゃい部屋☆</a><br>
<a href="http://blog.livedoor.jp/ryousuke3541/"><img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg">☆涼介の泣き虫日記☆</a><br>
<a href="http://blog.livedoor.jp/riku096/"><img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg">リクのお魚との日々</a><br>

5.

2006-06-27 10:37:19

文字部分だけリンクがよければ次のようにしてください.
<img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg"><a href="http://blog.livedoor.jp/atsushi_shinjou/">淳のたわ言。</a><br>
<img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg"><a href="http://blog.livedoor.jp/kazuya_jsw/">はいさい!島人より</a><br>
<img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg"><a href="http://blog.livedoor.jp/rin_mini/">☆ちっちゃい部屋☆</a><br>
<img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg"><a href="http://blog.livedoor.jp/ryousuke3541/">☆涼介の泣き虫日記☆</a><br>
<img src="http://image.blog.livedoor.jp/tatsuya_makabe/imgs/x/x/xxxxxxxx.jpg"><a href="http://blog.livedoor.jp/riku096/">リクのお魚との日々</a><br>
Ads By Google

コメント

まだコメントがありません

トラックバック(2)

トラックバックURL: