■文章の中に画像を挿入する方法　　06/10/09
JOYFULYYは、v2.50y24m55から、
コメント内の画像の位置を自由変えることが出来るようになりました。
各掲示板についている「画像の投稿方法」にもやり方が載っていますが、
慣れるまで、どういうことかちょっとわかりにくいと思いますので、
イメージがわきやすいように、図入りで作ってみました。

■目次

(1)画像の右に文章を入れる。

(2)画像の左に文章を入れる

(3)画像を数枚横に並べて、説明を下に入れる。

(4)画像の横に文章を複数行入れ、画像が終わるところで改行する。

(5)画像に説明をつける　07/1/19

その１）オンマウスで説明が出るようにする

その２）画像のすぐ下に説明を入れる（囲）

その３）複数画像を並べ、それぞれに説明をつける（近）

(6)画像の高さを揃える

(7)画像に枠をつける

（１）画像の右に文章を入れる。
＜例＞
[画像移動=○]これはスカビオサです。

これは、スカビオサです。

（２）画像の左に文章を入れる。
＜例＞
これはピコティです。[画像移動=○]

これはピコティです。

[画像移動=○]　だけですと、↑のように文章は画像の中央に来ます。

文章を画像の上と揃えたい時は、「上」を入れます。　→　[画像移動=○上]　
画像の底辺と合わせたい時は、「下」を入れます。　→　[画像移動=○下]　

＜例＞
[画像移動=○上]これは、シラーです。

これは、シラーです。

＜例＞
[画像移動=○下]これはぺチュニアダブルです。

これはぺチュニアダブルです。

＊[画像移動=○]　の、○の部分には、投稿フォーム↓の画像の選択の数字が入ります。

例えば画像3で選んだ画像は、[画像移動=3]となります。
この時の数字、[ = 123… ]は、必ず、半角文字を使ってください。


（３）画像を数枚横に並べて、説明を下に入れる。（複数行可）
＜例＞
[画像移動=1][画像移動=2][画像移動=3]
左から順に、マーガレット、こでまり、姫フウロです。

左から順に、マーガレット、こでまり、姫フウロです。

文を上画像を下にしたい時は、↑の反対にします。
＜例＞
左から順に、マーガレット、こでまり、姫フウロです。
上のケースと反対です。
[画像移動=1][画像移動=2][画像移動=3]

左から順に、マーガレット、こでまり、姫フウロです。 上のケースと反対です。

（４）画像の横に文章を複数行入れ、画像が終わるところで改行する。
[画像移動=○左]又は [画像移動=○右]と指定すると、
複数行の文章を回り込みで挿入することができます。
説明の文章の最後に[画像終改行]と記入してください。
そこから後の文章は画像の下に移ります。

１）左寄せ：画像を表示枠の左端に置いて、文章を画像の右側に書きたい時
＜例＞
[画像移動=1左]　これはルッコラの花です。
ルッコラはロケットとも言います。
葉っぱは生で食べられます。
ちょっとゴマのような味がします。[画像終改行]

これはルッコラの花です。 ルッコラはロケットとも言います。 葉っぱは生で食べられます。 ちょっとゴマのような味がします。

２）右寄せ：画像を表示枠の右端に置いて、文章を画像の左側に書きたい時
＜例＞
[画像移動=1右]　これはベルエトワールという名前のバイカウツギです。
7月の始め頃咲きます。
これが咲くと庭中に甘い良い香りが漂います。[画像終改行]

これはベルエトワールという名前のバイカウツギです。 7月の始め頃咲きます。 これが咲くと庭中に甘い良い香りが漂います。

※「右寄せ」の場合、掲示板の表示枠が大きいときは、↑のように画像と文章の間があきます。
※右寄せ、左寄せのときは、文章は上揃えになります。中央揃え、下揃えの指定はできません。
※エンターキーで行変えを出来ます。そのとおり表示されます。


（５）画像に説明をつける　07/1/19

その１）画像にマウスのカーソルを乗せた時に説明を表示できるようにしたい。
画像の参照の下にある「コメント」欄に入れた文字はマウスポイントを画像に合わせると出てきます。
投稿フォーム↑の「画像1」で選択した画像の説明は、「コメント1」の部分に入れてください。
投稿すると、↓このようになります。（マウスのカーソルを画像に合わせてみてください）

その２）画像の下に説明を入れたい場合。
説明は、↑「コメント1」の部分に入れます。投稿欄には[画像移動=1囲]と入れます。
投稿すると、↓このようになります。

これはフロックスです。宿根草です。 北海道の戸外でも越冬します。

注）改行は打ったとおりになります。文字を写真の幅で納めるために
一行には全角15文字を限度に、Enterキーで行変えしてください。

その３）画像を複数枚並べ、その下にそれぞれ説明をつけたい。
複数枚並べたいときは「近」を使います。
ただし、表示枠の関係があるので、1段に表示するのは２−３枚限度で。
最後に「画像終改行」を入れます。

説明は、↑画像1のコメントはコメント１というように、それぞれの画像の「コメント」の部分に入れます。
投稿欄には[画像移動=1近]　[画像移動=2近][画像終改行]と入れます。
投稿すると、↓このようになります。

これはフロックスです。宿根草です。　これはクリスマスローズです。　 北海道の戸外でも越冬します。　　　これも越冬可能な宿根草です。

以上の（１）〜（５）までが使い方が基本です。

次は、応用編

（６）画像の高さを揃える
「高」の文字と「数字」を加えると画像の高さを指定できます。
投稿画像は、一定の比率で縮小されます（ここではMAX幅240ｘ高180ピクセル）が、
元の画像がバラバラの大きさだと、同じサイズの縮小画像にはなりません。
数枚を並べて投稿するとき、横幅が揃っていなくても気になりませんが、高さが揃っているとスッキリします。
＜例＞
[画像移動=1高100]　←　高さを100ピクセルにする
[画像移動=1上高180]　←　文章を上揃え、高さを180ピクセルにする

↑ 　画 　像 　の 　高 　さ 　↓

元の画像のサイズが、指定の数字以下の時は無効です。
※指定するサイズは、20ピクセル〜200ピクセル以内でお願いします。

（７）画像に枠をつける。

＜例＞
[画像移動=1枠2赤]　←　2ピクセルの赤の枠を表示

クリスマスローズ・オリエンタリス

＜例＞
[画像移動=1枠5青下高80]　
枠色青、枠幅5ピクセルで、文は下寄せ、画像の高さ80ピクセルに設定

クロッカス

＜例＞
[画像移動=1左（又は右）枠○緑高〇〇]　複数行文　[画像終改行]
↑これも可能です。（使用例画像はのちほど）

枠サイズは1〜5（ピクセル）までです。（半角数字）
「枠」だけで数字を省略したときは、1ピクセルの枠がつきます。＜例＞[画像移動=1枠赤]
色は以下の文字で指定します。（JOYFULYY独自配色、省略値は灰色）

色文字指定	青	紅	赤	緑	茶	橙	黄	灰	黒
	薄青	薄紅	薄赤	薄緑	薄茶	薄橙	薄黄	薄灰	白

色指定は「#5555ff」の形式でも指定出来ます。（半角記号英数字6桁）
＜例＞
[画像移動=1枠1#004000]　←　1ピクセルの濃い緑色の枠表示

※尚、[画像移動=1左]、[画像終改行]などのよく使うであろう指示の言葉を、
短い言葉で辞書に登録しておくと、いっそう使いやすくなると思います。

- * -　- * -　- * -　- * -　- * -　- * -　- * -　- * -　

＊この記事に対する、ご意見・ご質問・ご感想は「お気楽談話室」へどうぞ。
HOME 　JOYFULYYを設置しよう

copyright(C)200１-2006 Harumi　T． All rights reserved.
You can use the files in this corner. But,I don't renounce my copy-rights.