RSS2.0

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

BloggerとWriterで楽々ブログ作成
当サイトのコンテンツはBlogger,Live Writer,Picasa2で楽々ブログ作成法、Googleのサービス使いこなしガイド、自立生活への道、パソコン一般の技術情報、鮭の飯寿司の作り方ブログ編などです。
その他
●３D作成フリーソフ ト「Google Sketch Upの使い方」
●英語・中国語・韓国語・ロシア語の拡大画像付「小樽歴史的建造物」
● 「北海道の回転寿司」 チェーン店をGoogleマップ付で紹介
これらは全てBloggerを使用して作成しております。


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

2009/10/29

通常はWindows Live Writrerを使用しているので、気が付かなかったが、たまたまBloggerの設定を見ていたら、こんなのがあった。
image
○新しくなったエディタ とは？
ともかくこれにして「設定を保存」
新しくなったツールバーの右端は「改行を挿入」とある。
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

投稿者 Owl 時刻: 10/29/2009 0 コメント

ラベル:

「北大の紅葉」ムービー

2009/07/26

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


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

投稿者 Owl 時刻: 7/26/2009 0 コメント

ラベル:

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;
}

投稿者 Owl 時刻: 5/21/2009 0 コメント

ラベル:

Bloggerでスライドショー

2009/04/27

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

（１）Picasa2でスライドショーに使う画像をトレイに入れる
image
Picasa3は下図
image
（２）「ウェブアルバム」をクリック
image
Picasa3は「アップロード」
image
（３）「アルバムタイトル」などを設定
image
Picasa3は下図
image
（４）「ＯＫ」をクリック（Picasa3はアップロード）
image
（５）「オンライン表示」をクリック
image
Picasa3は下図
image
（６）アップロード済みの画像一覧
image 
（７）「このアルバムにリンク／Embed Slideshow」をクリック
image  
（８）設定画面がポップアップして来るので表示サイズ（144px、288px、400px、600px、800px）と、説明の表示／非表示の選択とコードのコピー
image
（９）「完了」ボタンを押して、設定画面を閉じる
（１０）Live Writerで「表示／HTMLコード」にし、貼り付ける （Bloogerで作業する時も同様）
image
上記の方法で作成したスライドショー （札幌市南区藤野の「エルクの森」）

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

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

詳しい地図で見る

投稿者 Owl 時刻: 4/27/2009 0 コメント

ラベル:

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

2009/04/24

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

投稿者 Owl 時刻: 4/24/2009 0 コメント

ラベル:

登録: 投稿 (Atom)