FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

画像と文字を横に並べて記事を投稿する

光の翼この記事のように画像と文字を横に並べて記事を投稿する方法を紹介します。投稿する画像が縦に細長く横に空間が空いてしまう場合等に有効です。


記事入力画面で画像を挿入しようとするとタグが書き込まれますが、このタグに下記記述を加えます。

【画像を左、文字を右にする場合】

<a href="http://blog-imgs-19.fc2.com/1/0/p/10plate/eaglegd.gif" target="_blank"><img style="float:left; margin-right:10px;" src="http://blog-imgs-19.fc2.com/1/0/p/10plate/eaglegd.gif" alt="光の翼" border="0"></a>ここに書いた文字が画像の右に表示されます。<br clear="all">
ここから書いた文章が画像の下に表示されます。


【画像を右、文字を左にする場合】

<a href="http://blog-imgs-19.fc2.com/1/0/p/10plate/eaglegd.gif" target="_blank"><img style="float:right; margin-left:10px;" src="http://blog-imgs-19.fc2.com/1/0/p/10plate/eaglegd.gif" alt="光の翼" border="0"></a>ここに書いた文字が画像の左に表示されます。<br clear="all">
ここから書いた文章が画像の下に表示されます。



marginの数値は画像と文字の間隔です。お好みの数値に設定してください。
関連記事
[ 886 ] できました~!
なんか昨日JavaScriptが機能しなくて確認できなかったんですが、
うまく画像の横に文字を入れられました!本当にありがとうございました!!
[ 2006/12/18 16:23 ] [ 編集 ]
[ 888 ] > suさん
こんばんは、suさん。
画像の横に文章を入れられるとスペースを有効に使えますよね。特に幅の広いテンプレートには有効ですね。
[ 2006/12/18 21:48 ] [ 編集 ]
[ 3481 ] 質問です
画像の右側に文字を入れることができました。ありがとうございます。

質問があるのですが、回り込ませた文字を上下位置を中央に指定することもできるのでしょうか?よろしくお願いします。
[ 2008/08/13 05:51 ] [ 編集 ]
[ 3482 ] 自己解決です
すみません、自己解決しましたm(__)m
[ 2008/08/13 15:24 ] [ 編集 ]
[ 4048 ] 横2枚の写真の右に、文字を回り込ませたい
いわおさん、またまた、問題がでてきてしまったため、何度も申し訳ありませんが、お力をお借りできないでしょうか。

1)「記事の編集」ページにて、文字を最初に書き、その左に縦一の写真を二枚並べ、(二枚のうち)右の画像の上から横に文字を入れよう(回り込ませよう)と、「W(高機能テキストエディター)をクリック。2)「ソース」よりHTML中、右の画像らしいHTMLの「img alt=~」の「alt」の前に「align="left" style="padding:6px" 」を入れたところ、右の画像が左の画像の下になってしまい、文字は右(だった)画像の上のところから始まるようになってしまいました。

同じ方法でも、画像が1枚の場合は、画像の右の上から文字が回り込むのですが、なぜ、このようになってしまうのでしょうか。

また、左の画像の最後に、<br />などの、改行記号を見つけることはできず、画像を改行する指示にはなっていないように思われます(私の探し方が悪いのかもしれません。あるいは、テンプレートレベルで、何かしなければならないのでしょうか?)。

横2枚の画像の、右の画像の上から、文字を回り込ませる方法を教えていただけないでしょうか?

面倒をおかけし続きで、申し訳ありません。

[ 2009/05/02 23:50 ] [ 編集 ]
[ 4049 ] > Ajinciさん
並べた2つの画像の両方に

align="left"

を挿入してみてください。
[ 2009/05/03 01:09 ] [ 編集 ]
[ 4050 ] 度々、すみません
いわおさん。毎回、敏速なお応えありがとうございます!そうでしたか~。とても嬉しく、早速、試してみました。でも...またまた問題が(すみません)。

教えていただいたように「ソース」の文字列の中に、「align="left" style="padding:6px"」を、以下のように入れてみたところ、二枚の写真の右の写真の上から、文字が回りこむことには成功したのですが、右の写真が左の写真に対して、文字1行分、下がってしまい、下がったところ(右の写真の左上から)文字が回りこんでしまいます。HPMLは、以下の通りです。

<a target="_blank" href="http://blog-imgs-27.fc2.com/a/j/i/ajinci/200905022240598b2.jpg"><img height="285"align="left" style="padding:6px" alt="お気楽_サラミ屋_ハム大" width="200" border="0" src="http://blog-imgs-27.fc2.com/a/j/i/ajinci/200905022240598b2.jpg" /></a> <a target="_blank" href="http://blog-imgs-27.fc2.com/a/j/i/ajinci/20090502224303c94.jpg"><img height="285" align="left" style="padding:6px" alt="お気楽_サラミ屋_チーズ大-2" width="200" border="0" src="http://blog-imgs-27.fc2.com/a/j/i/ajinci/20090502224303c94.jpg" /></a> 伊・エミリア街道は……………

どのようにすれば、写真がキレイに横一列に並び、右の写真の真横上から、文字が入るようになるのでしょうか。

それから、もう2つ。

1)写真と写真の間に、空間をまったく入れない。または、  写真と写真の間に空間を入れる場合の幅は、どのように  すれば、操作できるのでしょうか?

2)記事の一番最初の段落を一段下げるには、どのようにす  れば、よいでしょうか?(記事タイトルと文章の間が狭  いため、<br />を入れるのですが、画面を切り替えて、  もう一度戻すと、元通りになってしまいます)

頼ってばかりで、すみません。ご迷惑おかけしないようにと、自助努力しておりますが、余りにも知識がなく、申し訳ありません。今しばらく、お付き合いいただけますようお願いいたします。
[ 2009/05/03 08:31 ] [ 編集 ]
[ 4051 ] > Ajinciさん
投稿設定を自動改行にしていませんか?
であれば1つ目の画像の終わりタグ</a>と2つ目の画像の始まりタグ<a>の間を改行せずに隙間無くピッタリくっつけてください。

写真と写真の間をなくすには
style="padding:0px; margin:0px"
を入れてください。各数値を増やせば間隔が空きます。

記事タイトルと記事本文の間隔を空けるにはスタイルシート末尾に以下を加えてください。

h2 {
margin-bottom:10px;
}
[ 2009/05/03 11:19 ] [ 編集 ]
[ 4057 ] なぜかダメで。本当にすみません。
いたおさん。度々、本当にすみません。

おっしゃる通り、投稿設定の「自動改行」が「改行をそのまま反映」になっていました。

...そこで、「HTMLタグ以外は無視」の設定にして、写真2枚を貼り付け、文字を写真の右に回りこませる作業など、いろいろやってみたのですが、(横に2枚並べた)左の写真が右の写真より1段下がった状態で、左の写真の左上から文字が回り込んでしまう状況は改善されません。

また、いたおさんにアドバイスいただいた通り、「自動改行」の上記両設定した場合、共に、改行スペース、スペースがないかどうかチェックしたところ、改行のタグはみつからず、1つ目の画像の終わりタグ</a>と、2つ目の画像の始まりタグ<a>の間に1文字分の間隔があったため、そのスペースを詰めてみたのですが、改善されません。(...a> <a target="_blank" ....)ちなみに、HTMLは以下の通りです。

<a target="_blank" href="http://blog-imgs-27.fc2.com/a/j/i/ajinci/200905022240598b2.jpg"><img height="285" alt="" width="200" align="left" border="0" src="http://blog-imgs-27.fc2.com/a/j/i/ajinci/200905022240598b2.jpg" /></a> <a target="_blank" href="http://blog-imgs-27.fc2.com/a/j/i/ajinci/20090502224303c94.jpg"><img height="285" alt="" width="200" align="left" border="0" src="http://blog-imgs-27.fc2.com/a/j/i/ajinci/20090502224303c94.jpg" /></a> 伊・エミリア街道は......

しかも、今度は、前回と同じ操作をしているにも関わらず、2枚の画像がピッタリくっつくようになってしまいました。こちらも、教えていただいた「style="padding:0px; margin:0px"」を挿入したのですが、芳しい結果が得られません。挿入位置が間違っているのでしょうか?どのタグとタグの間に挿入すればいいのか、教えていただけないでしょうか?

また、「h2 {
margin-bottom:10px;
} 」も、なぜか、反映されません。こちらも、タグを挿入する場所が間違っているのでしょうか?

現在、私は「templ8_3kuro」=lightframe?を使わせてもらっています。これだと、いたおさんのアドバイスと異なる何かをしなければ、ならないのでしょうか??

知識がないのに、生意気にも、あれこれしようとしていることにより、いたおさんに多大なご迷惑をおかけしてしまい、本当に申し訳ありません。でも、どうにか、この問題を乗り越えたいと願っております。いま、しばらく、お付き合い、ご指南いただけないでしょうか。

本当に、本当にすみません。

最後になりましたが、これまで、いくつかのコメント中、お名前を間違えて記載しておりました。こちらも合わせて、お許しください。

PS 現在、2枚並んだ写真のうち、右の写真の左上から回り込んでいる文字の前に、スペースをいれて、文字(文章)の始まりを、右の写真の右上から始まるように調整し、記事をアップしています。しかし、左2つの写真の上に、1行分の妙なスペースができてしまい、変です。閲覧するブラウザーによって、文章が始まる位置も変わるなど、本当にどうにかできたらと、願うばかりです。どうぞ、よろしくお願いいたします。
[ 2009/05/04 10:24 ] [ 編集 ]
[ 4063 ] ひとつ、解決しました~!
いたおさん。
何度も、しつこい質問を続けて、申し訳ありませんでした。
以下の作業をしたところ、問題が解決できました!!

imgタグのなかに、class="fleft"と入れて、スタイルシートでfloat:leftを指定。具体的には、以下の通りです。

【記事中のHTMLタグ】
<p><a target="_blank" href="http://blog-imgs-27.fc2.com/a/j/i/ajinci/200905022240598b2.jpg"><img class="fleft" style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px" height="285" alt="お気楽_サラミ屋_ハム大" width="200" align="left" border="0" src="http://blog-imgs-27.fc2.com/a/j/i/ajinci/200905022240598b2.jpg" /></a> <a target="_blank" href="http://blog-imgs-27.fc2.com/a/j/i/ajinci/20090502224303c94.jpg"><img class="fleft" style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px" height="285" alt="お気楽_サラミ屋_チーズ大-2" width="200" align="left" border="0" src="http://blog-imgs-27.fc2.com/a/j/i/ajinci/20090502224303c94.jpg" /></a>→この後に文章が来ます。

【テンプレートスタイルシートの最後に追加】
.fleft{float:left;}

お騒がせしました~!

1)横並びの写真と写真がくっついてしまうこと。
2)記事タイトルとその下の罫線と、写真&文字(文章)の  間隔を、1行分下げたい....も、

どうにか頑張りたいので、もし、ご迷惑でなければ、こちらのアドバイスをお願いできないでしょうか。

「style="padding:0px; margin:0px"」「h2 {
margin-bottom:10px; } 」を入れる場所について、ご伝授いただけましたら幸いです。現在、私は「templ8_3kuro」=lightframe?を使わせてもらっています。

どうぞよろしくお願いいたします。
[ 2009/05/04 15:34 ] [ 編集 ]
[ 4068 ] > Ajinciさん
以下はスタイルシートの末尾に加えてください。

h2 { margin-bottom:10px; }

数値を増やすほど記事タイトルと記事本文の間隔が広がるはずです。

style="padding:0px; margin:0px"は、imgタグ内のsrc=の前に入れると、画像間の隙間がなくくっついて表示されます。

今はpaddingが6px指定されているのでIE,Firefoxでも画像間に間隔ができていますね。これで問題ないのではないでしょうか。
[ 2009/05/04 20:52 ] [ 編集 ]
[ 4079 ] なぜか???
いたおさん。ゴールデンウィークにも関わらず、ここ数日、連日、お付き合いいただき、有難うございます。

1)「h2 { margin-bottom:10px; }」なのですが、記述していただいたままをコピーし、「templ8_3kuro_2 のスタイルシート編集 」の末尾↓の前、または、下(この下には、実質、何も記述されていません)に、これまでも何度も貼り付けているのですが、反映されません。なぜなのでしょうか?

(/**************************************************************/
/* フッターにある著作権表示(リンク)さえ残して頂ければ */
/* どんなにカスタマイズされても構いません。また、 */
/* どのようなサイトでも利用してくださって結構です。 */
/* 何か解からないことがあれば何でも聞いてください。 */
/* Templ8@FC2blog */
/* [templ8_3kuro] (http://templ8.blog55.fc2.com/) */
/**************************************************************/

「写真に段差ができ、文字が右写真の左上から来てしまう問題」の際の「.fleft{float:left;}」は、末尾に入れて、反応したのですが、何が原因なのでしょうか?(もし、ご迷惑でなければ、スタイルシート部分を貼り付けてみていただきたいのですが、お願いできますか?)

2)画像と画像の間の隙間につきましては、バッチリ!思い通りに縮められました~(2PXに変更しました!!)。有難うございます~。とても、うれしいです。

3)ところで、右2枚の画像の左に文字を回り込ませる際、
「align="left" style="padding:10px"」の「left」を「right」にするだけで、スタイルシートの「.fleft{float:left;} 」の「left」を「right」にする??など、微調整する必要がありましたら、教えていただけないでしょうか。
[ 2009/05/05 13:28 ] [ 編集 ]
[ 4083 ] > Ajinciさん
そちらのスタイルシートを覗いても
h2 { margin-bottom:10px; }
の存在が確認できませんね・・・

ちなみに10pxぐらいだと変化が見られないようなので、30pxぐらいにしたほうがよさそうです。

もう一度正確に貼付けられているか確認してもらえますか?それでもダメならスタイルシートの内容を教えてください。

スタイルシート全部を貼付けるとコメント欄が長くなってしまうので、「管理人にだけに表示」でお願いします。
[ 2009/05/05 19:37 ] [ 編集 ]
[ 4103 ] ご迷惑おかけしました。
いたおさん。反映しました~。なぜ、今までダメだったのか、理由はわからないのですが、自由に幅が広げられるようになりました。本当にご迷惑をおかけしました。また、お付き合いいただき、有難うございます。

今後、できる限りお手数おかけしないで済むよう、自助努力するつもりですが、どうしても解決できない問題がでてきてしまったときは、相談させていただけますか?なにとぞ、よろしくお願いいたします。
[ 2009/05/07 09:10 ] [ 編集 ]
[ 4106 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/05/07 15:40 ] [ 編集 ]
[ 4111 ] 上記解決したのですが、もうひとつ。
いたおさん、度々すみません。

上記の問題、一枚目と二枚目の写真の間に、& nbsp;が入っていたため、これを削除したところ、二枚の写真をキレイに並べることができました。2回目以降も、このタグがでてきてしまうのですが、これをでないようにすることはできないのでしょうか?

また、もう一つ、お聞きしたいことがあります。

もし、縦2枚、横2枚の4枚組みの写真の横に、上から文字を回り込ませるには、どうしたらよいのでしょうか?

素人考えで、3枚目と4枚目の「img」の後ろに、それぞれ「class="fleft"」を入れてみたのですが、横に3枚写真が並び、その下に1枚写真が左に来て、下の写真の横から文字が回りこむ形になってしまいました。

そこで、2枚目の後に「br /」「br clear=all」を入れてもみたのですが、2枚目の写真に対して、3枚目の写真が一段下がる(段差ができる)だけで、イメージ通りになりません。

ご面倒ばかりおかけして申し訳ありません。お返事お待ちしております。
[ 2009/05/07 16:55 ] [ 編集 ]
[ 4114 ] > Ajinciさん
記事を掲載したのでこちらを参考にしてください。

複数の画像に文字を回り込ませる
http://10plate.blog44.fc2.com/blog-entry-199.html

これでうまくいかないなら私もお手上げなので、ユーザフォーラムに相談してください。

FC2ブログ ユーザーフォーラム
http://blog.fc2.com/forum/

複数の画像をペイントツール等で一つの画像にしてしまうという手もあります。
[ 2009/05/08 00:25 ] [ 編集 ]
[ 4141 ] お礼
いたおさん。有難うございます。早速、挑戦してみます。もし、上手くいかなければ、ユーザーフォーラムに行ってみます。重ねて御礼を言わせてください。
[ 2009/05/09 19:34 ] [ 編集 ]
[ 8835 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2011/06/13 19:42 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
11 | 2014/12 | 01
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

11 | 2014/12 | 01
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。