Picasaウェブアルバムの画像をBloggerやLive Writer等に挿入する方法

ホームページやブログの容量が少なくなって来たら、Picasaウェブアルバムを利用すると延命できます。
手順：
（１）Picasa３でアップする画像を選択したら、右クリックし「ウェブアルバムにアップロード」を選択

※複数枚の画像をPicasaウェブにアップするにはトレイから「アップロード」をクリック

（２）アップロード先のアルバム名やアップロードするサイズを決めて「アップロード」をクリック

※自由なサイズ（800Ｘ600等）にしたい時は一度エクスポートしてからPicasaウェブにアップロードする。

（３）「オンライン表示」をクリック

※一度、「完了」させてから、ウェブアルバムにログインしてもいい。

（４）Picasaウェブにログインし、画像が表示されたら、画像の上で右クリックし「プロパティ」を選択

（５）アドレスを選択し、「コピー」を選択

もし、ブラウザがFirefoxならば「画像のURLをコピー」を選択

（６）画像の挿入
・Windows Live Writerに挿入
「挿入／画像／Webから画像を挿入」を選択し、「画像のURL」に貼り付けて「挿入」をクリック

挿入された画像

・Bloggerに挿入
「画像を挿入」をクリック、ウェブアドレス（URL）にチェックを入れ、「画像のURL」に貼り付けて「ＯＫ］をクリック
但し、下の画像は「新しいエディタ」のとき

Blogger作成画面に挿入されたとき

・alphaEDITに挿入
「挿入／画像」で

・KompoZerに挿入
「挿入／画像」で

・xfy Blog Editorに挿入
「画像／挿入」より

※関連ページ
・「甘酒の作りかた」

Bloggerの新機能「もっと読む」

通常はWindows Live Writrerを使用しているので、気が付かなかったが、たまたまBloggerの設定を見ていたら、こんなのがあった。

○新しくなったエディタ とは？
ともかくこれにして「設定を保存」
新しくなったツールバーの右端は「改行を挿入」とある。
 
何のことかな？と調べて行くと、これが「続きを読む」の切り替え位置を指定するためのボタンである事が分かった。 
「作成」モードで挿入してみると点線で切り替え位置が表示される。
追記：「追記の区切りを挿入」に変更になっています。（2010/5/6）

  

「HTML の編集」モードだと、この部分が<!— more -->となっている。

これを投稿してみると

「もっと読む」をクリックすると展開されて次のようになった。
 
もし、「もっと読む」リンクが表示されない場合はヘルプによると、「レイアウト ＞ HTML の編集」で「ウィジェットのテンプレートを展開」にチェックを入れ、
<data:post.body/>
のすぐ後に
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
というコードを挿入すれば良いと言うことである。
なお、「もっと読む »」の文字列は「レイアウト ＞ ページ要素」の「ブログの投稿」の「編集」から変更可能。

「北大の紅葉」ムービー

下のムービーはWindowsフォトストーリー３で作成し、Bloggerの「ビデオを追加」で挿入したものです。
再生させるには、ムービー左下の「再生」ボタンを押してください。


大まかな作成手順は次のようになります。
（１）フォトストーリーを起動したら「画像のインポート」よりムービーに使う画像を選択します。
 
（２）ここでは１枚目に対してエフェクト「ウォッシュアウト」を適用、２枚目以降は「無し」にしました。

※Windows Vistaに入っているフォトストーリー３は下図
 
（３）「次へ」でタイトルの文字を入れます。
 
（４）「次へ」で「アニメーションの開始位置と終了位置」、「画像を表示する秒数」を指定します。

※Vistaに入っているフォトストーリー３は「アニメーションのカスタマナイズ」をクリック
 
（５）「切り替え効果」を指定します。
 
（６）２枚目以降の画像についても同様に指定します。ここでは「画像を表示する秒数」だけを指定しました。
 
（７）「次へ」をクリックし、BGMを追加します。
ここでは「音楽の作成」より、次のように作りました。
 
（８）「次へ」をクリックし、保存設定をします。
ファイル名
 
品質の設定
 
（９）「次へ」をクリックしムービーを作成します。
 
（１０）「Blogger」の「ビデオを追加」よりこのムービーを挿入します。

Bloggerテンプレートでページ幅を変更するには パート3

今回のテンプレートは作成者：Todd Domineyのもので、やって見ます。
オリジンルのページ幅は700pixですが、これを800pixにする場合は次のようにやります。
●widthの数値
#outer-wrapper {
    background-color:#473624;
    border-$startSide:1px solid #332A24;
    border-$endSide:1px solid #332A24;
    width:800px;
    margin:0px auto;
    padding:8px;
    text-align:center;
    font: $bodyFont;
}

#main-top {
    width:800px;
    height:49px;
    background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top $startSide;
    margin:0px;
    padding:0px;
    display:block;
}

#main-bot {
    width:800px;
    height:81px;
    background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top $startSide;
    margin:0;
        padding:0;
    display:block;
}

#wrap2 {
    width:800px;
    background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;
    margin-top: -14px;
    margin-$endSide: 0px;
    margin-bottom: 0px;
    margin-$startSide: 0px;
    text-align:$startSide;
    display:block;
}

#main {   
    width:530px;
    float:$endSide;
    padding:8px 0;
    margin:0;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

●backgroundの画像
赤字の画像は横幅が700pixになっているので800pixに変更しますが、その方法はBloggerテンプレートでページ幅を変更するにはを参考にしてください。
#main-top {
    width:700px;
    height:49px;
    background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top $startSide;
    margin:0px;
        padding:0px;
    display:block;
}

#main-bot {
    width:700px;
    height:81px;
    background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top $startSide;
    margin:0;
        padding:0;
    display:block;
}

#wrap2 {
    width:700px;
    background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;
    margin-top: -14px;
    margin-$endSide: 0px;
    margin-bottom: 0px;
    margin-$startSide: 0px;
    text-align:$startSide;
    display:block;
}

#footer {
    clear:both;
    background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top $startSide;
    padding-top:10px;
    _padding-top:6px; /* IE Windows target */
}

#header {
  background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat bottom $startSide;
}

●参考
・ページ幅800pixのレイアウトサンプル
・ページ左右のマージン
#wrap3 {
    padding:0 50px;
}
・bg_paper_top.jpgをbg_paper_top800px.jpgに変更し、Google Siteにアップロードした時のurl（ファイル名に800pxを入れたのは同時に900pixを作成したので、その区別のため）
#main-top { 
width:800px; 
  height:49px; 
  background:#FFF3DB url("http://sites.google.com/site/aurunetto/Home/bg_paper_top800px.jpg") no-repeat top $startSide; 
  margin:0px; 
  padding:0px; 
  display:block;
}

Bloggerでスライドショー

Bloggerの中にスライドショーを挿入するにはPicasaウェブを利用するのが簡単です。Picasa2の時代にはPicasaウェブの言語設定をEnglishにしなければなりませんでしたが、Picasa3より日本語でもそれが可能になりました。
この記事はPicasa2時代のものにPicasa3を追加する形で書きました。

（１）Picasa2でスライドショーに使う画像をトレイに入れる

Picasa3は下図

（２）「ウェブアルバム」をクリック

Picasa3は「アップロード」

（３）「アルバムタイトル」などを設定

Picasa3は下図

（４）「ＯＫ」をクリック（Picasa3はアップロード）

（５）「オンライン表示」をクリック

Picasa3は下図

（６）アップロード済みの画像一覧
 
（７）「このアルバムにリンク／Embed Slideshow」をクリック
  
（８）設定画面がポップアップして来るので表示サイズ（144px、288px、400px、600px、800px）と、説明の表示／非表示の選択とコードのコピー

（９）「完了」ボタンを押して、設定画面を閉じる
（１０）Live Writerで「表示／HTMLコード」にし、貼り付ける （Bloogerで作業する時も同様）

上記の方法で作成したスライドショー （札幌市南区藤野の「エルクの森」）

※2008/9/4撮影、Canon Power Shot A700
※背景色の変更
スライドショーの背景色は、コード中のRGB=0x000000の部分で変更できます。
※スライドショーのメニュー：左から順に「ギャラリーへのリンク」、「キャプションの表示・非表示」、「戻る」・「再生／停止」・「進む」、「アルバム情報」

●エルクの森 （航空写真中心点はカフェ＆レストラン「ヴィーニュ」）

詳しい地図で見る

Bloggerの投稿画面サイズを大きくする方法

Bloggerの投稿作成画面は700 X 250と小さいので、使いにくいです。これを広げてくれるのが、「Blogger Extended Editing」。
この「Blogger Extended Editing」はアドオンの「Stylish」を入れてから行なうと簡単に済みます。
但し、これはFirefoxの拡張機能なのでIEには適用されません。
（１）Firefoxの起動後、「ツール／アドオン」で「stylish」を入れて検索、「Stylish」が表示されたら「Firefoxに追加」をクリック

（２）「今すぐインストール」をクリック

（３）「Firefoxを再起動」をクリック

（４）「閉じる」をクリック

（５）「Blogger Extended Editing」にアクセスし、「Load Into Stylish」をクリック

（６）「保存」をクリック
 
（７）Blogger投稿画面の旧と新
旧サイズ：700X250、新サイズ：920X445