<   2010年 11月 ( 5 )   > この月の画像一覧

小石川後楽園  彩もみじ

こないだの土曜日、淡い期待を抱いて 小石川後楽園に もみじ撮影にでかけました。
しかし~ 紅葉度合い。。15%くらいで がっくり~、  でもめげずにその15%からなんとか ^^♪

1.                 2.                 3.                4.                5.
c0095342_21105049.jpgc0095342_21101764.jpgc0095342_21111740.jpgc0095342_2111305.jpgc0095342_2111465.jpg








 前回 お約束した「サムネイル&ポップアップ」 公開しますね。 ^^♪


◆写真画像のサムネイル表示と、クリック時の原寸表示
 htmlのtableタグでセンタリング整列や、onmouseタグでサムネイル画像のモノクロ/カラー切替とポップアップ等々
 いろいろと凝ったのですが記事の投稿時にプレビューまではいけど送信したら見事にhtmlが破壊される始末 ^^;
 一番簡単な方法である程度できることがわかり先日からやってます。^^♪
 秘密にするようなたいしたことではないので~(笑  公開しますのでぜひチャレンジしてみてくださいね。

**********************************************************************

【手順】
 
◆まず最初に、クリック時の原寸表示 
==============================
 これはエキサイトの
右クリック禁止ブログパーツを組み込んでください。一度組み込んでおけば以降は作業は要りません。
 ブログの設定(config)画面、メニュー管理で「ブログパーツ」を表示するに設定し、ブログパーツ管理画面の対応ブログパーツ一覧から
 『右クリック禁止ブログパーツ』を選択するとブログへの貼り方が詳しく説明されていますので。ソースを貼るだけですので簡単です。


 
◆次に、写真画像のサムネイル表示 です。
==============================
 やることを簡単に言うと記事にアップした写真画像に対して画面表示するサイズを縦と横で小さく指定する、
 これだけなのです。では手順を ^^。

 
(1).いつものように写真をアップする。
   ・5枚でも10枚でも、いものようにアップしてください。段分けする写真の場所では改行もしてください。
   ・画像の位置はセンタリング指定だと画像と画像がだんだん下がってしまうので左詰がよいです。


 
(2).画像のサイズを修正する。
   ・アップした直後は写真の原寸が #IMAGE分の後方に定義されています。たとえば・・・740|540 とか。
    これを小さいサイズに修正します。私はいつも 160|107 です。
    このサイズですがスキンの記事のエリアのサイズに何枚配置するかで計算して好みのサイズにしましょう。
    私の場合記事のエリアは800で、横に5枚は置きたいので 横フォトは 160|107 縦フォトは107|160にしています。


 
(3).画像と画像が水平に整列するように修正する。
   ・#IMAGE文と#IMAGE文は画面上改行されていますので改行を取っ払ってください。と言っても改行は見えませんので
    #IMAGE文の最後の]の後ろにカーソルを持ってきてDeleteを一度押すと一瞬詰まった感じがします。それでokです。

  *改行をうまく削除しないとサムネイルの画像は縦に並んでしまいます
   画面上ではうまく削除できているか確認しづらい場合
   #IMAGGE文全てをコピペでテキストエディターに持っていき確認してください。全ての#IMAGGE文が改行無しで、ずら~と1行に
   なっていればOK、1行になってなく改行されてたら改行が残ってますので削除してコピペで記事の画面に戻してください。



 
(4).段分けした場合改行の途中に 以下の定義を入れてください。
   この定義がないと 段分けしても ずれたままとなってます。
   
〈br clear=all> ←左端の < は小文字に置き換えてください。


 
(5).好みによってサムネイル画像の上に番号を書く。
   ・1.    2.とか適当に書いてプレビューをして画像の位置と合わせてください。番号の間のスペースは漢字の空白がよいです。


 例. こんな感じです ^^♪ *今回のもみじは5枚全部縦フォトなのでサイズは少し大きめの 130194にしました。

1.                 2.                 3.                4.                5.
[#IMAGE|c0095342_21105049.jpg|201011/22/42/|left|130|194#]
[#IMAGE|c0095342_21101764.jpg|201011/22/42/|left|130|194#]
[#IMAGE|c0095342_21111740.jpg|201011/22/42/|left|130|194#]
 :

〈br clear=all>



 以上で完成です。
 これなら10枚とか沢山の写真も小粋に飾れて見る側にも優しくて ^^♪
 
ぜひ皆さんチャレンジしていただいて素敵な写真を沢山見せて下さいね ^^♪


[PR]
by hide_t510 | 2010-11-24 21:00 | Nature | Trackback(20)

街は秋色に。。  - 代々木公園 -

                                       Top
c0095342_21274034.jpg

*クリックして表示した原寸画像は「クローズ ×」をクリックしなくても どこでもクリックすれば消えます。
 例えば次に見たい画像のサムネイルを2度クリックすれば ^^


1.                    2.                3.               4.                    5.
c0095342_21443212.jpgc0095342_2145719.jpgc0095342_21451917.jpgc0095342_21453786.jpgc0095342_21454688.jpg




6.                7.                    8.                    9.
c0095342_21455798.jpgc0095342_21461649.jpgc0095342_21462517.jpgc0095342_21463932.jpg

*代々木公園の銀杏 とても背が高くて丁度見ごろでした。
今日は小石川後楽園に出かけたのですが もみじ まだまだでした 残念
明日は神宮外苑前の銀杏並木に出かけてみようかなぁ  
[PR]
by hide_t510 | 2010-11-21 00:00 | Nature | Trackback(15)

街は秋色に。。  - 表参道 -

久しぶりに表参道でシャッターを切ると なんだか新しい顔が見えた



1.                    2.                3.                   4.
c0095342_2262981.jpgc0095342_2264984.jpgc0095342_2275100.jpgc0095342_2271842.jpg







5.                    6.                7.               8.
c0095342_2273310.jpgc0095342_2274570.jpgc0095342_2275758.jpgc0095342_8483964.jpg










*サムネイル画像を並べて、見たい画像をクリックすれば大きい原寸で表示する  試行錯誤でなんとかカッコついたみたい ^^
サムネイルを表組み(table)でセンタリングして整列させたかったのだがプレビューではうまくいくものの送信した後はhtmlが壊れる
html tableタグ...はどうもうまくないみたい。。。^^;

[PR]
by hide_t510 | 2010-11-13 08:40 | city | Trackback(2)

秋 桜   


c0095342_21244821.jpg


More
[PR]
by hide_t510 | 2010-11-06 21:28 | Flower | Trackback(2)

街は秋色  - Autumn Color 2010 -


c0095342_205144.jpg



この秋一番の 秋晴れな好天に 街の  公園の樹木たちは あっというまに 秋色に ^^







c0095342_2052148.jpg







c0095342_2053056.jpg







c0095342_2054185.jpg



どれも アメリカンポップな Autumn Color
やっぱり 和風な秋色に早く出会いたいですね ^^♪
[PR]
by hide_t510 | 2010-11-04 20:05 | Nature | Trackback(4)