★　ZERO　★のブログ一覧

　
サンプルで　「ブログに複数の画像を貼り込む方法　その１」　の編集本文を・・・

********************************************************************************************************
普通は、一枚しか貼り込めない画像をブログ本文にいっぱい貼ってみましょう。
それもみんカラアップ画像と同じスタイルで・・・、つまりクリックすると別ウィンドウに画像が表示され、しかもその画像をクリックするとウィンドウが閉じるようにです。
ただし、手動でHTMLタグを編集するので・・・・ヘタするとブログ全体のレイアウトが崩れたりする危険性があります。
そのへんを十分ご理解いただける方だけ・・・試してみてください。

方法は色々とあります、まず貼り込みたい画像をどこに置くかなんですよね。
みんカラに置くなら、それ用のフォトギャラリーか掲示板になるんだけど・・・ね。
そうするとブログ以外からも画像が見えちゃうし、更新のシルシがついたりするので・・・・。
スマートにやるなら「下書きブログ」に置いちゃうとグーなんですよ。

下書きなので、自分にしか見えません・・・だけど、貼り込みたい画像の数だけ見えないブログが増えていきます。



まず、画像を投稿します。
<div align="center"><a href="https://minkara.carview.co.jp/image.aspx?src=http%3a%2f%2fimg01.carview.co.jp%2fminkara%2fblog%2f000%2f014%2f642%2f989%2f14642989%2fP1.jpg" target="_blank"><img src="https://cdn.snsimg.carview.co.jp/minkara/blog/000/014/642/989/14642989/p1.jpg" alt="" width="480" border="1"></a></div>
このように、タイトルと本文には何か書いて「下書きとして保存」有効チェックボックスオンで画像を　<span style='font-size:30px;line-height:130%;'><b>必ず投稿</b></span>　します。
確認画面でも投稿画像が見えますが一時的で消えちゃいますからね。


次に投稿した画像を別ウィンドウに表示させます。
<div align="center"><a href="https://minkara.carview.co.jp/image.aspx?src=http%3a%2f%2fimg01.carview.co.jp%2fminkara%2fblog%2f000%2f014%2f643%2f246%2f14643246%2fP1.jpg" target="_blank"><img src="https://cdn.snsimg.carview.co.jp/minkara/blog/000/014/643/246/14643246/p1.jpg" alt="" width="480" border="1"></a></div>
そして・・・
これから手動の作業になっていきます。

使うのはこの画像が表示されたウィンドウのURLと画像そのもののURLです。

　１．画像ウィンドウURL
　２．画像本体URL

この二つのURLを手動で編集してブログに貼り込んでいきます。
編集するのはメモ帳でもワープロでも良いですが、ツウはエディタというモノをつかうんですよ。
とりあえず　「ブログ編集メモ」　ってタイトルで文書作ってください。

まず、画像ウィンドウのURLは表示されてますから、URLをコピーペースト。
画像本体URLは画像を右クリックして、
<div align="center"><a href="https://minkara.carview.co.jp/image.aspx?src=http%3a%2f%2fimg01.carview.co.jp%2fminkara%2fblog%2f000%2f014%2f643%2f663%2f14643663%2fP1.jpg" target="_blank"><img src="https://cdn.snsimg.carview.co.jp/minkara/blog/000/014/643/663/14643663/p1.jpg" alt="" width="480" border="1"></a></div>
「イメージのアドレスをコピー」をクリックして「ブログ編集メモ」にペースト。
これはマックOSXサファリの画面ですがウィンドウズでも同じように表示されます。

ここまできたら、こんどはHTMLタグの手動編集になります。
二つのURLをコピーペーストした「ブログ編集メモ」での作業です。


　　　　　<a href='https://minkara.carview.co.jp/userid/335607/blog/14644277/' target='_blank'>続きます。</a>

********************************************************************************************************
　↑
こんな風になります。
これを「ブログ編集メモ」で書いてブログ編集画面にコピーペーストしています。












　

　
画像を指定幅（ピクセル）で中央に表示させて、その画像をクリックすると指定したサイト（URL）を新規（別）ウィンドウで開くと言うHTMLタグがあります。
　↓
<div align="center"><a href="●●●" target="_blank"><img src="■■■" alt="" width="▲▲▲" border="0"></a></div>

これは「センタリング」された画像■■■をクリックすると新規ウィンドウで●●●（URL）を開きますと言うタグです。
▲▲▲は表示させる画像の横幅を「480」とかの数字（ピクセル数）で指定します。

分かりやすく書くと
<div align="center"><a href="　１．画像ウィンドウURL　" target="_blank"><img src="　２．画像本体URL　" alt="" width="▲▲▲" border="0"></a></div>

となります。
「１．画像ウィンドウURL」　と　「２．画像本体URL」　を間違わないでください。
ボクは画像の指定幅▲▲▲を480ピクセルにしています。
これが空欄だと実画像サイズとなります、普通は大きい画像を投稿しますから自分のブログ本文の横幅で調整しください。

あとはこのHTMLタグをブログ本文にコピーペーストするだけです。
例えばサンプルだとこうなります、
　↓
<div align="center"><a href="https://minkara.carview.co.jp/image.aspx?src=http%3a%2f%2fimg01.carview.co.jp%2fminkara%2fblog%2f000%2f014%2f643%2f663%2f14643663%2fP1.jpg" target="_blank"><img src="https://cdn.snsimg.carview.co.jp/minkara/blog/000/014/643/663/14643663/p1.jpg" alt="" width="480" border="1"></a></div>



HTMLタグってのは書式が決まっています、少しでも欠けたり、改行が入っただけでも場合によってはブログ全体のレイアウトが崩れますので　「初心者」　の方にはあまりすすめられません。

このタグですが、みんカラの「リッチ編集」と相性が悪いです。
最後の</div>と言うタグが消えてしまい、ボクのブログではレイアウトが崩れました。
「リッチ編集」からだけでやった方が無難かも知れません。
その時は
１．画像ウィンドウURL　→　リンクURL
２．画像本体URL　→　画像URL
となります。


この方法で何枚でもブログ本文内にみんカラスタイルで画像を貼り込めます。
みんカラサイドもこのやり方（下書きブログを使う）に問題はないとのことです、画像ウィンドウには広告が表示されますから、大いに推奨したいところでしょう。

ボクはみんカラ投稿画像サイズ制限から、自分のサーバーに画像を置いてます。
HP作成ソフトで「画像をクリックしたらウィンドウを閉じる」というJAVAスクリプトを使ったテンプレートを作り、それにコピーペーストです。

　
普通は、一枚しか貼り込めない画像をブログ本文にいっぱい貼ってみましょう。
それもみんカラアップ画像と同じスタイルで・・・、つまりクリックすると別ウィンドウに画像が表示され、しかもその画像をクリックするとウィンドウが閉じるようにです。
ただし、手動でHTMLタグを編集するので・・・・ヘタするとブログ全体のレイアウトが崩れたりする危険性があります。
そのへんを十分ご理解いただける方だけ・・・試してみてください。

方法は色々とあります、まず貼り込みたい画像をどこに置くかなんですよね。
みんカラに置くなら、それ用のフォトギャラリーか掲示板になるんだけど・・・ね。
そうするとブログ以外からも画像が見えちゃうし、更新のシルシがついたりするので・・・・。
スマートにやるなら「下書きブログ」に置いちゃうとグーなんですよ。

下書きなので、自分にしか見えません・・・だけど、貼り込みたい画像の数だけ見えないブログが増えていきます。



まず、画像を投稿します。

このように、タイトルと本文には何か書いて「下書きとして保存」有効チェックボックスオンで画像を　必ず投稿　します。
確認画面でも投稿画像が見えますが一時的で消えちゃいますからね。


次に投稿した画像を別ウィンドウに表示させます。

そして・・・
これから手動の作業になっていきます。

使うのはこの画像が表示されたウィンドウのURLと画像そのもののURLです。

　１．画像ウィンドウURL
　２．画像本体URL

この二つのURLを手動で編集してブログに貼り込んでいきます。
編集するのはメモ帳でもワープロでも良いですが、ツウはエディタというモノをつかうんですよ。
とりあえず　「ブログ編集メモ」　ってタイトルで文書作ってください。

まず、画像ウィンドウのURLは表示されてますから、URLをコピーペースト。
画像本体URLは画像を右クリックして、

「イメージのアドレスをコピー」をクリックして「ブログ編集メモ」にペースト。
これはマックOSXサファリの画面ですがウィンドウズでも同じように表示されます。

ここまできたら、こんどはHTMLタグの手動編集になります。
二つのURLをコピーペーストした「ブログ編集メモ」での作業です。


　　　　　続きます。

　




















写真は100枚セレクト。
走行シーンはあまり多くないですが、この方が見てても飽きないかなと。

今回写真のセレクトとWEBアルバム作成には「iPHOTO」と「iWeb」をはじめて使った。
けっこう良い感じで連携してますね。
iPHOTOの最初のバージョンはかなり使いにくかったけど、今のはだいぶ良くなってます。
iWebはもう少し自由に出来ればいいんだけど、こんなもんかと割り切れば悪くないです。
写真は1024x683ピクセルにリサイズしてあります。
できればそのサイズで見せたかったけどムリでした。
リサイズするのはブラウザ側では無さそうですが・・・ちょっと確証がない。
ブラウザにリサイズさせると汚らしく表示される場合があるんで気になります。

ダウンロードされるのはオリジナルサイズなので、モバイルミーにあるはずだけど・・・。
なんか見つからないですね。
サーバーのファイルはヘンにいじらない方が良さそう。
ごちゃごちゃと色んなファイルがありました。
勝手にいじると取り返しがつかなくなる可能性大ですねー。
写真を一枚修正（ナンバー消し）して差し替えたけど、「iPHOTO」から「iWeb」にドラッグアンドドラッグで出来ました。
マニアックなやり方よりも初心者的に素直にやりましょう。

モバイルミーからWebアルバム公開するとアクセスカウンターが付けられません。
iWebだと簡単デス。

し、しかしもしかするとWebアルバムはレイヤー表示で構成してあるのかも？
色んなパーツを自由に配置できるのは良いけど、ブラウザによっては重なったり位置がずれたりするかもですね。
もしかすると古いブラウザだとまともに表示出来ないかも知れない。
オーソドックスにシンプルな方が良いんだけどな。
ソースを他のＨＰ作成ソフトで開いたりいじるのもヤバそう。

使った「iWeb」は有料版の08バージョンです。
09バージョンも有料で出てますが、とりあえず08で十分だす。


アルバムはこちらから。

　
朝ゴミ出しに行ったら、オマワリさんとバッタリ・・・・思わず逃げ出しそうになりました。
近くの駐車場で車上荒らしです。
駐車場の隅のクルマが狙われました、運転席のキーをドライバーかなんかでコジコジしたもよう。
被害は現金のみ、カーステとかは付いてないクルマ。
ちょいショボなビッツで仕事クルマとか、他にもっとリッパなクルマがあるんだけど路地から見えにくい一番奥の隅っこを狙ったみたいですね。

この辺でもたまぁ〜に車上荒らしがあるそうです。
連続してってことは無く、一度起きるとしばらくは無いとか。

先日、近くのゴミ出し場に放火もあったしなー、ちょい物騒なメガロポリスちばでした。(^^;ゞ