ezorisu-web

よくブログでサイドバーにFlickrのブログパーツを表示しているのを見かけますが、Picasaでも似たようなのがないかなと探してみたら、Picasa内に「スライドショーを埋め込む」ボタンを見つけました。

Picasa ウェブアルバムのスライドショーにしたいアルバムを開いて、横にある「このアルバムへのリンク」をクリックすると、「スライドショーを埋め込む」という項目が出るので、クリック。プレビューとともにスライドショー作成の画面が出ます。
何種類かのサイズを選べるんだけど、サイドバーで使えそうなサイズは、「小144ピクセル」と「中288ピクセル」くらい。
ところがこのサイズは、まわりの黒い部分も含めた大きさです。

「中288ピクセル」

「小144ピクセル」

最近のブログでは、サイドバーもだんだん幅広タイプが増えているような気もしますが、普通は180〜200ピクセルくらいが多いのではないでしょうか。
288ピクセルは大きすぎるし、144ピクセルだと写真部分が小さすぎて見にくい。
そこで、サイドバーに入れやすいように大きさを調整してみました。
できれば縁の黒いのもやめて、自分で好きな形にしたいし。

まずは、Picasaの「スライドショーを埋め込む」の貼り付け用コードをコピーして、自分のブログのサイドバー部分にペースト。どれでもいいんだけど今回は「中288ピクセル」を選んでいます。
中身を見ると、width=”288″ height=”192″というのがあるのでwidth=”160″ height=”120″に変更。
それからスライドショー部分を適当なidを付けて囲ってやります。
< div id="picasa-slideshow"> スライドショーのコード </div>
こんな感じで。

次は、cssで微調整。

#picasa_slideshow {
width:160px;
height:120px;
margin:15px auto;
border: 1px solid #333333;
}

marginで上下の間隔調整とセンター配置。
細いボーダーも追加してます。

「中288ピクセル」の写真部分のサイズは200×150、「小144ピクセル」は72×54 になっています。
いろいろためしてみた結果、写真だけの表示にしてサイドバーで使えそうなサイズは、

• 200×150
• 160×120
• 144×108
• 72×54

こんなところです。サイドバーの横幅に合わせて使い分けてください。
あとは、cssで見せ方を工夫してやればOK。

実際に設置してみたのは、こちら「えぞりすノート」