本文へジャンプします。

ココログサポート Top>>Questions List>>画像の挿入で任意の場所に入らない（3枚の...

fixed_question

画像の挿入で任意の場所に入らない（3枚の写真を文書の一番下にするが高さがバラバラになる）

ブログを書き込み、画像をアップする時の設定に文書の左、右、中などがありますが、文書の繋がりが醜くなるので、文書の一番下に三枚並べて配置したいのですが、下と言う設定が有りません

仕方なくドラッグして無理やり持っていくのですが、高さがバラバラになります、二枚は高さが同じで、右の一枚は低くて見た目良くありません（3枚共高さは同じくしたい）

又、写真に付箋紙を付けて説明も付けたく、どの様にすれば解決出来ますか

ブログを始めてまだ2ｹ月位の初心者で宜しくです。
basic infomations

metabozake | 2013/03/23 11:53(4456days ago) | permalink | 基本的な使い方

Please login to comment.

Re: 画像の挿入で任意の場所に入らない（3枚の写真を文書の一番下にするが高さがバラバラになる）
こんにちは

＞文書の左、右、中などがありますが
これは、左寄せ、右寄せ、中央揃えの意味で、基本的に画像はカーソルが現在ある位置（行）に入ります。従って、文章の下に挿入することはできないのですが、現在トップにある記事のように、本文の一番下に並べたいと言うことであれば、（画像を挿入してからの方が文章が書きやすいということかと想像して、）最初に適当な文字（「あああ」でもなんでも）を入力して改行してから、画像を挿入したらいかがでしょうか。画像を入れてから、「あああ」を消して文章を書き始めます。（単純なやり方ですが、私はよくそうします。）

＞高さがバラバラになります
縦の画像と横の画像が混在した場合や、同じ向きの画像でもトリミングしたりして微妙に縦横比が異なる画像を横に並べると確かにそうなりますね。

ココログでは横幅の指定しかできないためですが、「HTMLの編集」モードでHTMLタグを直接変更することで高さを揃えることができます。

画像の表示を行うタグに以下のような部分があるかと思います。（前後は省略しています）

<img width="220" height="165" border="0" src="http://daishi100.cocolog-nifty.com/blog/images/2013/03/19/miniaturladen01m.jpg" title="Miniaturladen01m" alt="Miniaturladen01m" />

この例では、width="220" height="165"　という部分がブログ上に表示されている画像のサイズで、widthは幅、heightは高さ（単位はピクセル）です。

これはどちらか片方だけ指定しても縦横比は維持されるので、例えば3枚の画像のheightの数字が異なるのであれば、widthの部分を削除して、heightを合わせたい高さ（例として150ピクセルとしますと、）150などと統一すれば可能です。

つまり、「width="220"」の部分は削除、「height="165"」を「height="150"」と書き換えます。これにより、高さは全て統一されます。（一番小さい＝低い画像に合わせたらいいかと思います。）

＞写真に付箋紙を付けて
この意味はよく分かりませんが、カーソルを上に置いたときに説明が表示されるようにしたいというのであれば、HTMLタグの「title="～"」の「～」の部分を書き換えれば、カーソルを置いたときにその文字がポップアップします。

上のタグを例にすれば、「title="Miniaturladen01m"」とあるのを、「title="ショップのドールハウスです"」などとすれば、閲覧者が画像の上にカーソルを持っていくと、「ショップのドールハウスです」という文字列がポップアップします。

大師小ブログ主 | 2013/03/24 01:40(4455days ago) | permalink

Re: 画像の挿入で任意の場所に入らない（3枚の写真を文書の一番下にするが高さがバラバラになる）
解り易い説明で助かりました

最初に適当な文字（「あああ」でもなんでも）を入力して改行してから、画像を挿入したらいかがでしょうか。画像を入れてから、「あああ」を消して文章を書き始めます

これはなるほどと思いました早速実施してみます

ココログでは横幅の指定しかできないためですが、「HTMLの編集」モードでHTMLタグを直接変更することで高さを揃えることができます。

これが出来れば写真の見栄えが一段と良くなると思います

カーソルを上に置いたときに説明が表示されるようにしたいというのであれば、HTMLタグの「title="～"」の「～」の部分を書き換えれば、カーソルを置いたときにその文字がポップアップします。

写真のコメントに付箋紙と書きましたが、吹き出しの間違いです
カーソルを置いたときに文字がポップアップとは素晴らしいですね
これだと、写真の真下にコメントはいらないですね

とにかく、挑戦してみます、大変有難う御座いました。

metabozake | 2013/03/24 10:55(4455days ago) | permalink

Re: 画像の挿入で任意の場所に入らない（3枚の写真を文書の一番下にするが高さがバラバラになる）
再度、貴ブログで確認しました。

＞写真のコメントに付箋紙と書きましたが、吹き出しの間違いです

現在のトップページにある最初の画像の上に試しにカーソルを持って行ってみて下さい。「Dscf4xxｘ」のような文字がポップアップされるのが確認できるかと思います。デフォルトではファイル名（画像名）がtitle要素に設定されるので、この文字を書き換えれば、ファイル名の代わりにその文言がポップアップします。

なお、右寄せ・左寄せで「文書の繋がりが醜くなる」の意味が分かりました。

これも、HTMLタグの基本的なテクニックですが、左寄せを解除するタグがあります。ご質問の範囲を超えているので余計なことを書くのは控えますが、画像の右側に文字（文）を書き、文字の回り込みを解除して、次の文章は記事の左端から始めるということもできますので、必要なら再度ご質問下さい。

大師小ブログ主 | 2013/03/24 13:50(4455days ago) | permalink

Re: 画像の挿入で任意の場所に入らない（3枚の写真を文書の一番下にするが高さがバラバラになる）
「Dscf4xxｘ」のような文字がポップアップされるのが確認できるかと思います

HTMLタグの「title="～"」の「～」の部分を書き換えたらポップアップしました
今度からは写真のコメント＆説明は便利なのでこれにします

これも、HTMLタグの基本的なテクニックですが、左寄せを解除するタグがあります。ご質問の範囲を超えているので余計なことを書くのは控えますが、画像の右側に文字（文）を書き、文字の回り込みを解除して、次の文章は記事の左端から始めるということもできますので、必要なら再度ご質問下さい。

自分は他の人より呑み込みが悪い方です（笑）ので、是非、このテクニックを初心者でも分かる様、詳細に教えて下さい、大師小ブログ主様 宜しくです。

metabozake | 2013/03/24 19:00(4455days ago) | permalink

Re: 画像の挿入で任意の場所に入らない（3枚の写真を文書の一番下にするが高さがバラバラになる）
こんにちは

結論から先に書くと、回り込みを解除するには「HTMLの編集」モードに変えて、

<br clear="left" />　（右寄せの場合は　<br clear="right" />　）

というタグを記入するだけです。
例えば下のように解除する方法ですが、（下の□6個で1枚の画像と思って下さい。）

　　　□□□　今日はいい天気なので、近所の
　　　□□□　公園に散歩に行きました。　（←ここで解除したい）
　　　□□□　桜も満開でした。　　　（←この行は画像の下に書きたい）

　　　

「公園に散歩に行きました。」の後で改行してあった（＝ENTERキーを押してあった）とすると、「HTMLの編集」モードに変えると、「．．．公園に散歩に行きました。</p>」となっているはずです。

<p>～</p>は「段落」を意味しますが、最後の「</p>」の直前に「<br clear="left" />」と記述します。（<br />というのは改行タグで、この中に「clear="left"」という回り込み解除を記述しているだけです。）

但し、本来はこれでいいのですが、「．．．<br clear="left" /></p>」の形だと、次に「記事の作成」モード（通常モード）に変えると、ココログの仕様で<br clear="left" />が消えてしまうようなので、<br clear="left" />の後に、全角スペースを1つ以上入れてみて下さい。（苦肉の策です）

つまり（全角スペースを■で表現すると）、

「．．．<br clear="left" />■</p>」

と記入します。ついでに次の文章の出だし「桜」を</p>の後に続けて「．．．<br clear="left" />■</p>桜」のように入力し、「記事の作成」モードに変えると

　　　□□□　今日はいい天気なので、近所の
　　　□□□　公園に散歩に行きました。　
　　　□□□　
　　　桜

となります。（この後、再び「HTMLの編集」で見ると、「桜」の部分は自動的に段落タグが付き、「<p>桜</p>」となっていると思います。これはココログ自動的にやってくれます。）
後は再び「記事の作成」モードにかえて、「桜」に続けて「も満開でした。」とタイプします。

ココログでの各種説明では「段落を変える」ことを「改行」と呼ぶことが多いので、ちょっと紛らわしいのですが、このレスでの「段落」は<p>～</p>で、「改行」とは<br />です。
長々と書きましたが、「．．．<br clear="left" />■</p>」となっていれば次の段落（<p>～</p>）は画像の下に置かれます。

大師小ブログ主 | 2013/03/24 22:26(4455days ago) | permalink

Re: 画像の挿入で任意の場所に入らない（3枚の写真を文書の一番下にするが高さがバラバラになる）
すみません。タイプミスです。^^；

×　（下の□6個で1枚の画像と思って下さい。）
○　（下の□9個で1枚の画像と思って下さい。）

大師小ブログ主 | 2013/03/24 22:51(4455days ago) | permalink

Re: 画像の挿入で任意の場所に入らない（3枚の写真を文書の一番下にするが高さがバラバラになる）
大師小ブログ主さん詳細な説明有難う御座います

Wordで画像貼り付け→図形の調整→テキストの折り返し→前面
この方法だとマウスで任意の場所に移動出来る、これがココログにあれば
楽ですね

大師小ブログ主さんの説明された件は徐々に挑戦します
自分にとってはすごく参考になりました
まだまだ分からない事だらけですので質問する場合があると思います
その時は宜しくです。

metabozake | 2013/03/26 13:32(4453days ago) | permalink