じろゃん（*＾､＾）ﾉのブログ一覧

予想外に多くの受講生がいてビックリ！

昨夜は優秀な受講生たちが一生懸命復習していた
ので、先生は安心して早い時間から爆睡（笑
お蔭様で今朝はスッキリと目が覚めました。（＾＾）

複数の画像をアップしてみたいという要望は
結構あったんですね。
書いた甲斐がありましたよ。


僕が把握している範囲では、こんな作品がアップされてます。

	verdy君	昨日の応用編！
	すーちゃん	勉強中
	m3kame	話題を変えて・・
	ＪＩＧＥＮ	famillie2005・・・やっぱ、これで最終章で！勘弁(^_^;)
	330武	練習
	みぃや	「風に吹かれて○○○ジョニー」なるものを食しました。
	ＮＯＡ	テスト２
	n_masac	テストテスト　じろやん先生どうですか？？
	ペー	ひでさんと美浜サーキットで走ってきました。

最後の ぺーちゃんのは、僕のオフレポかと思った。（＾＾；

---

今後の予定は、まさに僕がオフレポで使っている手法の「テーブル」と、
基本に戻って「文字修飾」について書いてみますね。（＾＾）

優秀な受講生のverdy君や330武くんは
既に復習を終えてますね。
えらい、えらい。(*´∇｀*)
こういう優等生ばかりなら先生は楽チンです。

他の方、着いてきてますかぁ？
AUTOくんとタロくんは落ちこぼれちゃいました。
お二人とも既にトップランカーですから、これ以上
技術を磨かなくても大丈夫。（・∀・）

---

さてさて。

ここまでの技を使うと、１つのブログに複数の画像を貼り付けることは出来ますよね。
ただ画像は画像の行、文章は文章の行に分かれてしまいます。

┌──┐
│画像│
└──┘
文章文章文章文章
┌──┐
│画像│
└──┘
文章文章文章文章


なので、僕がオフレポの時に使ってる
こんな感じとはちょっとイメージが違いますよね。

┌──┐
│画像│文章文章文章文章
└──┘
┌──┐
│画像│文章文章文章文章
└──┘


ま、こんなことをしなくても複数の画像が貼れるようになっただけで充分楽しいブログに
なったことと思いますが、せっかくなんで画像の横に文字を書く方法も披露しちゃいましょう。

---

え～、実は僕が使っている方法とは違うのですが、最も簡単に実現できる方法としてご紹介しておきますね。

これは「回り込み」という手法を使います。
新聞や雑誌のレイアウトをご存知の方であれば当たり前の手法なのですが、貼り付けた画像の周りに文字を回り込ませるという手段になります。


では、どうするか。
実は非常に簡単♪

【みんヘル】画像を貼り付ける －その３－ のところで、imgタグに width で
画像の幅を指定する方法をご紹介しました。

今度は、その width の後に align という記号(属性)を追加します。
align は「アライン」と読みましょう。決して「蟻軍」じゃないですよ＞タロくん！
車高調とかを入れるとアライメントを取りますよね、あれです。
「整列する」とか「整える」みたいな意味でしょうか。

---

具体的にやってみましょう。
せっかくなので優等生のverdy君を拝借しましょうか。

<img src="https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/208272/p1.jpg" border="0" width= 150>

上の文字列をブログに挿入すると、下のような画像が貼りつきます。



この文字列の最後に align=left という文字を追加します。
（ホントは最後じゃなくてもよいけど）

<img src="https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/208272/p1.jpg" border="0" width= 150 align=left>

さてこれをブログに挿入すると・・・

こんな風に文字が画像の右側に回りこんで表示されるようになります。
ま、文字が右側に回りこんだというよりも、画像を左に寄せたという方が正確なのかも知れませんね。

---

どうです？ 簡単でしょ？

ただし注意点はあります。
今回使ったのは、あくまで「回り込み」という技法ですので、文字以外も全て
回り込んで表示されます。

ということは、複数の画像を表示させようとして、
こんな風にレイアウトが崩れてしまうということがあります。
ま、それはそれで楽しいですけどね。




とりあえず簡単に回避するには・・・
そうですね、文章の後ろに適当に空行（改行だけの行）を入れておきましょう。

ちょっと面倒臭い面もありますが、おそらくコレが最も簡便な方法ではないかと思います。

---

では次は、僕が使っている方法についてご紹介しましょうか。
かなり面倒臭い方法ですので、脱落者頻発と思われますが(ﾟ∀ﾟ；

起立、礼！

ブログに画像を貼り付ける基本的な操作は
分かりました？

もうちょっと先があるのですが、受講生の
verdy君が Coffee Break中なので、先生も
ひと休みです

ついでに、ご存知かも知れない小技というか
ネタみたいなものをいくつか・・・

---

今回の画像貼り付けではなく、普通にアップされた画像をクリックすると、
大きな画像が別のウィンドウに表示されますよね。
（例えば上↑の琵琶湖の写真とか）

あれ、閉じる時ってどーしてます？

　　Ａ型 ： 真面目に「閉じる」の文字をクリック。
　　Ｂ型 ： 右上の ×ボタン で閉じる。
　　Ｏ型 ： 開けっ放しで閉じない。気付くとウィンドウが一杯に。
　　AB型 ： [PR]を読んでる内に何をしてたか忘れる。

僕は・・・
「開いた画像自体をクリック」です。

ご存じなかった方、お試しアレ♪

---

　「最近やたらとサーバーが重いなぁ。
　　急激に会員が増えてるんだな、きっと。
　　・・・ん？ 一体何人いるんだろ、会員って」

じゃあ、調べてみましょう。

一番左上に みんカラのアイコンがいくつか並んでますよね。
その中の「ブログ」をクリックして下さい。
そうすると最新のブログ一覧が表示されますよね。

ここで「お知らせ」と書かれた所の右側をマウスでドラッグしていくと・・・
あ～ら、不思議。

ふぅ、疲れた。
何か途中からキャラ変わってるし。（＾＾；

さて、再開。

---

えっと、何だっけ？
「画像をクリックしたら大っきくなる」だね。

その前に「リンク」ボタンは使えてる？
リンクっていうのは、よくあるこーゆーヤツ。

　　Yahoo!

通常はこんな感じで、下線付きの文字をクリックしたら該当するものが表示されるんですよ。

これはどうするかっていうと、まずリンクとして表示させる文字列
（上の例では Yahoo!）を選択状態にしてから「リンク」ボタンを
押します。

←これが選択状態

選択状態にするにはマウスでドラッグするか、Shiftキーを押しながら
カーソルキー（←、→）を使ってもいい。

で、「リンク」ボタンを押すとウィンドウが開くので、そこにリンク先の
アドレスを入力すればＯＫ。



そうすると、こんなややこしい文字列が挿入されます。

<pre><a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a></pre>

画面上に表示させる文字が「Yahoo!」で、そのリンク先のURL（アドレス）が
「http://www.yahoo.co.jp」です。

---

これを「画像をクリックしたら大っきくする」に応用すればいいだけですね。

画面上に表示させる画像が「○○」で、そのリンク先の画像URL（アドレス）が「△△」です。

と読み替えればいいわけです。


試しに、以下の文字列を自分のブログの中にコピーしてみて下さい。

<a href="http://carlife.carview.co.jp/images/sticker10.jpg" target="_blank"><img src="http://carlife.carview.co.jp/images/sticker10.jpg" border="0" width=50></a>

これで下のような小さな画像が表示され、クリックすると元の大きさの
画像が表示されればＯＫです。

---

さて、ここまでをクリアしてる方なら、あとは何も難しい事はないでしょう。
前回挿入した画像の文字列を使ってみますよ。

<pre><img src="https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/207357/p1.jpg" border="0" width=100></pre>

大きくなる効果をハッキリさせるために、width は 100 に替えてあります。


この<img src= から width=100> までが１枚の画像を表してるわけですから、
この全体を選択状態にして「リンク」ボタンを押し、元の画像のURLを入力さえ
すればＯＫです。

つまり、

表示させる画像(○○) ＝
<pre><img src="https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/207357/p1.jpg" border="0" width=100></pre>

元の画像のURL(△△) ＝
https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/207357/P1.jpg

ですよ。


ちゃんと成功すると、こんなわけの分からないことに！ (ﾟ∀ﾟ；

<pre><a href="</pre>https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/207357/P1.jpg<pre>" target="_blank"><img src="</pre>https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/207357/P1.jpg<pre>" border="0" width=100></a></pre>


でも、これがちゃんとできると、下の画像のようにクリックすると
元の大きな画像が表示されるようになります。

---

何か文字で書くとややこしいけど、実際は簡単よ♪

よ～し、みんな席につけ～！

こら、べるべる君！ ちゃんと授業についてきてるか？
330武くんもだっ！

---

さて、前回の方法で画像がブログの好きな所に貼れました。
けど、ちょっと困った事が起きてませんか？

そうです。
貼り付けた画像が大き過ぎて、本来右端(左端の人もいる)に表示されるはずの
カレンダーやプロフィールなどのメニューが下の方に吹っ飛んでいってしまって
ますよね。

これは困ったちゃんです。
最近マンスリーランキングでTop２に躍進された方も、10/14あたりで
そうなってるみたいですね。（＾＾；

---

じゃあ画像の大きさを小さくする？
いやいや、そんな必要はごじゃりませぬ。
せっかく見易いようにと640×480にしたんだからね。

元の画像の大きさは変えずに、ブログに貼り付いた時の大きさだけを
小さくしちゃいましょう。


先ほどの画像URLを使って「画像」ボタンから貼り付けを行うと、
こんな感じの文字列が挿入されたはずです。

<pre><img src="https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/207357/p1.jpg" border="0"></pre>

ここで最後の border="0"> のところに、画像の幅を指定する width=～
というものを挿入します。
width、発音は「ワイズ」ですよ。「ウィドゥス」なんて発音しないように。

具体的には、こんな感じ。

<pre><img src="https://cdn.snsimg.carview.co.jp/carlife/images/bbsmsg/207357/p1.jpg" border="0" width=300></pre>

"0"とwidthの間には半角のスペースを入れてね。
ここでは 300 としていますが、これは適当に変更して構いません。
大抵の方のブログでは、幅は500～600程度ではないかと思いますので、
それ以下の数値で適当に調整して下さい。

はい、これだけ。

---

ん？
まだ鐘が鳴ってないけど、早めに終わろう。
次は「画像をクリックしたら大っきくなる」だ。

起立、礼！