個人的PWblogマニュアル

こんな感じで画像を並べる方法は以下の通り

＜p＞
＜img src="http://blog.zmapple.com/user/blueprint/kaiseki/image/1911_s.jpg" alt="CM" style="float:right;"＞＜img src="http://blog.zmapple.com/user/blueprint/kaiseki/image/1911_s.jpg" alt="CM"＞
＜/p＞

style="float:right;"をこの場合、
右に寄せたい内容のタグにつけるだけでいい、
後に続く内容が左にくる

style="float:left;"左に寄せたい時はこれ
後に続く内容が右にくる

style="float:none;"これがノーマル状態

文字でも同じことができる
こんな感じだ

久ぶりの新記事です

文字や画像の回り込みの解除もちょっとややこしい


画があってalign="left"で左に寄せているので
文字は画の右に回り込んでしまう
複数の画像を並べた時にジグザクに並んでしまう状態も解除できる
↓
↓
↓
こんな感じでスーペースを入れて画の横から文字をずらすのが
手取り早いが、ちょっと格好つけたいときに使う
（自己満足の世界へようこそ！）

＜br clear="left"＞(実際は＜＞は半角で入力）
を貼り付けた画像用のタグの最後につける

＜img src="http://www.pwblog.com/user/blueprint/files/1534_s.jpg" alt="CM" align="left"＞＜br clear="left"＞
こんな感じ。そのとき、left位置属性は合わせる。面倒臭かったから
＜br clear="all"＞でもいい

＜p style="clear:left;"＞
（回り込みを解除したいコンテンツを入れる）
＜/p＞
この方法でもいける





ちゃんと文字が画の横から下に移動する
画も被らずに縦にならんでくれる

注：以前はｂｒを使用して自動改行にチェックを入れておくと＜br＞が
　　自動的に付加されて（編集かけた回数だけ重ねて）修正が必要だった
　　ソフトを修正したのかなぁ

次は画像に対するリンクの枠消しと枠の修飾かなぁ。画像に隣接する文字の位置の調整方法もあげて、忘れても困らんようにしとこ。
この辺のタグはＣＳＳファイルでも良く使うんだよね。

大きい画像を自動と同様のポップアップ表示で表示する方法を
説明します。
前回、ＵＰした記事を参考にＵＰしたい画像をサーバーにロードしておきます。
画像のＵＲＬをちゃんとメモしてください。
画像ＵＰ用の記事はちゃんと下書きにしておかないと
表示されてしまうので注意してください。



＜img src="http://blog.zmapple・・・
・・５９８s.jpg" align="right"＞
メモしたＵＲＬをこういう感じで貼り付けると
右のようにスモール画像が表示されるでしょう。
align="right"は右に寄せるタグ

一番簡単な方法は記事の中に書いたＵＲＬ
＜img src="http//・・・598_s.jpg"＞
をコマンドメニューにあるリンクボタンでリンクします。

リンクするときに別ウィンドで表示されるリンクＵＲＬを
http//blog・・・.jpg
の範囲に修正しておきます。そのときに前に説明したように
・・598_s.jpgの_sを削除したＵＲＬを入れます。
そうすると

＜a href="http://blog.zmapple・・・・598.jpg" target="_blank"＞
＜img src="http://blog・・・・598_s.jpg" align="right"＞＜/a＞
こうなればＯＫです。
最初のa href="http//・・・がリンク先の画像アドレスになります。
後ろのimg src="http・・・が表示される画像アドレスに
なります。画像ではなく文字を入れてもリンクできます。
ポップＵＰしたい画像
こんな感じです。

画像のＵＰ
新規投稿ページにある画像欄に、画像のＵＲＬを入力すれば
ＢｌｏｇＭａｓｔｅｒのサーバーに転送されて記事の
トップ左側に画像がＵＰされる。
画像サイズにより自動的に、スモールサイズが表示され
スモールに元図が、自動的にリンクされるので、
クリックすることで元のサイズの画像が表示される。
サンプルは元図は８０×２３pxなのに１１９×３４に
拡大されてる？

とりあえず、読み込み可能な画像形式は

ビットマップ

Ｊｐｇ

ＧＩＦ

ＰＮＧ

は確認しました。

2005/09/03 追記
但し、すべてＪｐｇに変換されます。
と言うことはＧｉｆアニメが使えない？

昨日の続きです。
メモ帳に貼り付けたＵＲＬは置いといて
画像をＵＰした記事投稿を完了させてください。
途中でやめると画像が転送されていないことがあります。
記事が下書きになっていることを確認して、編集ボタン
をもう１回押します。記事投稿完了画面がでます。

ＵＰしておきたい画像の枚数分だけこれを繰り返します。
過去にＵＰした画像のＵＲＬを投稿した記事の編集で表示して
ＵＲＬさえ解ればれば再表示可能になります。

さて、表示したい画像のＵＲＬは解りました？
では、新規の記事を書いて画像を入れたい所に
＜img src="http://blog.zmapple.com/user/blueprint/kaiseki/image/1534.jpg" alt="Blueprit" width="80" height="23"＞
(実際は＜＞は半角で入力）と記入すると

と表示されます。記事が回りこみますが、
左に寄せたい時は　align="left"
記事の途中にしたい時は　align="all"
右に寄せたい時は　align="left"
＜img src="http://blog.・・・・80" height="23" align="all＞
と記入します。どうでしょうか？
表示できる画像のサイズは使用している

デザインに影響されます。
片側プラグインでＷidthは３６０ぐらいでしょか
Ｈeightはまだ試してません。
でも１６０×１６０ｐｘ以内ぐらいに止めといた方が表示は
速いと思います。
あと、コピーしたＵＲＬを見ると1534 s.jpg Sがついているでしょう。
スモールのＳです。最初にＵＰしたサイズの画像を
表示したい場合は_Sを削除しておきます。

これは、ＰＷＢｌｏｇでは通常の画像ＵＰ時に自動的に
スモールで表示が行われ、ポップアップで元サイズを表示する
ように設定されているからです。

画像が大きくて、自動と同様のポップアップ表示にしたい方は
ちょっと待ってください。次回、説明します。

管理者の方からＯＫコメントいただきましたので
複数の画像をひとつの記事にＵＰする方法を紹介します。
但し、手間がかかるからヘルプに載せるのは？だと思います。


まず、画像をセーブするカテゴリを作成します。
これは、後で画像用だと分かるようにするためです。
画像用のカテゴリで新規に記事投稿します。

そこでは、まずタイトルと本文を記入します。
タイトルは何の図なのか分かる用に記入します。
本文は図１でも、あ、でもかまいません。タイトルと
本文に入力がないと記事が保存されないので必ず何か
入れてください。
続いてＵＰしたい画像を参照ボタンを使って記事にＵＰします。
一番下にある編集ボタンを押して記事をサーバーにＵＰ
します。編集ボタンは１回押すことになります。
編集確認の表示画面（戻るボタンが増えてる）がでたら

画像欄に表示されたサンプル画像を右クリックします。