記事本文を飾り付けてみよう「（その１６）Wiki超入門６」

さて、前回に引き続き[[attached()]]文法のご説明をしたいと思います。今回はこの文法を使用して画像の配置変えや、文字の回りこみ（画像の隣に文字を流し込むこと）をやる方法をご説明したいと思います。
それでは、始めましょう。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的な文法としては

[[attached(画像番号,配置する場所)]]

（※注　画像番号と配置する場所の間には","(半角カンマ)が入っています）
です。

画像のアップロードの仕方は、
Yahoo!blogをはじめてみましょう「（その４）画像を投稿してみよう前編」
を参考にしてください。

■画像を左に配置する（配置は"left"を指定）

文法）
[[attached(1,left)]]
（※画像番号1を左配置に指定した場合）

結果）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を中央に配置する（配置は"center"を指定）

文法）
[[attached(2,center)]]
（※画像番号2を中央配置に指定した場合）

結果）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を右に配置する（配置は"right"を指定）

文法）
[[attached(3,right)]]
（※画像番号3を右配置に指定した場合）

結果）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

（※注　1枚の画像に対して、指定できる位置は1つだけです。同じ画像を別な位置に貼り付けたい場合は、同じものを複数アップロードしてください。）

以上のように配置を"left"か"right"に指定すると、自動的に文字が回りこむようになります。

■画像を左に配置し、文字の回りこみをする（配置は"left"を指定）

文法）
[[attached(1,left)]]
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。

結果）

文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を中央に配置する（配置は"center"を指定）

文法）
[[attached(2,center)]]
画像の隣に文字は回りこみません。

結果）

画像の隣に文字は回りこみません。

（※中央配置だと自動的に余白が少し入ります。）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を右に配置し、文字の回りこみをする（配置は"right"を指定）

文法）
[[attached(3,right)]]
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。

結果）

文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

以上のように、配置に"left"や"right"を指定すると、自動的に文字が回りこんでしまう為、写真の下に文字を表示したい時には、写真の縦の大きさ分だけ改行して調整する必要があります。

■画像を左に配置し、文字の回りこみをさせない（配置は"left"を指定）

文法）
[[attached(1,left)]]

文字を回りこませないためには、ここから本文を書き始めます、、、。

（※注　この写真の場合、改行を15行入れています。すると、以下のような表示になります。）

結果）

文字を回りこませないためには、ここから本文を書き始めます、、、。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を右に配置し、文字の回りこみをさせない（配置は"right"を指定）

文法）
[[attached(3,right)]]

文字を回りこませないためには、ここから本文を書き始めます、、、。

（※注　この写真の場合、改行を15行入れています。すると、以下のような表示になります。）

結果）

文字を回りこませないためには、ここから本文を書き始めます、、、。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

説明が長くなってしまいました。
文字を回り込ませたくない場合は改行が少し面倒ですが、文字の回りこみを気にしなければ、この[[attached()]]文法はとても便利だと思います。みなさんも是非使ってみてくださいね。

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

[芋焼酎アトム]

とっても分かりやすい説明で、参考になります！ ほかの方の画像を、自分のブログにUPすることは出来ますか？

こっこーさん、はじめまして。他の方の画像を自分の所にアップするには、一旦右クリックなどで自分のパソコンに画像を保存してから、アップするといいと思います。ただ、著作権などの問題がありますので、無断で他の方の画像を利用するのは止めておいたほうが良いと思います。お互い、嫌な思いをしないようにしてくださいね。

[-]

わかりやすい説明ですね♪早速試してみます！！お気に入り頂いていきますね♪画像を横に並べることもできますか？

文字の回りこみ、皆さんやっていて羨ましかったんですが、私も早速挑戦したいと思います〜（^-^）

＞小優美さん。はじめまて。お気に入り有り難うございました。attachedを使って画像を横に並べた事はありませんが、出来るかどうか試してみますね。もう少しお時間を下さい。コメント有り難うございました。

＞topoさん。はじめまして。お役に立てたようでしたら、嬉しいです。いろいろ試してますますブログが楽しくなると良いですね。これからも、よろしくお願いします。

なるほどぉ！！やってみます!(^^)!ありがとうございます。

(*^-^*)/こんばんは〜♪!こちらも参考になりました！転載させて下さいねペコリ(o_ _)ｏ))

とても参考になります。いつもありがとうございます。wiki文法はじめてなのでとまどっておりました。これからもよろしくお願いいたします。

いつもお世話になってます。本当に助かります。面白いですね、いろいろできるようになると。

参考になりました＾＾転載させてくださいね

参考いたします

参考になります〜分かりやすいし転載させてね

３日坊主のブログを久しぶりに更新しようと思い立ち、訪れました。がんばって使ってみます！

[こう]

画像を上手に活用したくて、検索してたら、このブログが出てきました。で、やってみるんですけど・・・出来ません。。。。[[img( )]]これと、[[attached(1,left)]]これの違いは、なんですか？？ 画像の大きさを変えるには、どうしたらいいんですか？？？

[ka-chan]

何度か勉強に訪れてました。今日はここを転載させて頂きます。ありがとうございました。

[けん]

勉強させてもらいました。転載いいですか？

[yum*10*4*0]

ありがとうございます☆参考になりました★ でもどうしても分からない事があるんですけど、[[attached()]]を使って画像を貼り付けた場合どんな画像でも最新の画像の所に貼り出されるじゃないですかぁ？？それを表示しないようにする事はできるのでしょうか？？(私的な質問ですみませんッッ･･･)

初心者の私にとってとても参考になりました。ありがとうございます。お陰でこれからブログが楽しめそうです。

[honobono]

参考になります。ありがとうございました！
早速使わさせていただきます。（傑作ぽち）