す－太郎のブログ一覧

以前のブログ、複数画像ＵＰ講座（初級編）の内容訂正と、最近覚えたことを忘れないために書き留めておこうと思います（笑）。

---

ブログというより…、メモ帳のような感じですけど…、　
よろしかったら見てください。

あくまで当方のような初心者向けです♪。
ブログの達人さん、お手柔らかに…（汗）。

---

---

下のＵＲＬは、画像の掲載やスタイルシ－トの変更について、詳しく掲載されているサイトです。
http://homepage3.nifty.com/abiweb/01/index.html
紹介させていただきます。

---

では、目次…（笑）。

【基礎編】 (１)　複数画像のＵＰ方法。 (２)　画像の大きさを変えながらＵＰする方法。 (３)　写真の左右に文章を入れる方法。 (４)　画像を左右に並べる方法。 【応用編】 (５)　画像の左右に入れた文章の位置（高さ）を変える方法。 (６)　画像の位置を変える方法。 (７)　画像とテキストの間にスペ－スをとる方法。 (８)　写真をクリックすると、別の写真が表示される方法。

個人的には、とりあえず、(１)、　(２)、　(４)、　(８)　ができれば、十分だと思います～。


＝♪　さあ、基礎編だよ～（笑）。




【基礎編】

(１) 複数画像のＵＰ方法。　

　　　①写真を別の場所に予めアップロ－ドしておく。
　　　　　（フォトギャラリ－等。Yahoo PhotoはＵＲＬが変化しますので注意～）
　　　
　　　②アップロ－ドした写真を右クリックして、プロパティを開き、
　　　　その画像のＵＲＬをコピ－して、こちらへ貼り付ける。
　　　
　　　　http://carview…　　　…/p6.jpg　　　←　例：フォトギャラリ－より

　　　③そのＵＲＬの前後へ…

　　　　　　先頭へ　< img src="

　　　　　　最後に 　　　　　 "> 　　 　　をけ加える。

　
　　　　< img src="http://carview…　　　…/p6.jpg">
　　　　 ↑
　　　※　< と i の間はわざと半角離してあります。くっつけてください。

このブログでは離しておかないと、文章として投稿できず、画像の掲載を実行してしまいます（笑）。以下、全て半角離してありますので、注意～。　

うまくやれていれば、確認画面で、画像がＵＰできているはず…。



フォトギャラリ－からリンクしてきました。８００×６００　のままです。





でもとりあえず一番簡単なのは…、
　
　ブログの本文編集画面での、その他の段にある「画像」をクリックすると、コピ－したＵＲＬを貼るように画面が出てきます。そこへＵＲＬを貼り付けると同じように画像をＵＰできます。
簡単（笑）。

　つまり、
　　　①写真を別の場所に予めアップロ－ドする。（フォトギャラリ－等。）
　　
　　　②アップロ－ドした写真を右クリックして、プロパティを開き、
　　　　その画像のＵＲＬをコピ－する。
　　
　　　③ブログの本文編集画面での「画像」をクリックし、ＵＲＬを貼り付ける。


その際に、< img src='　　～　　　　' border='0'>　ように、自動的に本文に貼り付けられて終了～（笑）。



さて、先ほどの説明と違って、後ろに border='0' が付いてきます。　
当方は、borderを付けて投稿したことはありません～。
border　について、調べたことを (８) の後半に載せておきました。

あと、画像のＵＲＬの前後に付ける　" 　" と　'　　'　の違いですが、試しましたが、結果的には何にもかわりないですね…。よくわからんけど、次へ行きます…（笑）。



(２) 画像の大きさを変えながらＵＰする方法。


上の写真では、大きいので、小さくします。

　　　< img src="http://carview…　　　…/p6.jpg">　の後ろに、

　　　　　　　width=400　　を追記して,

　　　< img src="http://carview…　　　…/p6.jpg"width=400>

　　　　　のようにします。そうすると、下のようなサイズに…。





400の位置の数字を変えると、サイズも変わります。300にすると…。



(３)写真の左右に文章を入れる方法。

写真を右側へ置き、その左に文書を書くとき…、　　

　　先ほどの　　< img src="http://carview…　　　…/p6.jpg"width=300>

　　　の後ろに、　　　align=right　を付けて

　< img src="http://carview…　　　…/p6.jpg"width=400 align=right>こんばんは～。す－太郎です。

のようにする。

こんばんは～。す－太郎です。












長文ですと…
< img src="http://carview…　　　…/p6.jpg"width=400 align=right>○○○○○○○○○○○…


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

となりますね。





　写真を左側へ置き、その右に文書を書くとき…、　　align=left　 を付ける。

　　こんばんは～。す－太郎です。



長文ですと…
< img src="http://carview…　　　…/p6.jpg"width=400 align=right>○○○○○○○○○○○…


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

となりますね。





(４)画像を左右に並べる方法。


上記の(３)を応用して、２枚の画像を、同じ高さで左右に並べます。
　 ※ 当然、画像の大きさは４００以下ですね。

　　この(４)は我流です…（汗）。


< img src=" " width=400 align=left>< img src=" " width=400 align=right >

のように、align=left　と　align=right　を最後に付けます。

こんな感じ…（笑）。

















＝♪　次は、応用編だよ～。





【応用編】

(５)画像の左右に入れた文章の位置（高さ）を変える方法。

後ろに、align=top、　align=center、　align=right　　とつけて、高さを変えます。

< img src="～" width=400 align="top">一番上です。
一番上です。


< img src="～" width=400 align="center">真ん中です。
真ん中です。


< img src="～" width=400 align=bottom>一番下です。　
一番下です。

となります。


center　の変わりにmiddleでもＯＫのようです。
top、　center、　bottom　の前後に " " を付けなくても、同じですねぇ…。これもよくわかりません～。次へ行きます（笑）。
　
でも、これはあまり使いませんよね…。



(６)画像の位置を変える方法。

小さいサイズの画像の位置を、　左、　真ん中、　右　の三カ所に置きます。


< img src=" ～　" width=300> の

前に < P align="△ ">　を付けて、
　 　　 ↑

後ろに < p/>　　　　を付けます。
　　　　 　↑

　△には　center　や　right　を入れて位置を変えます。　

↑
ここでも、< と p　の間は半角あけてあります。実際はくっつけてください。

つまり、

< P align="center">< img src="～" width=300>< /p>　　　とすると真ん中へ、

< P align="right">< img src="～" width=300>< /p>　　　とすると、右端へ。



ついでに文字を下のように挟むと…、

白川南通り
< img src="～" width=300>
< P align="center">< img src="～" width=300>新橋通り< /p>
< P align="right">花見小路< img src="～" width=300>< /p>


白川南通り

新橋通り

花見小路

となります。





(７)　画像とテキストの間にスペ－スをとる方法。

【基礎編】の（３）において、画像と文の間のスペ－ス（余白）を変えてみます。

< img src="Ａ" width=400 align=right>○○○○○○○○○○○…

そのままだと…
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○



画像と本文が近いので、以下の形で余白を設けます。

< img src="Ａ" width=300 align=Ｂ vspace="Ｃ" hspace="Ｄ">

Ａは画像のＵＲＬ、Ｂは画像の位置、Ｃは上下の余白、Ｄは左右の余白
Ｃ，Ｄに余白（ピクセル数）をいれれば空きます。



vspaceに２０、hspaceに３０を入れると以下のように…。

< img src="Ａ" width=300 align=Ｂ vspace="20" hspace="30">

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



Ｂに入れる left や right に "　 " を付けても付けなくても機能しますが、vspace　や　hspace　に入れる　ピクセル数には　"　　"　を付けないと機能しません。う～ん、何でかな…？




(８) 写真をクリックすると、別の写真が表示される方法。


　　　　　< img src="Ａ" width=300>　

の前に　　< a href="Ｂ"Target="blank"> を付けて、
　 　　　 　 ↑


後ろに　 < a/> を付け加えます。
　　　　　 ↑


↑
ここでも、< と a　の間は半角あけてあります。実際はくっつけてください。


Ｂは後から出てくる写真のＵＲＬが入ります。

< a href="Ｂ"Target="blank">< img src="Ａ"width=300>< a/>　

となります。Ａの画像をクリックするとＢの画像が出てきます。


下の画像をクリックしてみてください。



でも、当方がやると、たまに画像後の文章にアンダ－ラインが入ってしまいます。
下記のやり方の方ががいいかもしれません～（汗）。



みんカラならば…、
< img src="Ａ"width=300>　をドラッグして、本文編集画面の「リンク」をクリックすると、ＵＲＬを貼る画面が出てきますね。そこに画像ＢのＵＲＬを貼れば終了～。　

その場合、

< a href='Ｂ' target='_blank'>< img src="Ａ" width=300>< /a>

という形で本文に貼り付けられます。簡単（笑）。前述のやり方と一部違う構文がありますが、結果は同じ…。謎（笑）。まあ、画像同士のリンクができればいいとしましょう～（笑）。



もし、３００サイズの画像Ａをクリックして、同じ画像Ａが８００サイズまで拡大された形で現れるようにしたければ…、

< a href='Ａ' target='_blank'>< img src="Ａ" width=300>< /a>

とすれば、いいですね。



さて、(１)で出てきた　border　についてです。

「 img要素の　border 属性は、画像の回りに表示する境界線（ボ－ダ－）の太さを表すもの 」らしいです。当然、borderの指定がなければ、境界線は表示されません。でも画像をリンクした場合、ブラウザの種類によっては、リンクしてきた画像の回りに境界線が付いてしまうことがあるようです。上のクリックした画像の回りには細い線がついていますよね…。

ここで境界線の太さを変えるために、後ろに　border=10　を付けてみました。

< a href='Ａ' target='_blank'>< img src="Ａ" width=300 border=10 >< /a>

クリック
↓


境界線が太くなりました。
逆に、この境界線を消したければ、　border=0　とすると、消すことができますね（笑）。　

解釈が違っていたら、すいません～。


＝♪　講座、終了～（笑）。

---

お詳しい方、もし間違えがありましたら、教えてくださいませ～。

改めて書く必要のない内容もありましたが、前回のブログを元に、加筆しております。

専門的に勉強したものではありませんので、今後も訂正や加筆はいたします。

ｍ(　　 )ｍ 。

---

上のようなラインを入れるには…
< hr>
↑
を入れると入ります（笑）。↑は半角開けてありますが、実際はくっつけてください。


では、では。

ちょこっと訂正させてください（汗）。








画像をブログに載せる時、アップロ－ドしておく場所は、スタイルシ－トやフォトギャラリ－、YAHOO-PHOTO　などがある…と以前カキコしました。

スタイルシ－トでは、枚数に限度があり、当方もYAHOO-PHOTOを２，３回使ったことがありましたが、少し時間が経つと、YAHOO-PHOTOからリンクした画像が、みんなこんな感じ…





になります（汗）。つまり…画像が消えます。


ですので、もう最近では、YAHOO-PHOTOからのリンクは行っておりません。

みんカラの方々のブログを徘徊して気づきましたが、どうやらYAHOO-PHOTOの画像のＵＲＬは変化するようですね（爆）。

フォトギャラリ－から持ってくるのが一番いいのかな…。
画像をＵＰする所、他にもあるんでしょうけど…。
当方のブログを見てYAHOO-PHOTOへアップロ－ドしていた方がいれば…、すいません～（汗）。

暑いですね～。週末のお天気が心配ですね～（汗）。


では、では。

情報の共有です（笑）。

興味ある方、少ないと思いますけど…（汗）。











　こんばんは～。す－太郎です。

　こんばんは～。す－太郎です。　


＝♪




　ありがとうございました～。

上の点滅している「ありがとうございました～。」は、

↓
< MARQUEE SCROLLDELAY="300" SCROLLAMOUNT="200" WIDTH="200">　ありがとうございました～。 < /MARQUEE>


↓印のところは、やはり　< と Ｍ　の間は、わざと半角開けてあります。
最後のところのかっこの、<　と　/　も半角開けてあります。
使う時は、くっつけてください。


SCROLLDELAY　は速さを調節して、SCROLLAMOUNT　と　WIDTH　のあとの数字は一致させておくそうです。「ありがとうございました～。」の幅に合わせて数字を決定。うまく設定しないと…、文字が流れます（爆）。

例えば…、< MARQUEE SCROLLDELAY="300" SCROLLAMOUNT="50" WIDTH="300">　ありがとうございました～。 < /MARQUEE> 　とすると…、

　ありがとうございました～。
のようになります。



最初は、点滅文字を表す< blink>で一所懸命やっていたんですけど、explorer　では、無効のようでした（汗）。

< MARQUEE>　はスクロ－ルのようですけど…、数字をうまく合わせることで、点滅しているように、設定できます。

いいのかな、こんな感じで…。いろいろと数字を変えて、こつをつかむしかないかな～。す－太郎もブログでは１回しか使っていません。お詳しい方…お手柔らかに…（汗）。




ちなみに、
一番上のは、
< MARQUEE SCROLLDELAY="300" SCROLLAMOUNT="30" WIDTH="300">　こんばんは～。す－太郎です。　< /MARQUEE>

で、二番目が、

< MARQUEE SCROLLDELAY="300" SCROLLAMOUNT="30" WIDTH="500">　< span style="font-size:30px;line-height:130%;">こんばんは～。す－太郎です。　< /MARQUEE>

三番目が、
< MARQUEE SCROLLDELAY=200" SCROLLAMOUNT="30" WIDTH="500">< img src="http://carview-img ～.jpg"> ＝♪ < /MARQUEE>


となっています。

さて、今から持ち帰りの残務…（汗）。

では。

ブログの背景を固定化する方法です。








スクロ－ルすると、文字やヘッダ－と一緒に背景も動きますよね…。

す－太郎は、後ろのイラストは動かさずに固定したかったので…

調べました。



背景の所のプログラム
　↓

color: #cccccc;
padding-right: 2px;
padding-left: 2px;
background-image:url('http://carview-img　～　.jpg');
padding-bottom: 2px;
margin: 0px;
padding-top: 8px;
text-align: center;
background-attachment: fixed;


つまり、一番下の行へ

　　　　 background-attachment: fixed;

を追加すると、背景が固定化されます。ちなみに、


fixed　→　scroll　と変更すると、スクロ－ルする…ようです。そうなると、書き込まなかった場合とどう異なるのかは、わかりません。当方は試しておりません。あしからず。

まあ、fixed　で固定化されていることは確かですね…。

あと、上のプログラムは、す－太郎のやつのコピ－です。



toshi867さん、こんな感じです。
　
カ－ボン柄だと、どうなんでしょ…。スクロ－ル中は、文字が見えにくくなるかな…。まあ、試してみてくださいな～。

では。

アイコン…。






実は、自分でも作っています。

扉の写真は、途中の画像です…（汗）。
→ 　…この大きさなら使える（汗）。

写真をイラスト化して、小さくした…だけ（大汗）。実際にブログに入れてみると、まあ、それなりに…（笑）。ボディの色合いをシンプルにして、８６だと判別しやすくしないといけませんねぇ…。



さて、ＵＲＬ…。

①　 　②　 　③　 ④　　⑤後期ＳＲ

　⑤は、いろいろな８６あります。ブラリミ、Ｄ１植尾さん、イニＤ…
　　背景が白くなります…？。


リンクしました。

① ＰＭ-WORKS 車の素材やさん

②④　KOUZOUのロ－ドスタ－＆Web素材さん 　

③ アルファロメオ１５５さん 　

⑤ FMYS's Hobby Pageさん 　　

その他で、　 ハザ－ド光るタイプ




もう、体力限界。眠い。今日はここまで…です。

では～。