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