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

なんか昨日JavaScriptが機能しなくて確認できなかったんですが、
うまく画像の横に文字を入れられました！本当にありがとうございました！！

こんばんは、suさん。
画像の横に文章を入れられるとスペースを有効に使えますよね。特に幅の広いテンプレートには有効ですね。

画像の右側に文字を入れることができました。ありがとうございます。

質問があるのですが、回り込ませた文字を上下位置を中央に指定することもできるのでしょうか？よろしくお願いします。

すみません、自己解決しましたm(__)m

いわおさん、またまた、問題がでてきてしまったため、何度も申し訳ありませんが、お力をお借りできないでしょうか。

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

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

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

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

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

並べた２つの画像の両方に

align="left"

を挿入してみてください。

いわおさん。毎回、敏速なお応えありがとうございます！そうでしたか～。とても嬉しく、早速、試してみました。でも...またまた問題が（すみません）。

教えていただいたように「ソース」の文字列の中に、「align="left" style="padding:6px"」を、以下のように入れてみたところ、二枚の写真の右の写真の上から、文字が回りこむことには成功したのですが、右の写真が左の写真に対して、文字１行分、下がってしまい、下がったところ（右の写真の左上から）文字が回りこんでしまいます。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> 伊・エミリア街道は……………

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

それから、もう２つ。

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

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

頼ってばかりで、すみません。ご迷惑おかけしないようにと、自助努力しておりますが、余りにも知識がなく、申し訳ありません。今しばらく、お付き合いいただけますようお願いいたします。

投稿設定を自動改行にしていませんか？
であれば１つ目の画像の終わりタグ</a>と２つ目の画像の始まりタグ<a>の間を改行せずに隙間無くピッタリくっつけてください。

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

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

h2 {
margin-bottom:10px;
}

いたおさん。度々、本当にすみません。

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

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

また、いたおさんにアドバイスいただいた通り、「自動改行」の上記両設定した場合、共に、改行スペース、スペースがないかどうかチェックしたところ、改行のタグはみつからず、１つ目の画像の終わりタグ</a>と、２つ目の画像の始まりタグ<a>の間に１文字分の間隔があったため、そのスペースを詰めてみたのですが、改善されません。（...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> 伊・エミリア街道は......

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

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

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

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

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

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

PS　現在、２枚並んだ写真のうち、右の写真の左上から回り込んでいる文字の前に、スペースをいれて、文字(文章）の始まりを、右の写真の右上から始まるように調整し、記事をアップしています。しかし、左２つの写真の上に、１行分の妙なスペースができてしまい、変です。閲覧するブラウザーによって、文章が始まる位置も変わるなど、本当にどうにかできたらと、願うばかりです。どうぞ、よろしくお願いいたします。

いたおさん。
何度も、しつこい質問を続けて、申し訳ありませんでした。
以下の作業をしたところ、問題が解決できました!!

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;}

お騒がせしました～！

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

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

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

どうぞよろしくお願いいたします。

以下はスタイルシートの末尾に加えてください。

h2 { margin-bottom:10px; }

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

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

今はpaddingが6px指定されているのでIE,Firefoxでも画像間に間隔ができていますね。これで問題ないのではないでしょうか。

いたおさん。ゴールデンウィークにも関わらず、ここ数日、連日、お付き合いいただき、有難うございます。

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

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

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

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

３）ところで、右２枚の画像の左に文字を回り込ませる際、
「align="left" style="padding:10px"」の「left」を「right」にするだけで、スタイルシートの「.fleft{float:left;} 」の「left」を「right」にする？？など、微調整する必要がありましたら、教えていただけないでしょうか。

そちらのスタイルシートを覗いても
h2 { margin-bottom:10px; }
の存在が確認できませんね・・・

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

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

スタイルシート全部を貼付けるとコメント欄が長くなってしまうので、「管理人にだけに表示」でお願いします。

いたおさん。反映しました～。なぜ、今までダメだったのか、理由はわからないのですが、自由に幅が広げられるようになりました。本当にご迷惑をおかけしました。また、お付き合いいただき、有難うございます。

今後、できる限りお手数おかけしないで済むよう、自助努力するつもりですが、どうしても解決できない問題がでてきてしまったときは、相談させていただけますか？なにとぞ、よろしくお願いいたします。

このコメントは管理人のみ閲覧できます

いたおさん、度々すみません。

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

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

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

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

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

ご面倒ばかりおかけして申し訳ありません。お返事お待ちしております。

記事を掲載したのでこちらを参考にしてください。

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

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

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

複数の画像をペイントツール等で一つの画像にしてしまうという手もあります。

いたおさん。有難うございます。早速、挑戦してみます。もし、上手くいかなければ、ユーザーフォーラムに行ってみます。重ねて御礼を言わせてください。

このコメントは管理者の承認待ちです

題名:

名前:

URL:

COMMENT:

現在休止中で管理人はコメントに答えることが出来ないことをご了承くださいm(__)m

PASS: SECRET:管理者にだけ表示