RSS2.0

楽々ブログ Google攻略   自 立ライフ PCあれこれ  飯 寿司

パソコンあれこれ
当サイトのコンテンツはBlogger,Live Writer,Picasa2で楽々ブログ作成法、Googleのサービス使いこなしガイド、自立生活への道、パソコン一般の技術情報、鮭の飯寿司の作り方ブログ編などです。
その他
●NHKテレビ「ためしてガッテン」で話題の「酒粕甘酒の作り方
●3D作成フリーソフ ト「Google Sketch Upの使い方
● 「北海道の回転寿司」 チェーン店をGoogleマップ付で紹介
これらは全てBloggerを使用して作成しております。


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

2009/12/15

ホームページやブログの容量が少なくなって来たら、Picasaウェブアルバムを利用すると延命できます。
手順:
(1)Picasa3でアップする画像を選択したら、右クリックし「ウェブアルバムにアップロード」を選択
image
※複数枚の画像をPicasaウェブにアップするにはトレイから「アップロード」をクリック
image

(2)アップロード先のアルバム名やアップロードするサイズを決めて「アップロード」をクリック
image
※自由なサイズ(800X600等)にしたい時は一度エクスポートしてからPicasaウェブにアップロードする。

(3)「オンライン表示」をクリック
image
※一度、「完了」させてから、ウェブアルバムにログインしてもいい。

(4)Picasaウェブにログインし、画像が表示されたら、画像の上で右クリックし「プロパティ」を選択
image
(5)アドレスを選択し、「コピー」を選択
image
もし、ブラウザがFirefoxならば「画像のURLをコピー」を選択
image

(6)画像の挿入
Windows Live Writerに挿入
「挿入/画像/Webから画像を挿入」を選択し、「画像のURL」に貼り付けて「挿入」をクリック
image
挿入された画像

Bloggerに挿入
「画像を挿入」をクリック、ウェブアドレス(URL)にチェックを入れ、「画像のURL」に貼り付けて「OK]をクリック
但し、下の画像は「新しいエディタ」のとき
image
Blogger作成画面に挿入されたとき

image
alphaEDITに挿入
「挿入/画像」で
image
KompoZerに挿入
「挿入/画像」で
image

xfy Blog Editorに挿入
「画像/挿入」より
image
※関連ページ
・「甘酒の作りかた

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

2009/11/12

通常はWindows Live Writrerを使用しているので、気が付かなかったが、たまたまBloggerの設定を見ていたら、こんなのがあった。
image
○新しくなったエディタ とは?
ともかくこれにして「設定を保存」
新しくなったツールバーの右端は「改行を挿入」とある。
image 
何のことかな?と調べて行くと、これが「続きを読む」の切り替え位置を指定するためのボタンである事が分かった。 
「作成」モードで挿入してみると点線で切り替え位置が表示される。
追記:「追記の区切りを挿入」に変更になっています。(2010/5/6)
image
image  

「HTML の編集」モードだと、この部分が<!— more -->となっている。
image
これを投稿してみると
image
「もっと読む」をクリックすると展開されて次のようになった。
image 
もし、「もっと読む」リンクが表示されない場合はヘルプによると、「レイアウト > 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 >
というコードを挿入すれば良いと言うことである。
なお、「もっと読む »」の文字列は「レイアウト > ページ要素」の「ブログの投稿」の「編集」から変更可能。
image

「北大の紅葉」ムービー

2009/07/26

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


大まかな作成手順は次のようになります。
(1)フォトストーリーを起動したら「画像のインポート」よりムービーに使う画像を選択します。
image 
(2)ここでは1枚目に対してエフェクト「ウォッシュアウト」を適用、2枚目以降は「無し」にしました。
image
※Windows Vistaに入っているフォトストーリー3は下図
image 
(3)「次へ」でタイトルの文字を入れます。
image 
(4)「次へ」で「アニメーションの開始位置と終了位置」、「画像を表示する秒数」を指定します。
image
※Vistaに入っているフォトストーリー3は「アニメーションのカスタマナイズ」をクリック
image 
(5)「切り替え効果」を指定します。
image 
(6)2枚目以降の画像についても同様に指定します。ここでは「画像を表示する秒数」だけを指定しました。
image 
(7)「次へ」をクリックし、BGMを追加します。
ここでは「音楽の作成」より、次のように作りました。
image 
(8)「次へ」をクリックし、保存設定をします。
ファイル名
image 
品質の設定
image 
(9)「次へ」をクリックしムービーを作成します。
image 
(10)「Blogger」の「ビデオを追加」よりこのムービーを挿入します。
image

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

2009/05/21

今回のテンプレートは作成者:Todd Domineyのもので、やって見ます。
オリジンルのページ幅は700pixですが、これを800pixにする場合は次のようにやります。
●widthの数値image
#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でスライドショー

2009/04/27

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

(1)Picasa2でスライドショーに使う画像をトレイに入れる
image
Picasa3は下図
image
(2)「ウェブアルバム」をクリック
image
Picasa3は「アップロード」
image
(3)「アルバムタイトル」などを設定
image
Picasa3は下図
image
(4)「OK」をクリック(Picasa3はアップロード)
image
(5)「オンライン表示」をクリック
image
Picasa3は下図
image
(6)アップロード済みの画像一覧
image 
(7)「このアルバムにリンク/Embed Slideshow」をクリック
image  
(8)設定画面がポップアップして来るので表示サイズ(144px、288px、400px、600px、800px)と、説明の表示/非表示の選択とコードのコピー
image
(9)「完了」ボタンを押して、設定画面を閉じる
(10)Live Writerで「表示/HTMLコード」にし、貼り付ける (Bloogerで作業する時も同様)
image
上記の方法で作成したスライドショー (札幌市南区藤野の「エルクの森」)

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

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

詳しい地図で見る

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

2009/04/24

Bloggerの投稿作成画面は700 X 250と小さいので、使いにくいです。これを広げてくれるのが、「Blogger Extended Editing」。
この「Blogger Extended Editing」はアドオンの「Stylish」を入れてから行なうと簡単に済みます。
但し、これはFirefoxの拡張機能なのでIEには適用されません。
(1)Firefoxの起動後、「ツール/アドオン」で「stylish」を入れて検索、「Stylish」が表示されたら「Firefoxに追加」をクリック
image
(2)「今すぐインストール」をクリック
image
(3)「Firefoxを再起動」をクリック
image
(4)「閉じる」をクリック
image
(5)「Blogger Extended Editing」にアクセスし、「Load Into Stylish」をクリック
image
(6)「保存」をクリック
image 
(7)Blogger投稿画面の旧と新
旧サイズ:700X250、新サイズ:920X445
imageimage