BloggerとWriterで楽々ブログ作成

Bloggerにカレンダー式アーカイブを追加

2010-04-09T15:45:00.001+09:00

ブログのサイドバーにあるカレンダーの太字の数字をクリックして過去に投稿したブログを表示させると言うのは良く見かける方法だが、なぜかBloggerにはない。これをBloggerで実現させるには「クリボウ式カレンダー」のウィジェットが簡単に出来ていい。以下はその導入方法です。
（１）クリボウの Blogger Tips: Blogger beta にもカレンダーにアクセスし「カレンダーを追加」をクリック

（２）Bloggerにログイン（Bloggerに自動ログインしている時は出ない）

（３）ブログを選択して「ウィジェットを追加」をクリック

（４）Bloggerのレイアウトで挿入場所を編集

※このカレンダーを追加したブログ例はこちら

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

2009-12-15T08:30:00.001+09:00

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

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

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

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

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

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

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

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

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

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

挿入された画像

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

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

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

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

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

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

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

2009-11-12T09:22:00.000+09:00

通常は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 >
というコードを挿入すれば良いと言うことである。
なお、「もっと読む »」の文字列は「レイアウト＞ページ要素」の「ブログの投稿」の「編集」から変更可能。

「北大の紅葉」ムービー

2009-07-26T15:05:00.000+09:00

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

大まかな作成手順は次のようになります。
（１）フォトストーリーを起動したら「画像のインポート」よりムービーに使う画像を選択します。

（２）ここでは１枚目に対してエフェクト「ウォッシュアウト」を適用、２枚目以降は「無し」にしました。

※Windows Vistaに入っているフォトストーリー３は下図

（３）「次へ」でタイトルの文字を入れます。

（４）「次へ」で「アニメーションの開始位置と終了位置」、「画像を表示する秒数」を指定します。

※Vistaに入っているフォトストーリー３は「アニメーションのカスタマナイズ」をクリック

（５）「切り替え効果」を指定します。

（６）２枚目以降の画像についても同様に指定します。ここでは「画像を表示する秒数」だけを指定しました。

（７）「次へ」をクリックし、BGMを追加します。
ここでは「音楽の作成」より、次のように作りました。

（８）「次へ」をクリックし、保存設定をします。
ファイル名

品質の設定

（９）「次へ」をクリックしムービーを作成します。

（１０）「Blogger」の「ビデオを追加」よりこのムービーを挿入します。

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

2009-05-21T06:59:00.001+09:00

今回のテンプレートは作成者：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でスライドショー

2009-04-27T17:08:00.000+09:00

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の投稿画面サイズを大きくする方法

2009-04-24T05:59:00.000+09:00

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

Bloggerをホームページ風にするにはHTMLソースのコピペでやるのが一番簡単

2009-02-06T06:36:00.001+09:00

別なブログに「Bloggerのテンプレートを編集してシンプルなホームページ風にする方法」を書きましたが、一番簡単な方法はここで使ったHTMLのソースをダウンロード、解凍したソースをコピー、新規に作成したブログ（テンプレートは任意）の「テンプレートを編集」に貼り付けてそっくり入れ替えるだけ。そのとき、「ウィジットを削除しようとしています」に対して「確認して保存」でOK。

そうすると次のレイアウトのものが出来上がります。

あとはトップのFLASHを変更するだけで、ホームページ風のブログが出来上がります。ここで勉強しなければならないのはFLASHファイル（*.swf）のアップロード先。
下記アドレスの部分が出来ればいいのですが、この方法は様々。
<iframe frameborder='0' height='160' marginheight='0' marginwidth='0' scrolling='no' src='http://owlnet.vista.googlepages.com/menu5_5.htm' valign='middle' width='800'/>
ここではFLASH関連ファイルのアップロード先にGoogleのPage Creatorを利用していますが、Yahoo!のGeocitiesでもファイルをアップしてFLASHが表示できれば出来ちゃいます。
関連ページ：
●FLASH（*.swf）メニューをGoogle Page CreatorにアップしBloggerで表示
●BloggerにFLASHブログメニューを挿入

BloggerとPhotoshop Expressでブログ作成

2008-11-13T09:48:00.001+09:00

このコーナーはBloggerとLive Writerを使ったブログ作成がテーマですが、Live Writerの調子が何らかの原因で悪い時はBloggerとPhotoshop Expressで行なうのも一つの選択肢です。ここではBloggerと同様に画像をクリックしたとき別ページに大きな画像が表示される方法でやって見ます。

（１）Photoshop Expressで画像サイズをWebsite（800X600）に

（２）DownloadでLINKをクリック

（３）「HTMLの編集」画面で「ここ」と言う文字を入れ「リンクタグを挿入」をクリック

（４）セキュリティ警告を解除（IE）したら、「貼り付け」をクリック

（５）Photoshop ExpressでEMBEDをクリック

（６）「ここ」を選択し「貼り付け」をクリック

（７）文字が画像に置き換わりました

（８）画像サイズをwidth="400" height="300"に変更

（９）同様に２枚目の画像を挿入

（１０）画像追加と文字入力

※関連ページ：この方法で作成したブログ「はなますの丘公園」

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

2008-10-27T17:58:00.002+09:00

違うテンプレートでページ幅を変更してみました。方法は前と同じなので結果だけを示します。
（１）作成者：Douglas Bowman、Rounders 4のテンプレート

（２）ページ幅
#outer-wrapper { width:740px; margin:0 auto; text-align:$startSide; font: $bodyFont; }
#outer-wrapper { width:940px; margin:0 auto; text-align:$startSide; font: $bodyFont; }

（３）メイン部の幅
#main-wrap1 { width:485px; float:$startSide; background:$mainBgColor
#main-wrap1 { width:685px; float:$startSide; background:$mainBgColor

#main { background:url("") repeat-y $startSide; padding:0; width:485px; }
#main { background:url("") repeat-y $startSide; padding:0; width:685px; }

（４）Body部の幅
body#layout #outer-wrapper { width: 730px; }
body#layout #outer-wrapper { width: 930px; }

（５）ヘッダーの背景画像（この場合は単純にサイズ変更しただけ）
#header { background:url("http://www1.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat $startSide bottom; padding:0 15px 8px; }
#header { background:url("http://aurunetto.googlepages.com/bg_hdr_bot.jpg") no-repeat $startSide bottom; padding:0 15px 8px; }

（６）ヘッダー部上コーナーキャップ画像
#header-wrapper { background: #476 url("http://www2.blogblog.com/rounders4/corners_cap_top.gif") no-repeat $startSide top;
#header-wrapper { background: #476 url("http://aurunetto.googlepages.com/corners_cap_top.gif") no-repeat $startSide top;

（７）メイン部下コーナー画像
#main-wrap1 { width:685px; float:$startSide; background:$mainBgColor url("http://www1.blogblog.com/rounders4/corners_main_bot.gif") no-repeat $startSide bottom;
#main-wrap1 { width:685px; float:$startSide; background:$mainBgColor url(http://aurunetto.googlepages.com/corners_main_bot.gif) no-repeat $startSide
（８）メイン部上コーナー画像
#main-wrap2 { float:$startSide; width:100%; background:url("http://www1.blogblog.com/rounders4/corners_main_top.gif") no-repeat $startSide top; padding:10px 0 0; }
#main-wrap2 { float:$startSide; width:100%; background:url("http://aurunetto.googlepages.com/corners_main_top.gif") no-repeat $startSide top; padding:10px 0 0; }

（９）メイン部投稿欄
#main { background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y
#main { background:url("http://aurunetto.googlepages.com/rails_main.gif") repeat-y

（１０）フッターのコーナーキャップ上部画像
#footer-wrap2 { background:#447766 url("http://www2.blogblog.com/rounders4/corners_cap_top.gif") no-repeat $startSide top; color:$titleTextColor; }
#footer-wrap2 { background:#447766 url("http://aurunetto.googlepages.com/corners_cap_top.gif") no-repeat $startSide top; color:$titleTextColor; }

（１１）フッターのコーナーキャップ下部画像
#footer { background:url("http://www.blogblog.com/rounders4/corners_cap_bot.gif") no-repeat $startSide bottom; padding:8px 15px; }
#footer { background:url("http://aurunetto.googlepages.com/corners_cap_bot.gif") no-repeat $startSide bottom; padding:8px 15px; }

※変更したレイアウトはこちら・・・
※変更に使った画像のアップ先サーバーはGoogle Page Creator

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

2008-10-26T07:59:00.001+09:00

Bloggerのテンプレートはページ幅が700pixちょっと今となっては狭いので、少し広くして見ました。この変更はCSSの数値を変えるだけでは済まなくJTrim等のグラフィックスソフトが必要となります。
（１）改造に使ったテンプレート：作成者 Dan Rubin Thisway Rose

（２）標準テンプレートで作成した場合

（３）幅のサイズ変更（ページ幅760→900、メイン幅483→623、サイドは同じ）
●body { margin: 0; text-align: center; min-width: 760px; background: #ce436e url(http://www.blogblog.com/thisaway_rose/bg_body.gif) repeat-x $startSide top; color: $textColor; font-size: small; }
→body { margin: 0; text-align: center; min-width: 900px; background: #ce436e url(http://www.blogblog.com/thisaway_rose/bg_body.gif) repeat-x $startSide top; color: $textColor; font-size: small; }
●#outer-wrapper { margin: 0 auto; width: 760px; text-align: $startSide; font: $bodyFont; }
→ #outer-wrapper { margin: 0 auto; width: 900px; text-align: $startSide; font: $bodyFont; }
●#content-wrapper { position: relative; width: 760px; background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif) repeat-y $startSide top; }
→ #content-wrapper { position: relative; width: 900px; background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif) repeat-y $startSide top; }
●#main-wrapper { display: inline; /* fixes a strange ie margin bug */ float: $startSide; margin-top: 0; margin-$endSide: 0; margin-bottom: 0; margin-$startSide: 3px; padding: 0; width: 483px; 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 */ }
→ #main-wrapper { display: inline; /* fixes a strange ie margin bug */ float: $startSide; margin-top: 0; margin-$endSide: 0; margin-bottom: 0; margin-$startSide: 3px; padding: 0; width: 623px; 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 */ }

（４）サイズ変更後

（５）ヘッダー下部画像のURL取得
#header-wrapper { padding-bottom: 15px; background: url(http://www.blogblog.com/thisaway_rose/bg_header_bottom.gif) no-repeat $startSide bottom; }
（６）URLをブラウザのアドレスバーに貼り付け

（７）画像を保存してJtrimで読み込みサイズ確認

（８）右の余白を140

（９）画面表示を400％にし、範囲選択

（１０）ドラッグで右端を合わせたら「位置確定」

（１１）同名のファイル名で保存

（１２）サーバーにアップロード（有料・無料のレンタルサーバー）
（１３）アップした画像のURLでテンプレート変更
#header-wrapper { padding-bottom: 15px; background: url(http://www13.net/blogger/template/bg_header_bottom.gif) no-repeat $startSide bottom; }
（１４）結果確認

（１５）本文部の背景画像のURL取得
#content-wrapper { position: relative; width: 900px; background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif) repeat-y $startSide top; }
（１６）URLをブラウザのアドレスバーに貼り付け

（１７）画像を保存してJtrimで読み込み、余白作成（右140pix）
（１８）画像途中にある区切り線を確認

（１９）区切り線のある位置より、かなり前の方からオリジナル画像（760pixの位置）の最後まで選択したら画像右端（900pix）までドラッグし「位置確定」をクリック

（２０）同様に保存しアップロード
（２１）テンプレートの変更
#content-wrapper { position: relative; width: 900px; background: #f7f0e9 url(http://www13.net/blogger/template/bg_main_wrapper.gif) repeat-y $startSide top; }
（２２）結果の確認

（２３）フッター部背景画像のURL取得
#footer-wrapper { padding-top: 15px; background: url(http://www.blogblog.com/thisaway_rose/bg_footer_top.gif) no-repeat $startSide top; clear: both; }
（２４）同様の手順で画像を変更しサーバーにアップしたらテンプレート変更
#footer-wrapper { padding-top: 15px; background: url(http://www13.net/blogger/template/bg_footer_top.gif) no-repeat $startSide top; clear: both; }
（２５）結果確認

※実際はこのようなレイアウトになります。
※JTrimでの加工ポイント
エッジのカーブがなだらかになるよう位置合わせを注意深く行なうこと。

●関連ページ：JTrimの使い方
※他のテンプレートも同じ手法でやれますが、小さな画像が多い場合は画像の特定と変更にかなり時間がかかります。
※無料で使えるお勧めサーバー：Google Page Creator、Yahoo!ジオシティーズ
●関連ページ：
・FLASH（*.swf）メニューをGoogle Page CreatorにアップしBloggerで表示
・BloggerにFLASHブログメニューを挿入

BloggerのHeaderに背景画像を挿入

2008-10-04T06:31:00.001+09:00

BloggerのHeaderに背景画像を挿入する方法を「Picasa2の使い方」に例を取って説明します。
（１）「尺取り君」を起動して「Picasa2の使い方」Header部の背景色とサイズを測定します。

この「尺取り君」よりサイズは横730pix、R,G,Bは51,85,119と読み取れます。
同様に縦は135pixとなります。
（２）Picasa2を起動して、ロゴマークが出たら「PrintScreen」のキーを押します。

（３）JTrimに貼り付け後、ロゴマーク部分をトリミングしたら縦135にサイズ変更

（４）「編集／コピー」（クリップボードに一時保存）

（５）JTrimの「新規作成」より次の様に設定します。

（６）JTrimの「塗りつぶし」を選択し、「塗りつぶし色」を赤51、緑85、青119にします。

（７）「塗りつぶし」で新規作成のキャンパスに色をつけます。

（８）「編集／合成貼り付け」を選択、ドラッグで位置合わせをしたら「位置確定」をクリック

（９）ロゴマーク部分の色を背景色と同じくします。

（１０）完成した画像を適当なファイル名で保存

（１１）Bloggerのレイアウトで「Header」の「編集」をクリック

（１２）「ページに合わせてサイズを調整」にチェックを入れ、ファイルを選択

注：画像の挿入時、余白部分が差し引かれるので、挿入した画像は実際のサイズより小さくなります。

（１３）挿入した画像と文字が重ならないようにするため、「設定／基本／説明」で改行の<br>を適当な位置に挿入します。

（１４）完成（IE７、モニターの画面解像度120dpiの時）

※関連ページ
●プリントスクリーンの使い方
●JTrimの使い方
●アウルネットで使用中のフリーソフト（「尺取り君」のダウンロード先）
●Picasa2の使い方

Live Writerへコピペした時の画像サイズ

2008-09-18T15:21:00.001+09:00

Live Writerにコピペで挿入した画像の初期サイズ（最大値）を変更したい時は画像をクリックした時、サイドバーに表示される「画像のプロパティ」で設定します。
（１）「詳細設定」内の「既定の画像サイズをカスタマナイズする」をクリック

（２）「小サイズ」の幅と高さの大きさを入力
ここで設定した「小サイズ幅の最大値 400ピクセル」とは、400pixより大きな画像を貼り付けたら400pixに自動縮小されると言う意味です。
従って350pixの画像を貼り付けた場合は350pixになります。

もし中サイズや大サイズをその意味とは別に小サイズより小さく設定した場合はここからより小さな画像にワンタッチで変更できますが、画像をクリックした時、別ウィンドウで表示される画像も小さくなってしまうと言う問題が出てしまいます。この時の画像サイズはどうも中サイズになるようなので、結局今は次のような設定にしています。

これだとJTim等で800pix（又は640pix）にリサイズしてからLivw Writerに貼り付けると400pixに自動縮小され、その画像をブラウザでクリックした時は800pix（又は640pix）になります。

FLASH（*.swf）メニューをGoogle Page CreatorにアップしBloggerで表示

2008-09-18T10:28:00.001+09:00

Yahoo!ジオシティーズを利用してFLASHメニューをBloggerに挿入する方法はここで紹介しましたが、Google Page Creatorでも可能です。この方法は現在Yahoo!IDを持っていない人や将来それを取る予定の無い人に有効です。
それには先ずGoogle Page CreatorにアクセスしGoogleアカウントでログインします。
今の所、メニューは英語のみですが、Bloggerに慣れた人なら難しい事ではありません。
ここでFLASH関連ファイルをアップするには「Site Manager」で「upload」をクリック

「参照」をクリック

パソコン内のファイルを選択してアップロード

動作確認は該当するhtmlファイルをクリック

既定のブラウザで表示したら動作確認

このFLASHのアドレスは
http://aurunetto.googlepages.com/menu1.html
そして、このhtmlファイルをBlogger側の「ガジェット／HTML・JavaScript」で<iframe>として挿入するとFLASHメニューが出来上がります。

YouTubeビデオの埋め込み

2008-09-18T06:50:00.000+09:00

このビデオを再生するには画像をクリックしてから「再生ボタン」を押してください。
Star Wars VS Sketchup II Speedway Attack SketchyPhysics

YouTubeビデオをブログの中に挿入するにはYouTubeにアクセスし、埋め込みたいビデオを選択します。
その後、「埋め込み」のタグをBloggerやLive Writerの「HTMLの編集（HTMLコード）」へコピペしてやります。
ここで「埋め込みのカスタマナイズ」をクリックすると「関連する動画を含めるかどうか」や「境界線の表示をどうするか」のオプションが表示されますので必要に応じて選択します。

もしムービーのサイズを変更したい時ははwidth,heightの値を同一比率で変えてやります。

音量調整は下図のアイコンから可能

<embed>タグやurl の取得は下図のアイコンから可能

もしYouTube埋め込みのとき関連動画を含めた場合は空いている部分にそのタイトルが表示されます。

関連ページ
●SketchUpでドミノ倒し

登録不要のアクセスカウンターをBloggerに設置

2008-09-13T17:43:00.000+09:00

オンラインアクセスカウンター設置サービスを使うとブログにカウンターを付けることができます。ここで紹介するのは無登録で直ぐ使えてしまうサイトのものです。
このページを一通り読んだら、「メニュー／カウンタ画像一覧」をクリック、カウンターのデザイン424種類の内から一つを選択します。
前ページの「カウンタタグ生成フォーム」に必要事項を入力したら、「タグ生成」をクリックします。

＜script ＞～＜／script＞までのタグを選択しコピー
カウンターを挿入するBloggerの「マイレポート」で「レイアウト」をクリック、次に「ページ要素を追加して並べ替え」画面で「ガジェットを追加」をクリック、ここで「HTML/JavaScript」をクリック

そしてコンテンツ内に先ほどコピーしたコードを貼り付けます。

「変更を保存」をクリック
ブログを表示させ、カウンターが動作することを確認したら、次の様にITGCntCount=1;を削除します。

（ここではカウンターを中央揃いにする為<center>タグを入れました。）
この操作により、次にアクセスがあると１アップします。

もし最初からITGCntCount=1;を削除して動作させると

となりますが、F5（ブラウザの更新）を押すと

初期値の１になります。

このカウンターはアドレス毎に管理しているので、このカウンターを１個設置すれば投稿タイトル別のアクセス状況も分かります。
私はこれまでCGIを使ってカウンターを設置していましたが、これ一つで済んでしまいます。
唯一の心配はサービス停止ですが、可能な限り継続して欲しいと思います。

登録不要で無料のカウンターサービスサイト
●ＩＴギアアクセスカウンター

※2008/9/13 内容追記と最新の画像に変更

FLASHの背景を透明にするには？

2008-09-12T08:11:00.000+09:00

背景色の一般的説明（objectタグ内）
<PARAM NAME=wmode VALUE=window>
この設定はWindows版のInternet Explorer 4.0以上で機能し、次の３種類の指定ができます。但しEMBEDタグでは「wmode=window」のように記述します。
「window」[標準]ページ上で専用の四角形の窓でムービーが表示されます。
「opaque」[不透明表示]ムービーの背後にあるものはすべて表示されなくなります。
「transparent」[透明表示]ページの背景がムービーの透明な部分を通して透けて見えるようになります。
省略すると「window」を指定したことと同じになります。

従ってFLASHムービーの背景色を透明にするには
<PARAM NAME=wmode VALUE=transparent>、<embed wmode=transparent >とします。

スクロール文字と背景の透明

2008-09-12T07:49:00.000+09:00

スクロール文字をBloggerに入れた時、気になるのはスクロール枠内の背景色。これを解決してくれるのが背景色の透明化なのですが、スクロール文字が入ったhtmlとBloggerに挿入する時のインラインフレームの両方を透明にしてやる必要があります。

（１）マーキー（スクロール文字）のhtml
<body>タグに次のようなスタイルを設定します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title></title>
</head>
<body style="background-color:transparent;">
<p><span style＝"font-size:21px;color:#3333ff;"><marquee width="400" height="30">
北海道の開花情報にようこそ。このブログへの投稿は承認を得た人だけ、コメントの投稿はGoogleアカウントを持っているだけができます。</marquee></span>
</p>
</body>
</html>

（２）Bloggerのインラインフレーム例
マーキーが入ったhtmlファイルをBloggerに挿入すには<iframe>を使用しますが、その時マーキーの背景色が白くなってブログの背景色と合わない場合があります。そんな時は<iframe>で背景を透明にします
<iframe frameborder="0" marginheight="0" marginwidth="0" height="40" src="http://www13.net/blogger/marque.html" scrolling="no" width="240" allowtransparency="true"></iframe>

これだと、IEは文字色、文字サイズもOK、FireFoxだとスクロール文字だけがOKでした。
この方法で入れて見たのが「北海道の開花情報」です。

※関連サイト：
●スクロール文字（マーキー）作成ツール
●インラインフレーム作成ツール

Googleマップ吹き出しでのスタイル

2008-09-12T06:35:00.000+09:00

地図上のアイコンをクリックした時、説明文や画像がでますが、１行毎に改行を入れないで作成すると枠幅が最大で500pixになります。これをもっと小さな幅にしたい時はスタイルで幅を指定してやります。
（例）画像のサイズが横200pixなので文字幅も200pixにしたい
<div style="width: 200px; padding-right: 10px;">ここに文書を入れる</div>
padding-right 文字と枠の右側余白
padding-left 文字と枠の左側余白
padding-top 文字と枠の上側余白
padding-bottom 文字と枠の下側余白

BloggerにFLASHブログメニューを挿入

2008-09-10T10:00:00.005+09:00

BloggerはFLASHに対応していないので、FLASHをBloggerに挿入しようと思ったら、FLASHファイル（*.swf）を別サーバーにおく必要があります。ここではYahoo!ジオシティーズを利用してFLASHで作成されたブログメニューを設置して見ます。

（１）メニューに使うFLASHファイルの準備
今回はGoogle検索で「FLASH 素材」とした時、トップのものを使用して見ました。
（a）http://satisfydesire.com/ で「FLASH Materials／横長メニュー」を選択

（b）素材の選択が終わったら「DOWNLOAD」をクリックしパソコンに保存

（c）保存したファイルを適当なフォルダに解凍（４個のファイル）
Read Me.txt
sw_menu01.txt
sw_menu01_white.html
sw_menu01_white.swf

（d）解凍したフォルダ内にある設定ファイル（sw_menu01.txt）を実際に即して変更
●&menu1～6：メニュータイトルを入力（英数字）
（日本語対応のものは別のタイプにあります。）
●&url1～6：リンク先のURLを絶対パスで入力
●&target1～6：_top （同じウィンドウ内に表示）又は_blank（別ウィンドウに表示）に変更
●&msg1～6：メニュータイトルの説明を入力

※オリジナルのsw_menu01_white.htmlはファイル名が長いので、ここではmenu2.htmlに変更しました。

（e）htmlファイル<body>部の余白調整

sw_menu01_white.html（menu2.html）のソースを表示し、<head>～</head>間に
<style type="text/css">

</style>
を入力。これで<body>部の余白が０になります。

（f）設定が終わったらsw_menu01_white.html（menu2.html）をダブルクリックして動作確認

（２）Yahoo!ジオシティーズ
（a）Yahoo!ジオシティーズにアクセスしたら、「カンタンにホームページが作れるジオクリエーター」をクリック

（b）「ホームページを編集」をクリック

（c）Yahoo! JAPAN IDとパスワードを入れて「ログイン」をクリック
（Yahoo! JAPAN IDをお持ちでない方は「Yahoo! JAPAN IDを取得」より取得します。）

（d）元の画面になるので繰り返します。
「ホームページを編集」画面にはindex.htmlが初期値として置いてあります。

（e）「EZアップロード」をクリック

（f）「参照」より３個のFLASH関連ファイルを選択

（g）「ファイルアップロード」をクリック

アップロード後、編集画面にこの３個のファイルが追加になればＯＫです。

（h）動作確認
ブラウザのアドレス（URL）入力欄に
http://www.geocities.jp/owlnetbb/menu2.html
（owlnetbb/menu2.htmlの部分はそれぞれ違います。）
のように入れて、動作確認をします。

（３）iframeタグの作成
Bloggerで使用する為にはiframeタグを作成しておく必要があります。
（a）http://www.tagindex.com/tool/iframe.html にアクセス
（b）次の様に入力
フレームの幅と高さはsw_menu01_white.html（menu2.html）のソースで取得


周囲余白を5としたのはFLASHメニューと周囲との余白を少し取りたかったため。

（c）「更新する」をクリック

（d）「コード選択」をクリック

（e）右クリックメニューでコピー

（f）メモ帳に貼り付け（又は上のフォーム内で直接編集）
<iframe src="ファイルのURL" width="625" height="50" frameborder="0" scrolling="no" name="menu" marginwidth="0" marginheight="0" hspace="5" vspace="5">ここに未対応ブラウザ向けの内容</iframe>

（g）実際のアドレスに変更

（h）中央揃いにする為、align="center"を追加（オプション,middleは縦）
<iframe align="center" src="http://www.geocities.jp/owlnetbb/menu2.html" width="625" height="50" frameborder="0" scrolling="no" name="menu" marginwidth="0" marginheight="0" hspace="5" vspace="5"></iframe>

（i）コードをコピー

（４）Bloggerでの作業
（a）挿入するブログで「レイアウト」を選択
（b）「ガジェットを追加」を選択

（c）「HTML/JavaScript」を選択

（d）「コンテンツ」にiframeコードを貼り付けたら保存

（e）作成された「ガジェット」をブログメニュー位置に移動

（f）保存後ブログを表示して確認

●このFLASHブログメニューを追加したブログ名は「Google SketchUpの使い方」です。

ブログ設定の編集

2008-08-31T19:08:00.002+09:00

Live Writerでブログ設定を変更したい時は
（１）「ブログ／ブログ設定の編集」をクリック

（２）「アカウント設定の更新」をクリック

（３）変更したい箇所を直します。

ブログのURLをコピペで入力、Googleアカウントのユーザー名、パスワード（何れもBloggerと同じ）を入力

※ブログのURLは自分のブログのアドレスをコピー／貼り付けで入れる。

※ユーザ名とパスワードはBloggerでログインするのと同じものを使用

（４）検出に成功したら「はい」をクリック

ここでエラーが出るならブログのURLやユーザ名・パスワードが違っていますので再確認してください。

（５）次の画面が出たら「完了」をクリック

Live WriterからBloggerに画像を投稿する方法

2008-08-25T17:09:00.001+09:00

Live WriterからBloggerに画像を投稿する方法についてまとめて見ました。
（１）パソコン内にある画像をクリップボード経由で挿入
（a）JTrim,Pixiaだけ
JTrim,Pixia等の画像ソフトでリサイズしてからコピペで挿入

（JTrimの時）

（b）Picasa2だけ
デジカメ編集ソフトPicasa2で編集後エクスポート
この時、フォルダのエクスポート先、エクスポートフォルダの名前、サイズ、画質を決める。

エクスポート後、表示された画面で「ブログ用画像」フォルダーをダブルクリック

目的の画像をダブルクリック

右クリックメニューでコピー（画像はVista）

（c）Picasa2とJTrimだけ
Picasa2で編集後コピー

Jtimで貼り付け、リサイズ後Live Writerへコピペ

（２）パソコン内にある画像をLive Writerの「挿入／画像」から挿入
（a）Jtrim等の画像ソフトでリサイズ（800X600,640X480など）して保存
（b）「挿入／画像／ファイルから画像を挿入」より保存した画像を選択

（３）ウェブ上にある画像をクリップボード経由で挿入
（a）画像の上で右クリックし「コピー」（下図はPicasaウェブアルバム）

（b）Live Writerに貼り付け

（４）ウェブ上にある画像を「挿入／画像」から挿入
（a）画像のプロパティを利用
画像上で右クリックしプロパティをクリック、アドレス（URL）を選択しコピー

Live Writerの「挿入／画像／Webから画像を挿入／画像のURL」に貼り付け

「挿入」をクリック

（b）「この写真へのリンク」を利用（Picasaウェブアルバム）
「この写真へのリンク」をクリック

サイズの選択

「HTMLを貼り付けてウェブサイトに埋め込む」をクリックし、画像のURLだけをコピー
（imgタグ内のhttp://部分）

Live Writerの「挿入／画像／Webから画像を挿入／画像のURL」に貼り付け
（サイズは288X216）

※関連ページ
・画像の加工例と画像フリーソフトの使い方（Jtrimの使い方，Pixiaの使い方，Picasa2の使い方へのリンク等）

Googleマップ　目印・直線の色や線幅の変更

2008-08-14T16:18:00.001+09:00

Googleマップで目印や直線などの色や線幅を変更するには
（１）「マイマップ／自分で作った地図」で編集したいタイトルにチェックを入れて「編集」をクリック

（２）線上でクリック

（３）■の所をクリック

（４）変更したい色を選択

ここで線幅や線の透明度も変更できます。

なお目印の場合は色のほか形状も変更できます。

Googleマップで距離を測る

2008-08-12T09:52:00.001+09:00

Googleマップで距離を測るにはGoogleマップ画面で「人気の地図／距離測定ツール」を利用します。

もし、「人気の地図」内になかったら「その他の地図」を選択し「距離測定ツール」をGoogleマップに追加します。

作成は簡単、地図の上をクリックするだけ。もし間違ったら「最後の点を削除します。」をクリックし、直して行きます。
例えば札幌駅北口から百合が原公園までの距離を測定して見ると8,735mと出ました。

もしタクシーで行くとするといくらかかるでしょうか。
札幌市のタクシー料金は初乗り1600mまでが650円、309m毎に80円が加算されます。
次のウェブスプレッドシートに計算式を作っておきましたので興味はある方は試して見ると良いでしょう。
※Googleドキュメントのスプレシッドシートへ

Googleマップの直線を編集するには

2008-08-12T08:01:00.001+09:00

（１）頂点の移動
描いた曲線を修正したい時はポイントを移動してやると大抵直ります。

ポイントのドラッグで実線から点線に変わります。丁度良い位置に来たらドラッグを止めます。

（２）ポイントの追加
既存のポイント移動で直らない時はポイントを追加してから移動します。

「ポイントを追加」をクリック

ポイントが追加になったら移動して直します。

（３）ポイントの削除
下図の様な場合はポイントの移動でも直す事が出来ますが、ポイントを削除して直して見ます。

「このポイントを削除」をクリック


このようにポイントの移動、追加、削除で修正して行きますが、ポイントによっては削除出来ないときが出ます。
その見分け方は
ポイントにマウスを当てた時、四角全体の色が濃い時は削除できる。

ポイントにマウスを当てた時、四角全体の色が半透明となって下の線が透けて見えるときは削除できず、右クリックすると「ポイントの追加」が出ます。このような時は結果がどうでるか何度かやってみると、最適な方法を選択できるようになります。

Googleマップで案内図を作る

2008-08-11T17:23:00.002+09:00

Googleマップの直線を使って案内図を作成する方法です。
ここでは札幌駅北口から百合が原公園を経由してさとらんどに行くドライブマップを作成して見ます。
（１）Googleマップロゴ下の「マイマップ」をクリック
（２）「新しい地図を作成」

（３）Googleアカウントとパスワードを入力し「ログイン」をクリック

（４）「新しい地図を作成」をクリック
（５）タイトルを入れる

（６）出発点を適当な大きさに表示させたら「直線を引く」をクリック

（７）地点をクリックして描く

（６）地図の端に来たら右クリックメニューで「ここを地図の中心」をクリック

（７）描きやすいように「ズームアウトして広域を表示」をクリック

（８）曲がる地点に来たら「ズームインして詳細を表示」をクリック

（９）終点に来たらダブルクリック

（１０）目印を入れるには「目印を追加」をクリック

目印地点をクリックし「タイトル」と「説明」を入れる

（１１）Bloggerに入れるには「リンク」をクリックした後、「埋め込み地図のカスタマナイズとプレビュー」をクリック

（１２）地図のサイズと縮尺を決める

（１３）ドラッグかトリプルクリックでHTMLタグを選択したらコピー

（１４）BloggerのHTMLの編集で貼り付け

（１５）貼り付けた地図

大きな地図で見る

Bloggerにデジカメ写真を投稿するまでの流れ

2008-06-26T08:02:00.001+09:00

デジカメで写した写真をBloggerに投稿するまでの流れは一般的に次のようになります。
（１）デジカメ内の画像をパソコンに取り込む
USBコード又はカードリーダー使用
関連ページ：デジカメからパソコンに画像を取り込むには

（２）取り込んだ画像の加工
JTrimなどの画像編集ソフトでサイズ変更、カラー補整をして保存
関連ページ：JTrimの使い方でのリサイズ、JTrimの使い方でのカラー

（３）Bloggerに挿入
新規作成で「画像の挿入」を選択後、コンピュータから画像を追加
関連ページ：Bloggerに画像を挿入

この他、デジカメ編集ソフトPicasa2から直接Bloggerに投稿する方法やオフラインブログ作成ソフトWindows Live Writerから投稿する方法があります。
関連ページ
・Picasa2の使い方でのBloggerに投稿
・楽々ブログでのWindows Live Writer

Live Writerに地図を挿入してBloggerに投稿

2008-06-18T09:48:00.001+09:00

Live Writerにウェブ地図を挿入してBloggerに投稿するには次のようにします。

（１）「挿入／地図」よりLive Search Mapsを挿入

ここでの地図は静止画像、クリックでLive Search Mapsに接続します。

（２）Googleマップのマイマップで作成したコードを「表示／HTMLコード」より貼り付け

大きな地図で見る

この地図はインラインフレーム内に表示されているので、このブログ内で地点の移動・拡大・縮小などが出来ます。

直リンクでFLASHをBloggerに挿入

2008-06-13T08:35:00.001+09:00

FLASHをブログに挿入するにはサーバーまたはブログにFLASHファイルをアップロードして行ないますが、BloggerはFLASHをサポートしていないので
サーバーにアップするか直リンクの方法しかありません。
ここでは直リンクを認めている「黒ねこ時計くろック FLASH版」を利用してFLASHの時計を挿入して見ます。
（１）挿入する時計が決まったら、タグを選択してコピー

（２）Bloggerの投稿画面の「HTMLの編集」で貼り付け

（３）「投稿を公開」をクリックし、ブログを表示

このように直リンクを認めているサイトがあると様々なFLASH動画をBlogger内に挿入できるようになります。

※黒猫以外ではこんなサイト（時計やさん）を見つけたので、追加します。（2007/6/16）

このGネオンタイプの他にBaby-Gタバコタイプ，by-Gスマイルタイプ，TVタイプ，ネオンハイビタイプ，木目タイプ，スタータイプN，@マークメタルタイプ，ハイビスカスタイプなどがあります。

Bloggerに画像を挿入

2008-06-12T11:59:00.001+09:00

Windows Live Writerは画像のコピペでブログに挿入出来ますが、Bloggerではそれが出来ないので、「画像を追加」から画像を挿入します。

「画像を追加」をクリックすると次の画面になるので「参照」をクリックし、挿入したい画像を選択します。

画像のレイアウトは「なし，左，中央，右」の４種類、画像サイズは「小，中，大」の３種類。
これがレイアウトと画像サイズの選び方でどう変わるかを説明します。
お勧めはレイアウト「なし」、画像サイズは「大」または「中」、この場合は文字と画像が上下に分離され、レイアウト崩れと言うトラブルから解放されます。
もし投稿用に作成した画像のサイズを600pix × 450pixにした場合、小は200X150、中は320Ｘ240、大は400X300に縮小され、画像をクリックすると、オリジナルのサイズ（600X450）で表示されます。

（1）レイアウトは「なし」、画像サイズは「小」

レイアウトは「該当なし」、レイアウトは「該当なし」、レイアウトは「該当なし」、レイアウトは「該当なし」、レイアウトは「該当なし」、レイアウトは「該当なし」、レイアウトは「該当なし」

（2）レイアウトは「左」、画像サイズは「中」

画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左、画像は左

（3）レイアウトは「中央」、画像サイズは「中」

画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央、画像は中央

（4）レイアウトは「右」、画像サイズは「中」

画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右、画像は右

（5）レイアウトは「該当なし」、画像サイズは「大」
一つの投稿に対して画像を複数挿入した場合、順次下に置かれるのでは無く、編集画面最上部に置かれます。これを下の方に移動したいときは「HTMLの編集」で該当タグを「切り取り／貼り付け」で移動する必要があります。

注：ワードと同じように画像のドラッグでも移動可能ですが、慣れないと思ったようにならないので、「HTMLの編集」で行なった方が確実です。

Live Writerにブログアカウントを追加

2008-06-06T08:01:00.000+09:00

Live Writerをインストールしたら、ブログアカウントの追加から始めます。
（１）「ブログ／ブログアカウントの追加」を選択
Bloggerの場合は「他のブログサービス」にチェックを入れて「次へ」

（２）Bloggerのブログアドレス、ユーザー名（Googleアカウント：メールアドレス）、パスワードを入れたら「次へ」

Bloggerの場合、「ブログのホームページのURL」は
"http://your blogname.blogspot.com/"の形になります。

（３）「ブログ設定の検出中」画面

（４）検出が終わったら次の画面になるので「はい」をクリック
「はい」にするとブログデザイン関連のファイルをダウンロードし、オフラインでもそのデザインでブログ記事を作成できるようになります。

（５）「完了」をクリックして終了

背景色を設定できるシンプルカウンター

2008-05-08T07:14:00.001+09:00

Bloggerに文字だけのシンプルなアクセスカウンターを設置したい場合は３カウンターが一つの選択肢です。
必要事項を入力したら、「作成！」をクリック

Bloggerに貼り付けるコードが生成されるので、あとはBloggerレイアウトのページページ要素を追加／HTML/Javascriptのコンテンツに貼り付けるだけです。

●このカウンターを貼り付けたブログはこちらです。

thinkfreeの表をLive Writerに貼り付け

2008-01-07T07:07:00.001+09:00

thinkfreeのオンライン表計算ソフトを使ってLiveWriterに貼り付けて見ます。
このソフトはGoogleドキュメントよりはるかに高機能、そして見た目はエクセルとそっくりです。

所がこれをコピペすると残念ながら

となり、貼り付けできませんでした。

Googleドキュメントの表をLive Writerに貼り付け

2008-01-07T06:23:00.001+09:00

オンライン表計算ソフトであるGoogleドキュメントのスプレッドシートを使ってLive writerに貼り付けて見ます。

入金額 5%の複利現価率現在価格

１年 2,000万円 0.9524 19,048,000円

２年 2,000万円 0.907 18,140,000円

３年 2,100万円 0.8638 18,139,800円

４年 2,100万円 0.8227 17,276,700円

５年 1,800万円 0.7835 14,103,000円

６年 2,100万円 0.7462 15,670,200円

７年 2,000万円 0.7107 14,214,000円

８年 2,000万円 0.6768 13,536,000円

９年 1,900万円 0.6446 12,247,400円

１０年 60,000万円 0.6139 368,340,000円

一応表の体裁は成していますが、タグはTableでなくてPを使っています。
もし「HTML」を選択すると

こんな風になります。

入金額 5%の複利現価率現在価格１年 2,000万円 0.9524 19,048,000円２年 2,000万円 0.907 18,140,000円３年 2,100万円 0.8638 18,139,800円４年 2,100万円 0.8227 17,276,700円５年 1,800万円 0.7835 14,103,000円６年 2,100万円 0.7462 15,670,200円７年 2,000万円 0.7107 14,214,000円８年 2,000万円 0.6768 13,536,000円９年 1,900万円 0.6446 12,247,400円１０年 60,000万円 0.6139 368,340,000円

Calcの表をLive Writerに貼り付け

2008-01-07T05:51:00.001+09:00

フリー表計算ソフトのカルク（Calc）からLive Writerにコピペして見ます。但し表の選択範囲は結合セルの無い所にします。

書式の保持を選択

こちらの場合はbgcolorのタグがHTMLコードに入っているので、グレイの背景色になって貼り付けられました。中央揃い、右揃いの書式も反映され表のサイズも変更できるので使い勝手はExcelよりはるかに良いです。

	入金額	5%の複利現価率	現在価格
１年	2,000万円	0.9524	19,048,000円
２年	2,000万円	0.9070	18,140,000円
３年	2,100万円	0.8638	18,139,800円
４年	2,100万円	0.8227	17,276,700円
５年	1,800万円	0.7835	14,103,000円
６年	2,100万円	0.7462	15,670,200円
７年	2,000万円	0.7107	14,214,000円
８年	2,000万円	0.6768	13,536,000円
９年	1,900万円	0.6446	12,247,400円
１０年	60,000万円	0.6139	368,340,000円

上の様なセルサイズに変更し表のプロパティを見ると

ここで表の幅を452ピクセル、セル内のスペースを5ピクセルにすると

次の様になります。

	入金額	5%の複利現価率	現在価格
１年	2,000万円	0.9524	19,048,000円
２年	2,000万円	0.9070	18,140,000円
３年	2,100万円	0.8638	18,139,800円
４年	2,100万円	0.8227	17,276,700円
５年	1,800万円	0.7835	14,103,000円
６年	2,100万円	0.7462	15,670,200円
７年	2,000万円	0.7107	14,214,000円
８年	2,000万円	0.6768	13,536,000円
９年	1,900万円	0.6446	12,247,400円
１０年	60,000万円	0.6139	368,340,000円

もし表計算ソフトからBloggerにコピペする機会が多い場合はGoogleパックのStarSuiteかOpenOfficeをインストールするといいでしょう。

Excelの表をLive Writerに貼り付け

2008-01-06T16:32:00.001+09:00

Excelで作成した表をコピペした時、どうなるかを調べて見ました。
次のような表を作成しコピー

Live Writerの「編集／形式を選択して貼り付け」をクリックし、「書式の保持」を選択

下図のようになります。
（もし、この「書式の保持」を選択しない場合は表になりません。）

罫線が表示されていません。原因は「収益の現在価値の合計」がセルの横幅に収まっていないからです。その部分の選択を止めてコピペすると罫線が出ました。

ここで罫線のプロパティを見ると、

となります。ここで幅を変えて見ましたが変更できませんでした。これからするとLive WriterはExcelの書式をある程度保持したまま貼り付けられるが、Office特有のスタイルをサポートしていないので表のサイズを変更出来ない見たいです。それと背景色も設定できません。

ここで罫線のプロパティを次のようにして、

この表をそのまま投稿して見ます。

	入金額	5%の複利現価率	現在価格
１年	2,000万円	0.9524	19,048,000円
２年	2,000万円	0.9070	18,140,000円
３年	2,100万円	0.8638	18,139,800円
４年	2,100万円	0.8227	17,276,700円
５年	1,800万円	0.7835	14,103,000円
６年	2,100万円	0.7462	15,670,200円
７年	2,000万円	0.7107	14,214,000円
８年	2,000万円	0.6768	13,536,000円
９年	1,900万円	0.6446	12,247,400円
１０年	60,000万円	0.6139	368,340,000円

罫線の色は黒になっていませんが、レイアウト崩れは無いのでこの方法でも実用になります。

Amazonアソシエイトのリンク挿入

2008-01-06T06:14:00.001+09:00

Amazonアソシエイトのプラグインをインストールすると、そのリンクをページ内に直接挿入できるようになります。

（１）「プラグインの追加」をクリック

（２）Amazon Associate Japanをダウンロードしてインストール

（３）HTMLコードに切り替えて、挿入ポイントをクリックしたら、「挿入／Amazon Associate Jp link 」を選択

（４）検索キーワードを入れて「検索」をクリック

（５）一覧から挿入する本を選択し、イメージサイズを決めたら「OK」をクリック

（６）コードが挿入された所

（７）Webレイアウトに切り替えると

図とケースでわかる不動産DCF法塚本勲

（８）画像の編集は画像をクリックして出る「プロパティ」で行う

ちなみに私が持っているのは初版の方

（Polaroidプラグイン使用）

コンテンツに関する記事をLive Writerで書くには

2008-01-05T11:29:00.001+09:00

ホームページやブログのコンテンツを引用して記事を書くときは次のようにすると簡単に行きます。
先ず引用したい記事を選択します。次にブラウザ（ここではIE7）のツールより「Windows Live Writerでこのコンテンツに関する記事を書く」を選択します。

するとLive Writerが起動し、次のように新規文書の中に挿入されます。

ポラロイド写真風に加工して挿入

2007-12-27T18:06:00.001+09:00

Windows Live Writerに「Polaroid Picture」プラグインをインストールすると、画像をポラロイド写真風に加工してブログ記事に挿入できるようになります。

●プラグインのダウンロード

（１）次のリンクをクリック
・Windows Live Gallery

（２）ダウンロードをクリック

（３）インストールをクリック

（４）デスクトップに保存

●インストール

（１）デスクトップのファイルをダブルクリックした後、「NEXT」をクリック

（２）「NEXT」をクリック

（３）「NEXT」をクリック

（４）「Close」をクリック

●使い方

「挿入／Polaroid」から画像を選択

画像をクリックするとプロパティが出るので、ここで各種の設定をします。

PicasaWebのフォルダが500枚になったら

2007-12-24T09:00:00.001+09:00

Windows Live Writerからブログを作成した場合、PicasaWebにWindows Live Writerと言うフォルダの中に保存されます。もし保存枚数が500枚を超えると「サーバー内部エラー」のメッセージが出て、アップロードが出来ません。
その時はPicasaWeb内の画像を移動して対処します。

（１）Windows Live Writerフォルダで「オーガナイズ」をクリック

（２）移動したい画像を選択して「移動」をクリック
Ctrlを押しながらは飛び飛び画像の選択、Shiftを押しながらは連続した画像の選択

ここでは10枚だけやって見ましたが、100枚まで可能です。

（３）移動先のタイトルを記入

（４）公開か非公開を決めて「続行」をクリック

（５）完了メッセージ

参考
・既存のフォルダに移動するときは「既存のアルバムを選択」をクリック

・一気にやろうとしたら、次のメッセージが出ました。一度に移動できる最大枚数は１００枚です。

・Windows Live Writerフォルダが空になりました。

・このブログを投稿したら（１８）になっていました。これでまたWindows Live writerから投稿できます。

タイトル画像の変更

2007-12-16T09:13:00.001+09:00

標準テンプレートをそのまま使うのではなく、タイトル画像を変えて見た場合のサンプルです。

（１）今回使ったテンプレートはこれ

（２）この画像のURL

http://www.blogblog.com/tictac_blue/top_div_blue.gif

（３）この画像をブラウザで表示

（４）画像をコピー

（５）JTrimに貼り付け

変更するサイズを「尺取り君」で測ると765X240

（６）タイトル画像に使う写真をPicasa2で切り抜いてコピー

注：画像の下半分は表示されないので、そのつもりで範囲選択する

（７）JTrimをもう一つ起動して貼り付け、トリミング、カラー調整、サイズ変更、シャープなどの加工を行う

加工が終わったらコピー

（８）もう一方のJTrimに合成貼り付け後、位置合わせを行う

（９）名前を付けて保存（jpg）

（１０）ＦＴＰでアップロード
（１１）その画像のアドレスを取得したらコピー
（１２）テンプレート編集で貼り付け

（１３）タイトル文字が邪魔な時の対処
タイトルが空だとエラーになるので全角の空白文字を入れる

但しマイレポートではブログ名が空白になってしまうので不便。他の方法はページ最下部。

ブラウザに表示されるタイトルは
<title>小樽歴史的建造物</title>を次にように追加して対処

（１４）ブラウザで表示

※タイトル文字がある場合
padding-$startSide: 160px-->45px;
font-size: 200%-->25px;
に変更

背景画像の縦方向をもっと表示させたいときは
padding-bottom: 35px;をもっと大きくするといい。
今回はpadding-bottom: 70px; とした。

Portable Thunderbirdでフィード購読

2007-12-15T10:12:00.001+09:00

Portable ThunderbirdをUSBメモリにインストールして持ち歩くと、どこにいてもお気に入りのブログ更新状況をチェックする事が出来ます。

方法は「投稿（Atom）」上で右クリックして、「ショートカットのコピー」を選択

「ツール／アカウント設定」で「アカウントの追加」をクリックします。
「RSSニュースリーダーとブログ」にチェックを入れて「次へ」をクリック

「アカウント名」を決めます。
この名前は何でも良く、「友達のブログ」とか「親戚のブログ」などでも構いません。

上の画面で「次へ」、下の画面で「完了」をクリック

「RSS購読の管理」をクリック

「追加」をクリック

先にコピーしたURLを貼り付けて「ＯＫ」をクリック

Ｘをクリックし、ウィンドウを閉じます。

ThunderBird左側の画面で「自分のブログ」の＋をクリックします。

右側の画面にタイトルが表示されるので、読みたいタイトルをクリックすると、下に表示されます。

「フィードの購読」をクリックした時の画面

関連サイト
●http://portableapps.com/
（Portable ThunderbirdなどUSBメモリに保存できるフリーソフト配信サイト）

フィードの購読

2007-12-15T07:31:00.001+09:00

Bloggerで作成したブログページの最下部に「登録（Atom）」と言うのがあるのでここをクリックします。

すると次のようなページが表示されるので「このフィードを購読する」をクリックします。（I.E７）

「購読」をクリックします。

星マークをクリックします。

「フィード」に登録したブログ名が表示されます。

それをクリックするとブログが表示されます。

ここで「並び替え」や「カテゴリ」別に表示させる事ができます、

「フィードのプロパティを表示」でフィードの更新間隔を設定できます。

もっと詳しく設定する場合は上図の「設定」をクリック後、「フィードの設定」で更新スケジュールや詳細を設定できます。

JavaScriptでスライドショー

2007-12-12T11:25:00.001+09:00

コピペだけでスライドショーを作るには「Picasaウェブアルバム」と「簡単JavaScript作成」を使うのが一つの方法。
手順は
（１）「簡単JavaScript作成」を起動

（２）「新規作成」をクリック
（３）メニューの中から一つを決めて「決定」をクリック

（４）Picasa2で「ウェブアルバム」をクリック
スライドショーに使う画像を選択し、「この写真へのリンク」をクリック

（５）サイズを選択後、http://から.JPGまでを選択してコピー

（６）「簡単JavaScript作成」の「表示する画像ファイル」に貼り付け、
「画像を表示する時間」を記入したら、「追加」をクリック

（７）必要枚数だけ上記（４）から（６）を繰り返す
（８）「JavaScriptを作成」をクリック
（９）<SCRIPT Language= から最後まで選択してコピー

（１０）Bloggerの「テンプレート」で「ページ要素を追加」をクリック
コンテンツ内に貼り付け

（１１）「簡単JavaScript作成」に切り替え、<IMG SRCから最後までを選択し、コピー
（１２）</SCRIPT>の後に貼り付け

スライドショーを中央揃いにしたい時は<center> タグを追加

（１３）「変更を保存」をクリック
（１４）「ページ要素を追加して並び替え」画面でこのスライドショーの配置をドラッグして決める

関連サイト
●「簡単JavaScript作成」のダウンロード（Vector）

Live Search Maps

2007-12-11T05:56:00.001+09:00

Microsoftが提供するウェブ地図、Googleマップでは表示できないものでも、このLive Search Mapsを使うと可能になる事があるので、併用して使うと良い。
画像をクリックするとLive Search Mapsサイトにジャンプします。

ウズベキスタン旅行

Windows Live Writer上で「地図の挿入」を選択すると、世界地図が出ます。
ここで出来るのはピンを立ててコメントを入れるだけ。

関連サイト
●ウズベキスタン旅行記

Googleマップの埋め込み

2007-12-10T17:24:00.001+09:00

野球のオリンピックアジア予選が行われた台湾の台中洲際棒球場
英語名はTaichung Intercontinental Baseball Stadium
ドラッグで地点の移動、ダブルクリックで地点の移動と拡大、アイコンのクリックでコメントの表示

拡大地図を表示

Googleマップの「このページのリンク」より埋め込みのタグを取得します。
あとはコピペするだけ。

関連ページ
●Googleマップの応用であるAPIを使用した例「札幌の公園」

ブロックのサイズ

2007-12-10T13:17:00.001+09:00

「テンプレート／HTMLの編集」で分かります。
例えばサイドバーですと
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
これからこのブログのサイドバーのサイズは240pixだとわかります。
では実際に「尺取り君」で計測して見ると

となりました。一致していますね。これで測ったほうが早いです。

関連ページ
●「アウルネットで使用中のフリーソフト」の「尺取り君」

Googleマップでのスタイル

2007-12-10T13:05:00.001+09:00

地図上のアイコンをクリックした時、説明文や画像がでますが、文の長さによっては枠幅が広くなりすぎたりします。これを避けるにはスタイルで幅を指定すると一定の幅になります。
（例）
＜div style="width: 200px; padding-right: 10px;"＞ここに文書を入れる＜/div＞
padding-right 右のスペース
もし必要ならば
padding-left 左のスペース
padding-top 上のスペース
padding-bottom 下のスペース
注
●ここでは＜＞に全角を使っていますが、実際は半角を使用します。

FLASHの埋め込み

2007-12-10T11:31:00.001+09:00

BloggerはFLASHをサポートしていないので、FLASHファイルを別サーバーに置いてそれにリンクを貼ると動作します。
画像の上で一度クリックしてから、犬猫にマウスを当てると泣き声が聞こえます。

filename.swfと言うFLASHファイルをFTPでホームページ等のサーバーに転送し、次のようなタグをHTMLの編集画面で貼り付けると動作します。
赤がFLASHファイルを置いてあるURLでこれが最重要。
＜object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,29,0" width="400" height="290"＞
   ＜param name="movie" value="http://pet.owlnet.jp/barthday-c.swf"＞
   ＜param name="quality" value="high"＞
   ＜embed src="http://pet.owlnet.jp/barthday-c.swf" quality="high"
pluginspage=http://www.macromedia.com/go/getflashplayer
type="application/x-shockwave-flash" width="400" height="290"＞
＜/embed＞
＜/object>
注
●ここでは＜＞と全角を使っていますが、実際は半角の<>です。
●objectタグが無くてもembedタグだけでも動作します。
●FLASHのサイズはブログの本文サイズに合わせます。
●実際はダウンロードしたサイトの説明書に従って下さい。

関連ページ
・「札幌エリアのペット関連情報」（犬猫のFLASHを載せています。）

スクロール文字

2007-12-10T08:32:00.001+09:00

スクロール文字（マーキー）を入れるのは簡単。＜marquee＞タグの中身を完成させて、貼り付けると完成します。

w=200,h=30の文字のスクロール

w=400,h=30の文字のスクロール

関連サイト
●マーキー作成ツール

Writerで投稿した画像の行方

2007-12-10T07:31:00.001+09:00

Live Writerから投稿した画像はPicasaウェブアルバムに置かれます。
そのフォルダ名はWindows Live Writer、この中にはこれまで投稿した画像の全てが置かれています。（384枚）

この中の１枚をクリックすると編集画面になり、ここからこの画像に対してリンクを貼る事も出来ます。（「この写真へのリンク」など）

関連ページ
・３D作成フリーソフト「Google SketchUpの使い方」

画像のコピペ

2007-12-10T06:22:00.001+09:00

Windows Live Writerは元来Windows Live Space用に開発されたものですが、Bloggerとも相性が良く、オフラインで作成した文書を直接ブログに投稿できるようになります。
イメージ的にはWordで作成した文書を直接ブログに投稿するみたいなものです。このソフトで一番気に入ったのは画像の貼り付けが出来ることです。つまりデジカメ編集ソフトPicasa2でコピー、そしてLive Writerに貼り付け。作業性が格段にアップします。
大まかな手順
（１）Picasa2編集画面でコピー

（２）Live Writerに貼り付け（画像は自動縮小）

（３）画像のサイズを変更



ブログを書き終えたら投稿をクリック、これで終わり。プリントスクリーンが使えればワードで作成した図形も貼り付け可能です。

また元の画像が大きくてもLive Writerが自動でサイズ変更をしてくれるので、これまでのようにリサイズ（JTrim）とかエクスポート（Picasa2）する必要がなくなりました。

もしブログの画像をクリックした時、大きなサイズで見せたい時は他の手を使わないといけません。

関連ページ
●プリントスクリーンの使い方
●飯寿司の作り方

Bloggerのテンプレート

2007-12-09T17:40:00.001+09:00

Bloggerの基本テンプレートは16種類、これにカラー違いが加わるので全部で38種類となります。

このブログはBloggerのテンプレートを配布しているサイトのものを改造して使っているので、違ったデザインになっています。

Googleアカウントの取得

2007-12-03T17:05:00.000+09:00

Bloggerを開設するにはGoogleアカウントの取得が必要です。
https://www.blogger.com/start
にアクセスすると次の画面が表示されるので、「ブログを作成」をクリックします。

必要事項を記入します。

「利用規定に同意します。」にチェックを入れて「次へ」、あとは指示に従います。

全ての設定が完了したら、Googleからメールが送られて来ます。指定のリンクをクリックするとGoogleアカウントが正式に認められます。

次からはユーザー名（登録したメールアドレス）とパスワードを入れて「ログイン」をクリックします。