ホームページ制作、千太の絵空事

「文中でイメージを横に、連続して配置したい」Level２

「文中でイメージを横に、連続して配置したい」Level２

イメージを横に、配置したい場合は、いろいろな手法があるのですが、
その中で一番、安全性が比較的にあるかなぁ？と思われる手法を紹介します。

• [3つ連続して配置したい]
  
• [イメージをアップロード]
  

安全性については→「Levelについて」をお読みください。

3つ連続して配置したい

例えば横に３つ連続して配置したい場合は、
以下のように表記します。

[[attached(１)]][[attached(２)]][[attached(３)]]

※数字の１、２，３は「半角文字」に直してください。

これで、画像添付でアップロードされた一番目の画像（修正ページでは、サムネイルの一番左に表示されているイメージ）から順にページの左端に表示され、つづいて、２番目、３番目と、横に連続して配置される表記になります。

※この順番を例えば

• 破綻してしまう表記
  
  [[attached(１)]][[attached(３)]][[attached(２)]]
  

のように、順番を入れ替えてしまうと、破綻してしまいます。

つまり、ページ内での出現順に表記してください。

次に、イメージをアップロードします

新規投稿ページの「画像添付」を利用してイメージをYahooブログのサーバーにアップロードします。

• (1)画像添付の[複数の画像をアップロード]をクリックし、フィールドを増やしてください。
  
• (2)フィールド右横の[参照]をクリック、これで、ご使用のパソコンのハードディスク内が見れるようになります
  
• (3)ハードディスク内の自分が記事に貼り付けたいと思うイメージファイルを選択。
  
• (4)[開く]をクリックしてください。
  

この(2)〜(4)までを複数くりかえします
最初に表示したいイメージファイルを一番、上のフィールドで、
最後に表示したいイメージファイルを一番下のフィールドでというように順番に注意して操作してください。

• wiki文法にチェックを入れ
  
• [ok決定]をクリックしてください。
  

これで、イメージが横に、連続して配置されます。

---

---

更にこのような場合でも

[[attached(１)]]テキスト[[attached(２)]]テキスト[[attached(３)]]テキスト
[[attached(１)]]テキスト[[attached(２)]]テキスト[[attached(３)]]テキスト

テキストテキストテキスト
テキストテキストテキスト

※この[[attached(１)]]を使う表記の場合イメージの縮小は行えませんので、この場合のように横に連続して配置したい場合は(560px/枚数)より更に小さなサイズでないと、

レンダリングがおかしくなります。

• 
  
  (560px/枚数)-枚数×余白
  この余白については、ブラウザ固有の値が影響しますので、お使いのブラウザで、意図したレンダリングになっても、他のブラウザでは、そうならない場合があります。
  

※この手法は、画像添付したページ内で、そのイメージについてのみ有効です。

img()を使う手法のように他のページでアップロード したイメージなどに適用はできません。（もちろん、他のサーバーのイメージにも使用できません。

Ｙａｈｏｏブログでのアップロード機能

---

尚、記事の一部について
「ブログの種（旧WebSite制作奮闘記）mugiさんの
添付画像を文中に挿入
をヒントにさせていただきました。ありがとうございました。

---

その他のヒント
記事に簡単に画像を入れたい｜文中にイメージを入れたい｜「雑誌のようにイメージを入れたい（回り込み）」｜イメージの貼り付けの秘密｜

イメージの貼り付けの秘密

イメージの貼り付けの秘密

イメージを記事に挿入するのには大きく分けて次の３つの方法があります。

• （１）新規投稿ページから画像添付記事に簡単にイメージを入れたい
  
• （２）attached()を使う
  
• （３）img()を使う文中にイメージを入れたい
  
  

そして、これには、カスケード、つまり優先順位があるのです。

簡単にいうとURLの同じ、イメージファイルについて、

• 右に行くほど優先される
  
  新規投稿ページから画像添付＞attached()＞img()
  

となります。

これは、新規投稿ページや修正ページでの１ページの中で
上記（１）〜（３）の複数の手法により、イメージを出現させた場合に、その中の優位性のある手法でのみ、正しくイメージを出現させます。

例えば、（１）で出現したイメージを、（２)で再度、表示しようとした場合

• （１）でのイメージは表示されなくなり、（２）の手法でのみ（何度でも）表示させれます。
  

---

同様に、（１）で出現したイメージを、（３)で再度、表示しようとした場合、（同一のＵＲＬ）

• （１）でのイメージは表示されなくなり、（３）の手法でのみ（何度でも）表示させれます。
  

---

同様に、（１）で出現したイメージを、（２）（３)で再度、表示しようとした場合、（同一のＵＲＬ）

• （１）でのイメージは表示されなくなり、（２）はソースがそのまま表示されてしまい、（３）の手法でのみ（何度でも）表示させれます。
  

---

つまり、同一ＵＲＬのファイルについては１ページ内では、一つの手法のみで表示されます。

イメージファイルのＵＲＬの違う場合は、（１）（２）（３）とも共存できます。

• つまり、お花のイメージを（１）で表示し、桜の幹のイメージを（２）で、そして、お酒を飲んでいるイメージを（３）の手法でと、できるわけです。
  

---

同じイメージを上記の手法を混合して貼り付けたい場合は、

• 同じイメージを複数、画像添付してアップロードすれば複数のＵＲＬとなり、混合して、できます。
  

---

※（２）での手法で、attached(１,leftt)やattached(２,leftt)の場合に、同じイメージを左右に表示したい場合はその属性（この場合lefttや、leftt）ごとに、表示させてたいイメージを複数、画像添付して、アップロードしてやればよいのです。

---

記事に簡単にイメージを入れたい
文中にイメージを入れたい
アップロードとは？

「行間があけたい！」などYahooブログをあなたの色に！。

●行間があけたい！｜改行の秘密｜執筆フィールドの秘密

---

顔文字の出し方｜ コメントでの顔アイコン、アバターの出し方｜ ハートマークなどの出し方

---

あなたに、やさしく将来を考えて、「安全性」で表記を分けています！。
Levelについて （できるからといって・・・。）

---

トラックバックとは？｜トラックバックするには？｜トラックバックするということ

Yahooブログをあなたの色に！。

「春」ですね！。まずはどんな色がいいですか！。「春色」それとも「秋色」？。

• Webセーフカラー２１６色（春色？)｜Webセーフカラー２１６色(秋色？)
  

春色の文字でもたまにはいいかも！

• 文字に色を付けたい！
  

少しだけ心をつかって、（素敵な心になれるかも！）

• 素敵な色の使い方｜色での指定●色での強調
  
  

文字のサイズを変えたり、ページに変化を！

• Yahooブログで使えるタグ｜文字のサイズを指定してみよう！
  

ブログに記事を書き始めると、リンクを貼りたくなりますね。そんな場合あなたはどうしますか？

• リンクが、はりたい！●ページの位置を指定してのリンク
  

とにかく記事もだけど、イメージを入れたい、そんは方には

• 記事に簡単にイメージを入れたい｜文中にイメージを入れたい
  

記事を構造的にしっかり記入したい、そんなあなたには！

• ヘルプにあるwiki｜wikiでの表記２●表の属性として(直接記入)●Levelについて
  
  

行間があけたい！

行間があけたい！

なぜか、通常、記事をかいて新規投稿すると、自分のかいた記事の行間がつまって見にくいなと思うことはありませんか？

そんな、あなたにここでは行間を空ける手法について紹介します！。

• wikiであける
  
• wikiなしでもあける
  
  

wikiであける

• （１）新規投稿ページでwiki文法にチェックを入れる
  
• （２）記事を執筆する
  
• （３）ok決定をクリックし記事を投稿する
  
  

「へっ」？
何それー。

そうなんです「wiki文法にチェックをいれる」
これだけなんですよ、
大体、文字の1/2程度の隙間があいてちょうどいいでしょう！。

詳細→執筆フィールドの秘密

wikiは使わない

wikiを使うと、文字の色や大きさが指定できないので、「いやだ」、いうあなたで、

少々面倒でも行間を空けたいというあなたには
とっておき手法（良いか悪いかは自己判断で・・・。汗）があります。

それは

<font size="+1" color="FFFFFF">改行</font>

として、行の終わりに必ず入れるというのはどうでしょうか。

只、この場合、右端で折り返すなどテキストを流し込む場合は控えてくださいね。変な文節で、「改行」となってしまいますから、パイプでもいいのですが。・・・

<font size="+1" color="FFFFFF">｜</font>

読み上げソフトでは、縦棒なんて読まれることもあるらしく、
できるだけ意味のある言葉として「改行」にしたのですが・・・。
んーん、少し無理がありますねー。

読まなかったことにしてください。(猛反省）

やはり、「wikiでそのまま書くをお奨め」します（ニッコリ）

---

執筆フィールドの秘密

【似た記事】

• HTMLで行間をあけたい(行間があけたい！２）
  

改行の秘密(wikiでの表記Level２？)

改行の秘密(wikiでの表記Level２？)

新規投稿ページで、改行(キーの[Enter]を押すとなりますね)すると
実際のHTMLソースはだけでも

• 実際に出力されているHTML（一部わかりやすいようにしています）
  

  <br />
  

がでるのですが、場合によって少し違います。

• [改行、無視 ]
  
• [文字列の後の改行 ]
  
• [文字列の後の改行+改行 ]
  
  

改行、無視

新規投稿ページの執筆フィールド内で、
文字列がなにも出現しないうちの改行は、「無視」（タグの出力はありません）されます

• 執筆フィールド内
  

  [Enter]
  [Enter]
  [Enter]
  テキスト
  

※[Enter]はキー操作です。（執筆フィールド内では、実際には見えてませんね）

• 見え方
  
  テキスト
  

と改行などの空行はありませんね。

• 実際に出力されているHTML（一部わかりやすいようにしています）
  

  <div>
  テキスト
  

文字列をページの頭から、書いたのと同じになりますね。
そして、これは「ページ内での最初のみおこる現象」となります。

文字列の後の改行

新規投稿ページの執筆フィールド内で、
文字列が出現したあとの改行は、通常の<br />タグの出力が文字列の終わりに出現されます

• 執筆フィールド内
  

  テキスト[Enter]
  テキスト[Enter]
  
  

※[Enter]はキー操作です。（執筆フィールド内では、実際には見えてませんね）

• 見え方
  
  テキスト
  テキスト
  

と改行が、普通の解釈のとおり出現します

• 実際に出力されているHTML（一部わかりやすいようにしています）
  

  <div>
  テキスト<br />
  テキスト<br />
  

と続きます

文字列の後の改行+改行

新規投稿ページの執筆フィールド内で、
文字列が出現したあとの改行は、通常の<br />タグの出力が文字列の終わりに出現されます

• 執筆フィールド内
  

  テキスト[Enter]
  テキスト[Enter]
  [Enter]
  テキスト
  

※[Enter]はキー操作です。（執筆フィールド内では、実際には見えてませんね）

• 見え方
  
  テキスト
  テキスト
  
  テキスト
  

と改行が、普通の解釈のとおり出現します

• 実際に出力されているHTML（一部わかりやすいようにしています）
  

  <div>
  テキスト<br />
  テキスト<br />
  </div>
  <br />
  <div>
  テキスト
  

となります。
「おや！」
そうです、改行を二つつづけると、
DIV要素が閉じられます（終了タグの出現）
そして、改行タグが出現
テキストがあれば、又、DIV要素の開始タグがでるというわけです。

通常、このような、段落的なブロック要素としては、Ｐ要素を使いますが、
ここでは、ＤＩＶ要素と、改行で、段落のまとまりと、見え方を表現しています。

---