ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > 記事を書いたら・・・ > title - 画像の横に文字や画像を書く!

画像の横に文字や画像を書く!

画像の右横に文字を書く

今までの普通のやり方だと画像の横には、文字を持っていけないですよね。これまでも写真の横に文字が書きたいんだけど、何度やっても下にしか書けなくて、悩んでいたかもしれませんがもう大丈夫です。

通天閣

 このように写真の右横に
 文字を書くことです。
 

画像の横ってどういう事か文字ではわからないかも知れないので、具体的な例を挙げてみました。

あなたが、画像をブログに載せようと思って画像を使ったら、テキスト欄に下の様に記入されていると思います。
<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">
この様に書いてあります。青字が写真の横に文字を書くために追加した部分です。簡単でしょ!

画像の左横に文字を書く

私は写真を右で、左に文字が書きたい!という人は、
先ほどの右に文字を書く事とやる事は同じでただ入力するものが違います。今度は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"を間違えないようにして下さいね!

画像の横に画像を置く

画像の横に画像を置きたい時は、画像のツールを使った時にテキスト入力欄に表示される<a href="http://~~~" target="_blank"><img src="http://~~~" border="0"</a><br clear="all">部分の<br clear="all">を削除して文字を書いていた所に記入すれば置く事ができます。

image337.jpgimage338.jpg

<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">
この様に文字を横に書いたのと同じように、画像も続けて記入すれば横に並べる事ができます。

画像を中央に配置する

ちなみに画像を中央に配置したい場合も紹介しますね!

通天閣

この様に記事の真ん中に画像を置く事ができます。

<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>で囲うと記事の真ん中に表示させる事ができます。
見本の様に文章も一緒に囲めば文章も一緒に真ん中に配置されますよ。

※画像だけ真ん中にしたい時は<br clear="all">の後ろに</div>を書いて下さい。もちろん文章のみ囲えば文章だけが真ん中に配置されます。


これで、あなたもランキングのバナーを並べる事ができるし、写真の横に文字も書けるようになったはずです。よかった!よかった!
次はこのページの画像の様に写真に枠がついてしまうけど、自分は枠はついて欲しくない、枠がつくと上手くいかないという人の為に枠の取り方を紹介します。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
はじめまして
やっとわかりました。何処を見ても、<br clear="all">を削除して=border="0"の後にalign="left"を記入する、とは書いてありますが、<brclear="left">を書くなんてなかったので、何回やっても失敗してました。
こんなふうに、分かりやすくしていただいたらPC初心者にとってとても助かります。ありがとうございました。これからもバイブルにさせて頂きます。
はじめまして。
僕も最近までシュナままさんと同じ初心者で自分も困った事だったので、気持ちがわかります。色々勉強してきてやっと少しずつわかるようになってきました。
初心者の僕が書いてるから、よかったかなと少し思えた瞬間でした。
これからもよろしくお願いします。
こんばんは。
現在、リンクを新たに作るのに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;"』の方法で画像の回り込みができますよ!
ありがとうございます
ありがとうございました。
なんとなく、scriptというタグが関連してalign="left"style="padding:5px;"が使えないのかと感じていて検索していたのですが、わからなく・・。本当にお世話になりました。
ありがとうございました!
写真の横に文を入れるの、凄く分かりやすかったです!
さっそくトライしてみますね。
お礼に"ρ('-'* ) ポチッ♪ あ、1位ですね!

写真を横に並べるのは自己流でやってました!
一枚目の写真の br clear=all を取り、border=2としたのです。
二枚目の写真は、br clear=all はそのままで、border=2にしました。
ポチッ♪ありがとうございました!
ブログを拝見させて貰いました!
ちゃんと写真の横の文字がぴったり入ってました!
見やすくていいブログですね。
しかもpegasus8さんはタイにお住まいの様で、あらためて「ブログって凄いよな!」
って感じさせられますね。
大変参考になりました!!
ポンジローさんから紹介していただいたのですが、大変参考になりました。これからも初心者を導いてください♪お礼のポチ♪
こんばんは^^いつも助かります☆
いつも色々と参考にさせて頂いてます(・∀・)ノ
本当にわかりやすく、どんどん楽しくなっていきますね^^
突然お手数なのですが、画像や写真を挿入した時に
centerに配置したりする方法を教えて頂きたいです^^
こんばんは!
参考にしていただいてありがとうございます。
もっとも簡単な方法は
<CENTER> ~ </CENTER>
で画像のタグを囲えば記事の中央に配置されますよ!
追加
記事に「画像を中央に配置する」を追加しました!
よかったら見てやってくださいね。
はじめまして
はじめまして!ブログを作りはじめて分からないことだらけでしたが、るんばばさんの分かりやすいブログのおかげで何とか形になってきました。ありがとうございました。ポチッとして帰ります。また参考にさせて下さい。
はじめまして。
初めは知らない事ばかりですから大変ですよね。
でも最初だけ乗り越えて後は難しい事さえしなければ結構、楽だと思うのでこれからはそこまで苦労しないかも知れないですね!こちらこそよろしくお願いします。
やったー!!
初めまして、初心者の私がブログで小説を書き始めたのですが、どうしたら読者が見やすいのか工夫していこうと決意いたしました。画像を横に表示する方法がすぐわかりました。ありがとうございます。感謝です。また参考にさせていただきます。
初めまして。
ブログで小説を書かれる方って結構いますよね!文才が羨ましい限りです!!
はじめまして
パソコン、ド素人の私にもわかりやすく、
画像の横に文を入れることが、すぐに出来ました!
ありがとうございます(*^_^*)♪
これからも参考にさせてもらいます!
応援ぽち☆
はじめまして
画像の横に文字をちゃんと書けてましたね!
ランキングのリンクもそれであっていますよ!!
参考にしてくれてありがとうございます。これからもよろしくお願いしますね!
お世話になっています。
るんばばさん(先生っ(笑))、こんばんは。
今日も助けていただきました。
画像&文字を中央に配置するやり方、参考にさせていただきました。
ありがとうございます。

るんばばさんのページはリンクフリーということですが、私のページにリンクしてもいいですか?
相互リンクというのは、私は、まだまだまだ・・・るんばばさんの足元にも及ばないので、していただけませんよね。
『相互リンク』を頼むのは初めてです。。。

管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
こんにちは!
画像&文字を中央に配置って結構使いますよね!ちゃんとできて良かったですね。

うちはリンク自由でFC2ブログの方ならアダルト以外のブログは相互リンク受け付けているのでもちろんOKですよ!
らんまるさんのブログにうちのリンクを張ったら掲示板に報告お願いしますネ。
はじめまして
るんばばさんの分かりやすいブログにいつも助けられてます^^;
いきなりですが、画像の横に文字を書き、さらにその横に画像を入れ
文字を入れる方法が判りません(>_<)教えて頂けないでしょうか。
自分なりにいろいろ試したのですが、初心者なもので・・・。
エムさんへ
[画像] [文字] [画像] の順番にするという事ですね。

<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">

この順番で書けばできると思いますよ!!一度やってみて下さい。
できましたーっ!
こんなに早く返事が頂けるとは思いませんでした。ありがとうございました!
しかしまた新たな悩みが・・・。
[画像] [文字] [画像] [文字] にするにはどうすればいいのか分かりません。
頂いた返事をヒントに朝からいろいろやってますができません(涙)
これはまた違うやり方をしないとダメなんでしょうか?
説明がややこしいのであれば、ヒントになるような事を教えて頂ければ
幸いです。

テーブルタグかな?
[画像] [文字] [画像] [文字] にするにはテーブルタグを使う方法しか思い浮かびませんでした。横に4つ並べるテーブルを作ってその中に1つずつ[画像]・ [文字] ・[画像] ・[文字] を入れていくやり方です。
もしかしてもっといい方法があるかもしれないけど今の所はこのやり方ですかね~。
ありがとうございます!!
やっぱりテーブルタグを使う方法なんですね。
がんばってみまーす^^。
ご教授をお願いします
写真の横に文字は書けるようになったのですが、写真と文字がくっつきすぎて読みづらいです。プレビューを見ながらスペースで行っていますが、何か良い方法はありますか?
ダイブさんへ
○ 画像と文字の間隔をあけたい!
http://rgrg.blog61.fc2.com/blog-entry-117.html
こちらの記事を見ていただけると少しはお役に立てるかも!
ありがとうございます
実に簡単にできるんですね。ありがとうございました。
ありがとうございました。
ありがたいです
今までずっと気になってた部分なのですが、どうにも自分ではカスタマイズできなかったのであきらめていました。

早速、画像が真ん中に置けるようカスタマイズしてみようと思います。
ありがとうございます。(^^)
いつも参考にさせてもらってます♪
まだ初心者でわからない事ばかりなので、お気に入りに追加して
写真をブログに貼る度にここに来て参考にさせて頂いております♪
いつも本当に感謝しております(o〃>ω<)oミ(o〃_ _)oペコリ
ここのページ印字してたのに
絶対使うと思い半月前に印字してたのに、ここ二日間の写真時間なくて
読まないでとりあえず掲載してしまいました。
苦心のレイアウトでスペースで動かしてみたり、DELで戻ってみたり、
画像が行ったり来たり。読み返してじっくり記事にした方がずっと早かったと
反省しました。
またトライします。バナーの件上手くいきました。ありがとうございます。
今年もお世話になります。<(_ _)>
ダイブさんへ
わかってしまえば実に簡単なものなんですよね!
ぷっちの☆さんへ
こちらこそ見ていただいてありがとうございました。
ゆうさんへ
お役に立ててよかったです。
ほびたんさんへ
デジカメ購入羨ましいです!!これでたくさん写真を撮ってブログにも色々アップしてください!!写真のたくさんあるブログはやっぱり見るのが楽しいですからね。
ガーネットさんへ
バナーの件は上手くいたとの事でよかったですね。
画像の位置は、右や左へ文字の回りこみはできるけど、細かい位置はなかなか自分の思ったところにビシッと決まらないから難しいですよね。
こちらこそよろしくお願いしますペコリ(o_ _)o))
ありがちうございました ^^
写真の配置ですご~~く 助かりました^^ 
本当にありがとうございます。
HOUSEHOUSE matsudaさんへ
写真の配置でお役に立てた様でよかったです!!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/27-3a493cf7   

HTMLを使って画像を横並びにする
ブログの編集画面には画像を簡単に設置できる機能がありますが 横並びにはできません。 HTMLを使用して画像を横並びにする方法を解説します。 HTMLを使用して画像を横並びにする &lt;table&gt;&lt;tr&...
なんで、猫ってゴロンゴロンするの?
2011年11月29日 みょう7ヶ月。           ごろん  ごろん  ごろ~ん  壁けってごろ~ん うごくGIFアニメの作り方⇒ GIFアニメ・アニメーション作成サイト   ごろん...

Template Designed by DW99