画像の横に文字や画像を書く！
画像の右横に文字を書く
今までの普通のやり方だと画像の横には、文字を持っていけないですよね。これまでも写真の横に文字が書きたいんだけど、何度やっても下にしか書けなくて、悩んでいたかもしれませんがもう大丈夫です。
このように写真の右横に
文字を書くことです。
画像の横ってどういう事か文字ではわからないかも知れないので、具体的な例を挙げてみました。
あなたが、画像をブログに載せようと思って
を使ったら、テキスト欄に下の様に記入されていると思います。<a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image174.jpg" target="_blank"><img src="http://blog61.fc2.com/r/rg rg/file/image174.jpg" alt="通天閣" border="0"></a> <br clear="all">
画像の右横に文字を書くには、最後の方にあるborder="0"の後ろにalign="left"を追加で自分で記入します。
そして、画像の右横に書きたい文字は赤字で書かれた<br clear="all">の前に横に書きたい文字を記入します。
具体的に上の写真を例にすると・・・
<a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image174.jpg" target="_blank"><img src="http://blog61.fc2.com/r/rg rg/file/image174.jpg" alt="通天閣" border="0" align="left"></a>
このように写真の横に
文字を書くことです。
<br clear="all">
この様に書いてあります。青字が写真の横に文字を書くために追加した部分です。簡単でしょ！このように写真の横に
文字を書くことです。
<br clear="all">
画像の左横に文字を書く
私は写真を右で、左に文字が書きたい！という人は、
先ほどの右に文字を書く事とやる事は同じでただ入力するものが違います。今度はalign="right"をborder="0"の後に記入します。
このように写真の左横に
文字を書くことです。
<a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image174.jpg" target="_blank"><img src="http://blog61.fc2.com/r/rg rg/file/image174.jpg" alt="通天閣" border="0" align="right"></a>
このように写真の横に
文字を書くことです。
<br clear="all">
この様に書けば画像の左横の文字を書くことができます。"left"と"right"を間違えないようにして下さいね！このように写真の横に
文字を書くことです。
<br clear="all">
画像の横に画像を置く
画像の横に画像を置きたい時は、
のツールを使った時にテキスト入力欄に表示される<a href="http://〜〜〜" target="_blank"><img src="http://〜〜〜" border="0"</a><br clear="all">部分の<br clear="all">を削除して文字を書いていた所に記入すれば置く事ができます。
<a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image337.jpg" target="_blank"><img src="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image337.jpg" alt="image337.jpg" border="0" align="left" ></a>
<a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image338.jpg" target="_blank"><img src="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image338.jpg" alt="image338.jpg" border="0"</a><br clear="all">
この様に文字を横に書いたのと同じように、画像も続けて記入すれば横に並べる事ができます。<a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image338.jpg" target="_blank"><img src="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image338.jpg" alt="image338.jpg" border="0"</a><br clear="all">
画像を中央に配置する
ちなみに画像を中央に配置したい場合も紹介しますね！
この様に記事の真ん中に画像を置く事ができます。
<div align="center"><a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image174.jpg"><img src="http://blog-imgs-41.fc2.com/r/g/r/rgrg/image174.jpg" alt="通天閣" border="0" ></a><br clear="all">
この様に記事の真ん中に画像を置く事ができます。</div>
写真を選んだら、テキスト欄に記入されるものの全体を上の見本の赤字の様に<div align="center">と</div>で囲うと記事の真ん中に表示させる事ができます。この様に記事の真ん中に画像を置く事ができます。</div>
見本の様に文章も一緒に囲めば文章も一緒に真ん中に配置されますよ。
※画像だけ真ん中にしたい時は<br clear="all">の後ろに</div>を書いて下さい。もちろん文章のみ囲えば文章だけが真ん中に配置されます。
これで、あなたもランキングのバナーを並べる事ができるし、写真の横に文字も書けるようになったはずです。よかった！よかった！
次はこのページの画像の様に写真に枠がついてしまうけど、自分は枠はついて欲しくない、枠がつくと上手くいかないという人の為に枠の取り方を紹介します。
- 前の記事へ ： フリーエリアを使う
- 次の記事へ ： 画像の枠を取る
- 関連記事 ； 画像と文字の間隔をあけたい！
|
｜
｜- 記事を書いたら・・・ |
- Comment (39) |
- Trackback (0) |
- ▲
コメント
- はじめまして
- やっとわかりました。何処を見ても、<br clear="all">を削除して=border="0"の後にalign="left"を記入する、とは書いてありますが、<brclear="left">を書くなんてなかったので、何回やっても失敗してました。
こんなふうに、分かりやすくしていただいたらPC初心者にとってとても助かります。ありがとうございました。これからもバイブルにさせて頂きます。 - 20060514 |
シュナままさん ＠管理人 #4CvheNDY
- [Edit]
- はじめまして。
- 僕も最近までシュナままさんと同じ初心者で自分も困った事だったので、気持ちがわかります。色々勉強してきてやっと少しずつわかるようになってきました。
初心者の僕が書いてるから、よかったかなと少し思えた瞬間でした。
これからもよろしくお願いします。 - 20060514 |
るんばばさん ＠管理人 #c8dTRiQ2
- [Edit]
- こんばんは。
- 現在、リンクを新たに作るのにWEB ASPで『Webサイトのスクリーンショットのサムネイル画像』を作ったのですが、<script type="text/javascript" src="http://free.thumbnail-web.com/p2?140x105&guest&http://rgrg.blog61.fc2.com/"></script><a href="http://rgrg.blog61.fc2.com/" target="_blank">初心者でもできる簡単FC2ブログの作り方</a>この場合の画像の回り込みは、どうしたら良いのでしょうか？『align="left"style="padding:5px;"』では回り込まないようなのですが・・。
- script。
- scriptで書かれているものは、たぶんalign="left"では出来ないと思うので、透明のテーブルタグ（横に2つ並ぶもの）を書いて、その中のセルに入れる形にしないと駄目だと思います。
こちらのサイトhttp://x-row.cc/webtojpeg/index.phpでサムネイルを作って「HTML埋込タグ」を使うと『align="left"style="padding:5px;"』の方法で画像の回り込みができますよ！ - 20070107 |
- [Edit]
- ありがとうございました！
- 写真の横に文を入れるの、凄く分かりやすかったです！
さっそくトライしてみますね。
お礼に"ρ('-'* ) ポチッ♪ あ、1位ですね！
写真を横に並べるのは自己流でやってました！
一枚目の写真の br clear=all を取り、border=2としたのです。
二枚目の写真は、br clear=all はそのままで、border=2にしました。 - 20070124 |
pegasus8さん ＠管理人 #g7r.6ZAU
- [Edit]
- ポチッ♪ありがとうございました！
- ブログを拝見させて貰いました！
ちゃんと写真の横の文字がぴったり入ってました！
見やすくていいブログですね。
しかもpegasus8さんはタイにお住まいの様で、あらためて「ブログって凄いよな！」
って感じさせられますね。 - 20070124 |
- [Edit]
- 大変参考になりました！！
- ポンジローさんから紹介していただいたのですが、大変参考になりました。これからも初心者を導いてください♪お礼のポチ♪
- 20070210 |
katukatumamaさん ＠管理人 #-
- [Edit]
- こんばんは＾＾いつも助かります☆
- いつも色々と参考にさせて頂いてます(･∀･)ノ
本当にわかりやすく、どんどん楽しくなっていきますね＾＾
突然お手数なのですが、画像や写真を挿入した時に
centerに配置したりする方法を教えて頂きたいです＾＾ - 20070215 |
ルイ＠さん ＠管理人 #-
- [Edit]
- こんばんは！
- 参考にしていただいてありがとうございます。
もっとも簡単な方法は
<CENTER> 〜 </CENTER>
で画像のタグを囲えば記事の中央に配置されますよ！ - 20070215 |
- [Edit]
- 追加
- 記事に「画像を中央に配置する」を追加しました！
よかったら見てやってくださいね。 - 20070215 |
- [Edit]
- はじめまして
- はじめまして！ブログを作りはじめて分からないことだらけでしたが、るんばばさんの分かりやすいブログのおかげで何とか形になってきました。ありがとうございました。ポチッとして帰ります。また参考にさせて下さい。
- 20070216 |
- [Edit]
- はじめまして。
- 初めは知らない事ばかりですから大変ですよね。
でも最初だけ乗り越えて後は難しい事さえしなければ結構、楽だと思うのでこれからはそこまで苦労しないかも知れないですね！こちらこそよろしくお願いします。 - 20070216 |
- [Edit]
- やったー！！
- 初めまして、初心者の私がブログで小説を書き始めたのですが、どうしたら読者が見やすいのか工夫していこうと決意いたしました。画像を横に表示する方法がすぐわかりました。ありがとうございます。感謝です。また参考にさせていただきます。
- 20070220 |
西園寺（21世紀的恋愛）さん ＠管理人 #-
- [Edit]
- 初めまして。
- ブログで小説を書かれる方って結構いますよね！文才が羨ましい限りです！！
- 20070220 |
- [Edit]
- はじめまして
- パソコン、ド素人の私にもわかりやすく、
画像の横に文を入れることが、すぐに出来ました！
ありがとうございます（*^_^*）♪
これからも参考にさせてもらいます！
応援ぽち☆ - 20070226 |
らんまるさん ＠管理人 #-
- [Edit]
- はじめまして
- 画像の横に文字をちゃんと書けてましたね！
ランキングのリンクもそれであっていますよ！！
参考にしてくれてありがとうございます。これからもよろしくお願いしますね！ - 20070227 |
- [Edit]
- お世話になっています。
- るんばばさん(先生っ(笑))、こんばんは。
今日も助けていただきました。
画像＆文字を中央に配置するやり方、参考にさせていただきました。
ありがとうございます。
るんばばさんのページはリンクフリーということですが、私のページにリンクしてもいいですか？
相互リンクというのは、私は、まだまだまだ・・・るんばばさんの足元にも及ばないので、していただけませんよね。
『相互リンク』を頼むのは初めてです。。。 - 20070303 |
- [Edit]
- 管理人のみ閲覧できます
- このコメントは管理人のみ閲覧できます
- 20070303 |
- [Edit]
- こんにちは！
- 画像＆文字を中央に配置って結構使いますよね！ちゃんとできて良かったですね。
うちはリンク自由でFC2ブログの方ならアダルト以外のブログは相互リンク受け付けているのでもちろんOKですよ！
らんまるさんのブログにうちのリンクを張ったら掲示板に報告お願いしますネ。 - 20070304 |
- [Edit]
- はじめまして
- るんばばさんの分かりやすいブログにいつも助けられてます＾＾；
いきなりですが、画像の横に文字を書き、さらにその横に画像を入れ
文字を入れる方法が判りません(>_<)教えて頂けないでしょうか。
自分なりにいろいろ試したのですが、初心者なもので・・・。 - 20070317 |
- [Edit]
- エムさんへ
- [画像] [文字] [画像] の順番にするという事ですね。
<a href="http://〜〜〜.jpg" target="_blank"><img src="http://〜〜〜.jpg" border="0"align="left" ></a> <a href="http://〜〜〜.jpg" target="_blank"><img src="http://〜〜〜.jpg" border="0"align="right" ></a>「この位置に文字を入力」<br clear="all">
この順番で書けばできると思いますよ！！一度やってみて下さい。 - 20070318 |
- [Edit]
- できましたーっ！
- こんなに早く返事が頂けるとは思いませんでした。ありがとうございました！
しかしまた新たな悩みが・・・。
[画像] [文字] [画像] [文字] にするにはどうすればいいのか分かりません。
頂いた返事をヒントに朝からいろいろやってますができません（涙）
これはまた違うやり方をしないとダメなんでしょうか？
説明がややこしいのであれば、ヒントになるような事を教えて頂ければ
幸いです。 - 20070318 |
- [Edit]
- テーブルタグかな？
- [画像] [文字] [画像] [文字] にするにはテーブルタグを使う方法しか思い浮かびませんでした。横に4つ並べるテーブルを作ってその中に1つずつ[画像]・ [文字] ・[画像] ・[文字] を入れていくやり方です。
もしかしてもっといい方法があるかもしれないけど今の所はこのやり方ですかね〜。 - 20070319 |
- [Edit]
- ありがとうございます！！
- やっぱりテーブルタグを使う方法なんですね。
がんばってみまーす＾＾。 - 20070320 |
- [Edit]
- ダイブさんへ
- ○ 画像と文字の間隔をあけたい！
http://rgrg.blog61.fc2.com/blog-entry-117.html
こちらの記事を見ていただけると少しはお役に立てるかも！ - 20070425 |
- [Edit]
- ありがとうございます
- 実に簡単にできるんですね。ありがとうございました。
- 20070425 |
- [Edit]
- ありがとうございました。
- 20070526 |
ぷっちの☆さん ＠管理人 #27oFWF9A
- [Edit]
- ありがたいです
- 今までずっと気になってた部分なのですが、どうにも自分ではカスタマイズできなかったのであきらめていました。
早速、画像が真ん中に置けるようカスタマイズしてみようと思います。
ありがとうございます。(^^) - 20070606 |
ゆうさん ＠管理人 #-
- [Edit]
- いつも参考にさせてもらってます♪
- まだ初心者でわからない事ばかりなので、お気に入りに追加して
写真をブログに貼る度にここに来て参考にさせて頂いております♪
いつも本当に感謝しております(o〃>ω<)oﾐ(o〃_ _)oﾍﾟｺﾘ - 20071230 |
ほびたんさん ＠管理人 #ECDNqovE
- [Edit]
- ここのページ印字してたのに
- 絶対使うと思い半月前に印字してたのに、ここ二日間の写真時間なくて
読まないでとりあえず掲載してしまいました。
苦心のレイアウトでスペースで動かしてみたり、DELで戻ってみたり、
画像が行ったり来たり。読み返してじっくり記事にした方がずっと早かったと
反省しました。
またトライします。バナーの件上手くいきました。ありがとうございます。
今年もお世話になります。<(_ _)> - 20080101 |
ガーネットさん ＠管理人 #0ll.HrS2
- [Edit]
- ダイブさんへ
- わかってしまえば実に簡単なものなんですよね！
- 20080106 |
るんばばさん ＠管理人 #c8dTRiQ2
- [Edit]
- ぷっちの☆さんへ
- こちらこそ見ていただいてありがとうございました。
- 20080106 |
- [Edit]
- ゆうさんへ
- お役に立ててよかったです。
- 20080106 |
- [Edit]
- ほびたんさんへ
- デジカメ購入羨ましいです！！これでたくさん写真を撮ってブログにも色々アップしてください！！写真のたくさんあるブログはやっぱり見るのが楽しいですからね。
- 20080106 |
- [Edit]
- ガーネットさんへ
- バナーの件は上手くいたとの事でよかったですね。
画像の位置は、右や左へ文字の回りこみはできるけど、細かい位置はなかなか自分の思ったところにビシッと決まらないから難しいですよね。
こちらこそよろしくお願いしますペコリ(o_ _)ｏ)) - 20080106 |
- [Edit]
- ありがちうございました ＾＾
- 写真の配置ですご〜〜く 助かりました＾＾
本当にありがとうございます。 - 20080302 |
HOUSEHOUSE matsudaさん ＠管理人 #-
- [Edit]
- HOUSEHOUSE matsudaさんへ
- 写真の配置でお役に立てた様でよかったです！！
- 20080302 |
- [Edit]
この記事のトラックバックURL
http://rgrg.blog61.fc2.com/tb.php/27-3a493cf7
』をクリックするとメニューが開きます。
