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

インデントを利用したコーティング

インデントを利用したコーティング

wiki表記で出力されるindentは構造的には
div要素による。ブロック要素にすぎません。

構造的なコーティングにはその辺を理解してコーティングする必要があります。

見え方のみの場合
例えば、
品名があって、その説明などする場合

品名

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

品名

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

などとなります。

この場合、見た目はいいのですが、
品名と。その紹介文の間には、順列の構造（つまり上から下となっているだけです）。

これを入れ子にして表記すると

品名

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

---

品名

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

となり、品名の構造の中に、紹介文が入った状態になります。

見た目では大差はないですが、、、。実はこれは「非常な差」があるのです。

この辺に着目すると、更に、インデントで表現するより、実は、箇条書きを使用した方がより強力に作用するかもしれません。

この意味が理解できている人はいわゆる、一部のプロと呼称される人たちも含まれるかもしれません。

---

wikiでの表記(Level2)

• インデント(字下げ)
  

インデント(indent)字下げの秘密（wiki表記)

インデント(indent)字下げの秘密（wiki表記)

インデントがあるというのは、Yahooのブログのヘルプをコピーした際や、
偶然、字下げになっているので、おやっ？と思った方も多いでしょう。

ソースを確認するとdiv要素のclass属性にindentとありますので、
このブロック要素があることがわかります。

• [インデント(indent)字下げ]
  
• [インデント(indent)の入れ子]
  
• [箇条書きとの併用での秘密]
  

そこでＭ氏の思考のyasuiさんの記事をヒントに、少し掘り下げてみました。

インデント(indent)字下げ

• wiki表記
  

  半角スペース○○○○○○○○○○○○○○○○○〜
  

左端に、半角スペースであとはテキスト文字を入れてください。

• 見え方
  

↓この部分（一文字半字下げ）

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

となります。
行頭に、半角スペースでその直後に文字をつづけてください。

インデント(indent)の入れ子

そして、このインデントにつづいた文に改行を入れた直後に
行頭から、下記のようにすると、いわゆる入れ子状態になり、さらに、字下げができます。

• wiki表記
  

  半角スペース○○○○○○○○○○○○○○○○○〜改行
  半角スペース半角スペース○○○○○○○○○○○○○○○○○〜改行
  

左端に、半角スペースであとはテキスト文字を入れてください。

• 見え方
  

↓この部分（一文字半字下げ）

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

↑この部分（さらに、一文字半字下げ）
となります。

行頭に、半角スペースでその直後に文字をつづけ、
改行直後の行頭に半角スペースを２つでその直後に文字となります。

箇条書きとの併用での秘密

私が、好んで使用するブロック要素のUL、 LI要素をwiki表記で出力させた場合
このインデントとの併用すると下記のようなことが判りました。

• wiki表記で箇条書きとの併用をした場合
  
  

     *箇条書きでのテキスト文字（改行）
     *箇条書きでのテキスト文字（改行）
  
   インデントでのテキスト文字
  

• 見え方
  

箇条書き直後に改行さらに、改行でも

• 箇条書きでのテキスト文字
  
• 箇条書きでのテキスト文字
  
  

インデントでのテキスト文字

↑この部分がインデントにならない

• wiki表記で箇条書きとの併用をした場合2
  
  

箇条書きのテキスト、直後に改行を入れ
通常にテキスト文字を入れると

   *箇条書きでのテキスト文字（改行）
   *箇条書きでのテキスト文字（改行）
テキスト文字
 インデントでのテキスト文字

• 見え方
  

箇条書き直後に改行そして、普通のテキスト文字後の改行では

• 箇条書きでのテキスト文字
  
• 箇条書きでのテキスト文字
  

テキスト文字

インデントでのテキスト文字

↑この部分がインデントになります。

これは、箇条書きの改行直後に普通のテキスト文字が出現することにより、
箇条書きのUL要素の終了タグが出力し完了とみなし、
あらたに、行頭による半角スペースを、インデントと認識するシステムだと私は推測します。

又、普通のテキスト文字ではなく、wiki表記の水平線でもOKです。

• 箇条書きでのテキスト文字
  
• 箇条書きでのテキスト文字
  

---

インデントでのテキスト文字

↑この部分がインデントになります。

箇条書きについては→wikiでの表記２

他の併用のパターンの詳細については、後ほど、
まとめて記事に致します。

---

尚、この記事作成に
Ｍ氏の思考

Wiki リストとインデント作成法

をヒントにさせていただきました。ありがとうございました。

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

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

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

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

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

• 文字に色を付けたい！
  

少しだけ心をつかって、

• 素敵な色の使い方
  

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

• 文字のサイズを指定してみよう！
  
  

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

• リンクが、はりたい！
  

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

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

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

• ヘルプにあるwiki(少しでも判りやすくと改良！)●wikiでの表記２
  
  

リンクがはりたい！

リンクがはりたい!

ブログに記事を書き始めると、リンクをはりたくなりますね。

そんな場合あなたはどうしますか？

とにかく記事を書いてリンクをしたい場合

そんなあなたには、そう、そのままＵＲＬを書くだけ。

「は！」

そうなのです。よく掲示板などでも
ｈｔｔｐ：//から始まる文字列の場合、にリンクが生成されるでしょう
あれと同じです。

http://blogs.yahoo.co.jp

YahooブログのＴｏｐページへのリンクはhttp://blogs.yahoo.co.jpとなります。

この場合、ＵＲＬの直後と文字列の間に必ず、「半角スペース」を入れてください。

こうです

YahooブログのＴｏｐページへのリンクはhttp://blogs.yahoo.co.jp となります。

これでリンクが生成されます。

ＵＲＬが表示されてしまうのでは

と思いの方や、
少し手間でも、スマートに表示したいと考えの方には、

新規投稿ページにて、wiki文法にチェック

[http://blogs.yahoo.co.jp リンク先]

と書いてください。
この場合でもＵＲＬの直後は必ず、「半角スペース」を入れてください。

リンク先

リンク先を
YahooブログのＴｏｐと文字をいれたい場合だと

[http://blogs.yahoo.co.jp YahooブログのＴｏｐ]

YahooブログのＴｏｐ

となります。

---

雑誌のようにイメージを入れたい（回り込み）

「雑誌のようにイメージを入れたい（回り込み）」

雑誌のコラムや新聞記事って写真の回りに文字が流し込まれていますね。
手法は全くことなるのですが、擬似的に再現しています。
あなたの記事が素敵に変身するかも！

• [イメージをアップロード]
  
• [左にイメージ、右に記事]
  
• [右にイメージ、左に記事]
  
• [１ページに複数イメージ左、右にし、記事を流し込む ]
  

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

新規投稿ページの

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

(複数の場合でも構いません。)

• 2wiki文法にチェックを入れる
  
  

左にイメージ、右に記事

以下のように表記します。

[[attached(１,left)]]ああああ〜（流し込む文字）〜ああああ

※数字の１は「半角文字」に直してください。
これで、画像添付でアップロードされた一番目の画像がページの左端に表示され、
つづけて記入された文字が右側に流し込まれるように表示されるはずです。

（例では、改行していませんが、流し込む文中での改行は、そのまま有効です。）

---

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

---

右にイメージ、左に記事

以下のように表記します。

[[attached(１,right)]]ああああ〜（流し込む文字）〜ああああ

※数字の１は「半角文字」に直してください。
これで、画像添付でアップロードされた一番目の画像がページの右端に表示され、
つづけて記入された文字が左側に流し込まれるように表示されるはずです。

（例では、改行していませんが、流し込む文中での改行は、そのまま有効です。）

---

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

---

１ページに複数イメージ左、右にし記事を流し込む

以下のように表記します。

[[attached(１,left)]]ああああ〜（流し込む文字）〜ああああ

[[attached(２,right)]]ああああ〜（流し込む文字）〜ああああ

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

これで、画像添付でアップロードされた１番目の画像がページの左端に表示され、
つづけて記入された文字が右側に流し込まれるように表示されるはずです。

※数字の２は「半角文字」に直してください。
これで、画像添付でアップロードされた２番目の画像がページの右端に表示され、
つづけて記入された文字が左側に流し込まれるように表示されるはずです。

（例では、改行していませんが、流し込む文中での改行は、そのまま有効です。）

---

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

---

• このように複数のイメージを表示して流し込みを行う場合に限らず、イメージの高さより、流し込む文が少ないと、意図していない次のコンテンツまで、流し込まれてしまいます。文中で改行などして流し込む高さをイメージの高さより大きくするか、イメージのサイズを小さなサイズを使用するとよいでしょう。
  

※この場合イメージの縮小は行えませんので、560pxより更に小さなサイズでないと、流し込むスペースが少なすぎることになります。560pxより多い場合はレンダリングが崩れる場合があります。

• win IEでは「文字サイズが固定」されていますが、他の環境では、「文字サイズが可変」しますので、「意図したレイアウトにならない場合」があります。
  
  

---

尚、記事編集に
きろくぶろぐさんの
ヘルプに載ってないWiki文法（その１３）「画像横への文字の回りこみ」
をヒントにさせていただきました。ありがとうございました。