2009/09/03

Bloggerに「続きを読む」を導入

参考URL:ttp://blogger.kuribo.info/2006/02/blogger_20.html
一応ヘルプにもあるけど、わかりづらいので。。。
省略版の投稿の要約部分を作成するにはどうすればよいですか。
ttp://www.google.com/support/blogger/bin/answer.py?answer=42215
一度投稿してから、編集しないといけないのが面倒かな。
それと、普段HTMLの編集でなくて、作成で書いているので切り替えが面倒。
でも、ページが縦長にならなくなるので、見やすくはなるのか???

一応メモ程度に残しておく。
# 以下の#はHTMLを見やすくするためであり、実際には必要ない。
カスタマイズ > HTMLの編集 >  テンプレートを編集
において

#  <b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
#<b:widget id='Header1' locked='true' title='SHERLOCK&apos;s blog @ Blogger (Header)' #type='Header'/>
#</b:section>
#
#  <div id='crosscol-wrapper' style='text-align:center'>
#    <b:section class='crosscol' id='crosscol' showaddelement='no'/>
#  </div>

とあるのを

#  <b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
#<b:widget id='Header1' locked='true' title='SHERLOCK&apos;s blog @ Blogger (Header)' #type='Header'/>
#</b:section>
#
#  <style type='text/css'>
#    <b:if cond='data:blog.pageType == &quot;item&quot;'>
#      .fullpost {display:block;}
#      .readmore {display:none;}
#    <b:else/>
#      .fullpost {display:none;}
#      .readmore {display:block;}
#    </b:if>
#  </style>
#
#  <div id='crosscol-wrapper' style='text-align:center'>
#    <b:section class='crosscol' id='crosscol' showaddelement='no'/>







#  </div>

と改変する。
まぁ

#  <style type='text/css'>
#    <b:if cond='data:blog.pageType == &quot;item&quot;'>
#      .fullpost {display:block;}
#      .readmore {display:none;}
#    <b:else/>
#      .fullpost {display:none;}
#      .readmore {display:block;}
#    </b:if>
#  </style>

を追加するだけなんですが。
一度全文を書いて投稿し、投稿記事のURLをコピーしておく。
その後、
投稿 > 投稿を編集
で当該の記事のHTMLを編集する。

#要約として見せたい部分
#<div class="fullpost">
#隠れて見えない部分
#</div>
#
#<div class="readmore">
#  <a href="この投稿記事のURL">[続きを読む]</a>
#</div>

とすると、O.K.

今回は投稿オプションで 「HTMLコードを表示」にチェックを入れている。
そうしないと、HTMLがそのまま解釈され、コードが表示されない為。
一度、投稿してしまえば、再度編集時にHTMLの編集を選んでHTMLを追加しても認識される。
なので、この記事もRead Moreをつけてみた。

0 件のコメント:

コメントを投稿