ブログ記事で画像を好きな位置に配置しよう！（手抜き編^^;

せっかく書く記事なら綺麗に画像などを良い感じにレイアウトしたい。
Wikiを使いこなせば、綺麗なレイアウトもけっこうできるみたいですね(o^_^o)

　でもそんなの面倒^^;っていう私、こんな方法を使ってます。
まず画像の配置です、好きな所に置きたいですよね〜

---

　そんな時はWiki文法を使います。
これは「新規投稿」時にのみ選択できるので記事投稿時チェックしてくださいね。
記事を投稿する枠の右上には「□wiki文法使用」っていうところが
　ありますね〜、ここに画像のようにチェックマークを入れておいてください。

　次に画像を文章中に貼り付けるには、

[[attached(x)]]

　こんな文法を使います。

　書いている記事中の画像を入れたい所の行に記入してください、好きな所に配置できますよ〜。
括弧内の「 x 」は数字です、これは画像投稿時の順番の数字を入れます。
２番目の画像なら「x」を「2」に変更すればOK。１つの記事に同じ番号を複数入れてもOKですよ。
この文法で使ってない番号の画像は最初に出てきます。

　次は画像の横に文章を入れたい場合でね、けっこう簡単で先ほどの文法に、ちょいと足せばでき上がります。画像番号の次に「,Left」などを入れるだけでOKです〜

[[attached(x,Left)]]　　画像が左で文章が右
[[attached(x,Center)]]　画像が中央
[[attached(x,Right)]]　 画像が右で文章が左

簡単でしょ〜

---

さらに！？、手抜きで綺麗?なレイアウトテクニック^^;
画像の横に文字を置くのですが、一行空白行を入れてみたい場合、普通にすると画像より下の部分まで移動してしまいますよね。それを何とかコントロールしようと思います。

　どういう風にするのかといいますと。
改行を使い分けるんですね。で、方法は簡単です。

１：　単純に改行すると、普通に改行しますね。

２：　1行に何も入力せずに改行を入れると画像の下に次の文章が飛んでいきます。

３：　１つスペースを入れて改行しましょう。
人間の見た目では空白行ですが、パソコンからすると「空白」という文字は入っている訳です。
なのでそのまま画像の横に続きの文章が入力できる訳ですね^^

↓たとえば・こんな感じに仕上げてみましょう↓

記述はこういう感じです。wiki文法を使ってこんな感じにしてみてください。
　（上の赤枠の中は説明の為に簡略化した感じで、画像になっています。）

---

↓実際の記述はこうです。↓　（といいつつ・attachedの中の数字は全角に変えています。）

すかしッペ

[[attached(１,right)]]
||<#FFFFFF' style='width:560px;text-align:right;color:red' ``たべちゃうぞ〜||
[[attached(２,left)]] た・た・た
 
たすけて〜〜
||<#FFFFFF' style='width:560px;text-align:right;color:red' ``まてまて〜||
いやだぁ〜〜

||<#FFFFFF' style='width:560px;text-align:center' ``最後ッペの攻撃だ〜||
[[attached(３,center)]]

attachedの前後にはテキストを入力できます。すると画像と同じ高さから文字が入ります。
ただし、Wiki文法を利用した文章は改行してないと入らないみたいです。
上のサンプルでいうと3行目の「たべちゃうぞ〜」の部分ですね。
4行目の「た・た・た」という文章はattachedの横に入っていますね。違いを比べてみてください

---

（注１）ここでは説明してないWiki文法は・また他で調べてください^^
（注２）ブラウザーによってはレイアウトが崩れて表示される場合があるかも知れません。
（注３）このattachiedを使った記事は、転載されるとレイアウトが崩れてしまうみたいです。転載される事を前提とした記事を作るのならこの方法はお勧めできません。

てるさん、写真をはしによせる貼付け方がわからなかったのでこの方法を活用されていただきました。なんとか記事に出来ましたよ〜。ありがとうございます。

ばっちり出来ましたでしょうか〜（⌒◇⌒）、良かったです、どんどん良い感じにレイアウトして楽しんでくださいね(o^_^o)＞よつ葉さん

[-]

またまた頑張って使ってみまぁす

どんどん進んでいきましょう〜（⌒▽⌒）＞anmamaさん

大変参考になりました。なかなか初心者から脱せず、単調な記事ばかりのものですから(;^_^A アセアセ・・・ぜひこのやり方で写真を貼ってみたいと思います。

この記事はURLを使わなくていいのと配置が楽ですね^^。どんどん楽しい記事を書いてってくださいね(#^o^#)。最後の手法だけがWinのIEで崩れるのが現状で対処できていませんm(_ _)m＞pockyさん

自慢のご自宅シャンデリアですか？かわいいw
画像の下の白線ですが、わたしはいつも改行でスペース作って対応してます。文を横に持ってこないなら、それでもOKですよね。

＞めいりんさん

プチとも言い難いぐらいのシャンデリア？ですね〜（笑）

白線を使うのは、実は改行というのはそれぞれパソコンやらOS、もしくは各個人のブラウザーの設定によってもいとも簡単に変わっちゃうのです。なので・なるべくどの環境でもということで画像を使っています^^
改行でもたいていは大丈夫だとは思いますが、小さいフォントにしている方のところでは、画像の途中から次の文章が始まっているかもしれないんですね(o^_^o)

なるほどです。ブラウザーによる微妙な表示の差ですね〜。

白線をひっぱっていくのはだめでした。これはGIFなどでないからだめと、コンピューターがいいました。白い色に意味がありますか？ 線ならなんでもいいのでしょうか？

はじめまして、
ブログを始めて見たものの、わからないことだらけで、もう放置ブログか、いや始めたからにはがんばろうと思っていたところここを見つけました。できた！できるじゃない！もう感謝感謝です。
これからもお世話になりマース。

＞めいりんさん

コマンドを押しながら＋とかーを押すと結構レイアウトが変わると思います、イメージ的にはそんな感じなのだと体感できます（白線でも崩れるかもしれませんが〜^^;;

＞Konnichihaさん

白線はこの記事のをダウンロードされましたでしょうか？
Yahooはダウンロードすると拡張子という謎の暗合が消える場合があります。
拡張子とはファイル名の最後に付く3桁か4桁の暗号です。
ファイル名に「.jpg」というのを付けると、アップできるようになります。

白線は見えないのと確実にブログの横幅を使い切るためって感じで思っていますよ^^

＞tmtloveloveさん

いらっしゃいませ〜〜^^
ブログの楽しみ発見できていけそうでしょうか(o^_^o)、うれしいお言葉ありがとうございます。どんどんブログライフを楽しんでいけるといいですね(#^o^#)

こんにちわ＾＾御無沙汰してます＾＾チョコチョコお伺いしては、勉強させてもらってます。[[attached(x,Left)]]←これをどう保存して自分のﾄｺで使えばいいのでしょう？更新の度に通ってます（＾＾；でも、とっても、助かってます。うれしいです。ありがとうございます！！

[-]

はじめまして。Macが全然使いこなせず、困っていました。とても、解りやすい説明で、ぜひやってみたいと思います。また、お邪魔させて下さい。

＞春乃さん

非常にお返事が遅れてしまってごめんなさい、気付いておりませんでしたm(_ _)m
もう手遅れかも知れませんが、xのなかは画像の番号（投稿順）を文章中の写真の入れたい位置に放り込むだけです。
先日お邪魔しましたときには、レイアウト技をマスターされているかどうかを確認しておりませんでした、また再度お邪魔させていただきますね(o^_^o)

＞ichigoさん

はじめまして〜、なのに、お返事が1年遅れになってしまいました、おっちょこちょいな私を許してくださいm(_ _)m
ブログに関してはブラウザーをちゃんとするとマックもウィンドウズもほぼ関係なく使えますね^^。
ちょっと長くなってしまう解説ですけど、見ていただけて嬉しいです^^

参考になりました。ありがとうございます。

>blueBishopさん

お役に立てたでしょうか〜^^
ブログライフを充実させてくださいね。