水曜日, 8月 16, 2006

Google Blogger in Beta レビュー

グーグル、「Blogger」のアップグレード版を試験提供開始 > Computerworld
Blogger in beta > Blogger Buzz

、、、ということでございます。
新しいものに眼がないあまたですから、早速レビューしたいと思います。



で、Bloggr Buzzにあった画像より→
見たところすごく整ってますな。レビューした人間からしますと、
今回のUpdate(Upgrateかな)はBlogger利用者諸君にとても好評だと思いますよ。
さて、今回のレビューはBlogger諸君および新規参入者にわかりやすいようにやっていくつもりです。
【注意】まだBetaですから、表記は英語onlyです。




1、まずは登録!
※枠内に色がついていますが、これはOperaBrowserの認証マネージャーなので気にしないように。
みてのとおりわかりますが、次回からBloggerはGoogle Accountに統合されます。
なので登録はGoogleAccountを使えばいいのです。
もうすでに持っている人は、右上の"sign in first"で登録できます。





2、Dashboard
大分変りましたね。
Dashboardから投稿・Setting・レイアウト・ブログ確認と直接リンクが貼られています。
Bloggerの特色でもある、複数ブログの設立は健在です。
ちなみに削除してますが、右上にはメールアドレスが表示されます。




3、投稿してみよう!
右の画像を見てのとおり、これがBloggerの投稿画面。
すでに設定を済ませているのでタイトルやリンクフィールドが表示されています。
Settingで調整してから投稿しましょう。

下にあるラベルはBlogger初機能。
タグっていうのと同じだと思ってください。
これは後で説明するテンプレートで、サイドバーに表示することができます。
PostOptionsはコメントの表示・バックリンクの表示・投稿時刻設定ができます。
WYSIWYGテキストエディター機能はどのブラウザでも使えます。
※公式にはInternet Explore/Mozilla Firefox/Safariですが、Opera8.5以降も使えます。





4、投稿を編集しよう!
以前のBloggerはある問題がありました。(参考)
次回からはそれに対応した?のか記事の検索ができるように。
今まで確認できなかったコメント数も表示されます。




5、投稿後の確認
投稿した後、次の画面が表示されます。
なんとうれしいことに、次回からは再構築なんて必要ありません。
テンプレートの編集もSetting編集もです。
今までの利用者からすると、構築が早すぎて戸惑うくらいです。



6、コメントの編集をしよう。
これはSettingで可能になります。
Bloggerはコメントの反映を許可/拒否するのにメールアドレスが必要になります。
ですが、あまたとしてはこれは是非やったほうがいいでしょう。
Bloggerには別にコメントメール通知がありますが、
コメント管理とは違ってレスポンスがよくすぐにメールが届きます。
もし、メール管理に使うアドレスがGmailであったら、
(自分のID)+(好きな文字列)@gmail.comとすると、振り分けが楽になりますよ。




7、Setting画面で調整しよう!
すでに利用されているBlogger諸君へのレビューっていう色合いが強いので一部カット。
注意すべき点を書いておきます。

全体的には何も変わっていません。
あえていうなら、時間帯設定が[+9:00]Asia/Tokyoとなったくらいです。

そして次回から新しく追加されるFeed機能ですが、




8、Feed機能の設定
画像を見てください。
これはAdvanced Modeと呼ばれる画面です
(はじめ表示する時はBasic Modeという従来と変わらない画面になっている)。
記事(Post)のFeedとコメント(Comment)のFeedが全体か一部だけかの選択が可能です。
(Per-commentsはわかりませんでした)
この際使われるFeedはAtom1.0で、
コメントのFeedは各記事に対するコメントがあった場合のみ反映される仕様で、
気になる記事のコメントが新しく来ていないかを確認するようなものになっています。
(コメント全体に適用されまぜん)

ちなみにRSS2.0はまだ無いようでしたが、
RSS2.0はBloggerでは記事のヘッドラインのみ表示する仕様になっていました。





9、テンプレートを更新しよう!
次回からのBloggerの醍醐味はテンプレート編集にあります。
右の画像は、テンプレート編集画面についての表記です。
「従来の編集画面か、それとも新しい編集画面か」の選択をここで決めます。




    左の画像は、旧編集画面から新編集画面への移行の際のページ。
    Costomize Designってところをクリックすると表示します。
    (先程の画面で設定が終わった人には関係ありません)





10、テンプレート編集画面の詳細
これがPage Elementsという画面です。
ところどころにEditとありますが、これは画像で表示しますのでそちらを参考に。
Add Page Elementsは様々なプラグインを表示する機能です。
少々色が濃いところはドラッグ&ドロップで好きな場所に設置出来ます。

Editについては以下の画像を参考にしてください。



・BlogArchiveはその表示方法の変更(リスト表示やドロップダウンメニュー、古い順か新しい順)
・Page Elementsは画像Viewerやリンク・ラベルリスト、HTMLやJavaScriptの別個表示などと多彩。
 残念なのは最近のコメント表示やバックリンクの表示がないこと。
・BlogPostはSetting+αとして、コメントやラベルの表示位置を変える、表示文字の変更など。


右のはおなじみテンプレートの選択画面。
確認したところ、新しいテンプレートは6つほど。

しかし、有志が作成したFreeTemplateはたくさんありますから、それらを利用すると
もっと幅が利きます > ■GoogleBlogger Template総合






今回一番変化があったのは、このFonts and Colorsですね。
左上のパネルから、どこの(たとえばテキストやバックグラウンド)の色を変更するか。
あるいはフォントを変更するか。
プレビュー画面を見ながら自由に変更できます。






以上でBlogger in Betaのレビューは終わりです。
Beta利用者はNavbarが右のようになっており、今のところFlagボタンはないようです。
コメント投稿画面は相変わらずでした。

今回のBetaはGoogleサービスのなかでも最も期待できるものではないでしょうか?


#バックリンクとは、あるページからリンクされると記事にリンク元を表示してくれる機能。
#Bloggerにはトラックバックがない。
#テンプレート編集について、直にHTMLを編集する機能はまだできないとのこと。
#今まで通りに編集するには旧編集画面に戻らなくてはならない。
#その代り新機能は試せない。



金曜日, 8月 04, 2006

コメント管理機能について。

コメント管理とコメント通知の二つが存在する。
コメント管理はコメント通知+管理とただ管理する段階が増えただけだが、
もしこれら機能を使うのであれば、管理機能を選んだほうがいい。

実はこの二つはレスポンスが全く違っている。
管理機能はメール通知が意外と早く、すぐに対応できるが
通知機能は再構築後に一度に送られるというふびんな機能になっている。

あるBlogでは、通知機能を使ったが故に一度に200通近くおくられてきた。
Spamであっても削除しようもない。
管理機能はすぐに対応でき、削除も簡単だ。
もし使うなら管理機能がいいだろう。

水曜日, 8月 02, 2006

"最近のコメント"を実装するには

前回記述の サイドバーに"最近のコメント一覧"を搭載する は、JavaScriptを利用したものだったけど、
Blogger Templateのテンプレートを見たところ、それ以上に簡素なつくりのものがあったので転載しておく。

<MainPage>
<h3>Comments</h3>
<ul class="bubble-list">
<Blogger>
<BlogItemCommentsEnabled>
<BlogItemComments>
<li><$BlogCommentAuthor$> @
<a href="<$BlogCommentPermalinkURL$>">
<$BlogCommentDateTime$></a></li>
</BlogItemComments>
</BlogItemCommentsEnabled>
</Blogger>
</ul>
</MainPage>


この部分
<MainPage>
<h3>Comments</h3>
<ul class="bubble-list">

</MainPage>

は、状況によって削除しても問題なし。
MainPageは外しておくと、どのページでも表示できるようになるので外したほうがいいのかもしれない。
ただ、BloggerHackのものと同じで、TOP掲載記事のコメントにしか適用されない。
あるなしで考えたら、あったほうがいいかも。

BloggerのRSS2.0とAtom0.3の違い

Bloggerでは従来Atom0.3が使われてきたが、いつのまにやらRSS2.0がサポートされるようになった。
今回はその違いのメモ。

Atom0.3は、今まで通り。
設定画面→フィードからある程度弄ることができる。
RSS2.0は、弄ることができない。
しかしAtom0.3と違うのはHeadlineしか表示しないということだ。

文字ばかり書いていて、しかも改行が反映されていない場合、Atom0.3で受信するとそりゃもう大変なことになってますよ。
しかしRSS2.0を使えば、Headiline onlyなのでそんなのも気にならない。
いい機能ができたのかどうかは各自で。

日曜日, 7月 23, 2006

記事をさかのぼるには

あまりBloggerでは意識しないが、一般のBlogではTOPから過去ログを投稿順に閲覧できる仕組みがある(次のページへ、というもの)。
これは結構要望があったのでそれらしいものを見つけてみたが、ひとつしかさかのぼれない。
仕方ないけどこれで我慢すべし。

<Blogger>の前に貼ると吉。



<ItemPage>
<!-- content nav -->
<p class="content-nav">
&laquo; <a href="<$BlogURL$>">Home</a><span><BloggerPreviousItems> | <a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a> &raquo;</span><span style="display:none"></BloggerPreviousItems> </span>
</p>
</ItemPage>

BloggerTemplate総合

中国のBlogです
■Yee’s Blog
http://iyee.cn/post/blogspot-blogger-templates-list.html
半分以上は知っていました。

でもここのはいいですね。

金曜日, 5月 05, 2006

Simple APIを使ったバックリンクサムネイル表示

トラックバックにサムネイル画像を追加(CFDN様)を見て、できるのではなからうかと考えた。
そして意外と簡単にできた。

でもまだテストしてないからできたかまではわからないんだよなあ。
テスト先>Bloggerのメモ: Google SitemapをBlogger上で使うには

<BlogItemBacklinksEnabled>
<a name="links&quot;></a><h4>Links to this post:</h4>
<dl id="comments-block"&gt;
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>

Simple API

<!−−trackback_area−−>
<h3 id="trackback-top" title="「<%topentry_title>」には <%topentry_tb_num> 件のトラックバックがあります"><span class="num"><%topentry_tb_num></span>件のトラックバック</h3>
<!−−trackback−−>
<div class="section trackbackfield" id="trackback-<%tb_no>">
<h4 class="trackback-header">[<span class="hide">T</span><span class="num"><%tb_no></span>] <%tb_title></h4>
<div class="trackback-body">
<p><img src="http://img.simpleapi.net/small/<%tb_url>" width="100" height="100" alt="<%tb_blog_name>" class="thumb-l" /></p>
<%tb_excerpt>
</div>
<ul class="trackback-state">
<li class="trackback-date"><%tb_year>-<%tb_month>-<%tb_day></li>
<li class="trackback-site">発信元 : <a href="<%tb_url>" title="<%tb_title>"><%tb_blog_name></a></li>
</ul>
</div>
<!−−/trackback−−>
<dl class="tbadr">
<dt>トラックバックURL</dt>
<dd><%trackback_url></dd>
<dd><a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);">この記事に対してトラックバックを送信する(FC2ブログユーザー)</a></dd>
</dl>
<!−−/trackback_area−−>


FC2に最適化されているが、Bloggerのバックリンクにも活用できるはず。

木曜日, 4月 27, 2006

Google SitemapをBlogger上で使うには

GoogleSitemap(サイトマップ)を
Bloggerやその他sitemap.xmlに非対応なBlogで使う方法。
詳細>クリボウの Blogger Tips: Blogger でも Google Sitemaps



1、
まず、登録したいサイトのURLを追加する。
追加方法は簡単でTOPから上部のフォームで追加できる。










2、
登録後、「サイトの確認ステータス」で確認をクリックし次の画面に移る。

ここで「METAタグを追加する」を選択し表示されるタグを実際にBloggerのテンプレート(head内)にコピペする。
その後インデックスを再構築し、右図のようにチェックを入れた後「確認」する。








3、
「確認」後、次の画面が表示される。

この時点では自分のサイトに関するGoogleの情報を見ることができる。
GoogleBotの最終アクセス・Googleからのクエリ(過去3週間)・クロール情報・PageRankまでを利用できる。【診断&統計】







4、
次に「サイトマップ」を登録する。ちなみにここが重要。
sitemap.xmlに対応していない(サイトマップ関連ファイルを最上部ディレクトリに置けない)BlogでGoogleSitemapを使うには、RSS・Atomを利用しなくてはならない。





ここでは、BlogSpotのhttp://*****.blogspot.com/atom.xmlを登録すればいい。
ちなみに、RSS・Atomでサイトマップを作るので今まで投稿された情報は感知しないしできない(と思う)。めちゃめちゃ更新しないといけないのかも。





5、
すべてのボックスにチェックを入れること。
(サイトマップ追加はTOPまたは個別設定画面で可能。)







これで全て完了です。あとはGoogleBotが拾ってくれるのを待ちましょう。
※Atomを追加するときに、たまにエラーが出ますが気にせず続けてください。
BlogSpot諸君ならびにsitemap.xml非対応Blog諸君はここまでとなります。

6、追記(あまたのよの妄想)
クリボウの Blogger Tipsより、Google Sitemaps 用のコードを生成する '05/11は、Blogger上(最上部ディレクトリにsitemap.xmlが置ける環境;非BlogSpot)でGoogleSitemapを使うときの設定方法なのだが、気になった項目がある。
1.ATOM に全投稿の情報が載るようにする
Blogger の管理画面「設定 > フォーマット」から投稿表示数欄を 999 のようにすべての投稿が表示されるようにして「設定を保存」、「インデックスのみ」の再構築をします。
ってことは、この通りに設定したとしてAtomサイトマップの「再送信」を実行すると、今までの投稿内容をGoogleBotが拾ってくれるということになるのかなぁ?

日曜日, 1月 29, 2006

【テンプレート】KASANE

NovuさんのWordPress用テンプレートをBlogger用に改造したもの。
※再配布の許可をもらいました。
※テンプレート下部の作者情報は削除してはいけません。

画像などはこちらで
Download KASANE 1.1

#1/30 引用先のものをそのままコピペした為、問題が多々。修正はしたものの納得はしてない。(使ってみないと分からない)
#Searchがどうしても分からなかった。分かる人は自分で編集してください。
#<style type="text/css">は、<link rel="stylesheet" href="CSSを置いている場所" type="text/css" >でもイイです。


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<$BlogMetaData$>
<meta name="keywords" content="<$BlogTitle$>" />
<meta name="description" content="<$BlogTitle$>" />

<title><$BlogPageTitle$></title>

<style type="text/css">
#b-navbar {

height:0px;

visibility:hidden;

display:none

}

/*
Theme Name: KASANE
Theme URI: http://www.napdays.com/download/kasane/
Description: WordPress theme KASANE
Version: 1.1
Author: Novu
Author URI: http://www.napdays.com/
*/

/*INDEX
-------------------------------------------------
BASE
HEADER
CONTENT
SIDE BAR
COMMENT
CALENDAR
FOOTER
*/

/*BASE
-------------------------------------------------*/
body {
margin: 0;
padding: 0;
background: #eeeeee;
color: #333333;
text-align: center;
}

#page {
width: 760px;
margin: 0 auto;
padding: 30px 0 0 0;
background: url(/images/wrapper-bg.png) repeat-y;
_background: url(/images/wrapper-bg.gif) repeat-y;
text-align: left;
}

h1, h2, h3, h4, h5 {
font-family: "Trebuchet MS", Chicago, sans-serif;
font-size: 100%;
}

body, div, p, table, th, tr, td,
ol, ul, li, dl ,dt, dd, input, select, textarea, label, legend,
addres, abbr, blockquote {
font-family: Verdana, sans-serif;
font-size: 100%;
}

pre, code, kbd {
font-family: monospace;
font-size: 100%;
}

img { border: none; }

a:link{ color: #336699; }
a:visited{ color: #6699cc; }
a:hover{ color: #cc6666; }
a:active{ color: #cc6666; }

input, textarea {
margin: 0 0 3px 0;
padding: 2px;
border-top: 1px solid #999999;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #999999;
}

input#submit {
padding: 2px 5px;
border-top: 1px solid #cccccc;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #cccccc;
background: #cccccc;
}

hr { display: none; }

/*HEADER
-------------------------------------------------*/

#header {
width: 750px;
height: 150px;
margin: 0px 5px;
padding: 0;

background: #cccccc url(/images/header-bg-blue.gif) no-repeat;
/*
background: #cccccc url(/images/header-bg-green.gif) no-repeat; */
/*
background: #cccccc url(/images/header-bg-red.gif) no-repeat; */
/*
background: #cccccc url(/images/header-bg-gray.gif) no-repeat; */
}

#header h1 {
margin: 0;
padding: 50px 0 0 20px;
color: #ffffff;
font-size: 200%;
}

.description {
padding-left: 20px;
color: #ffffff;
font-size: 80%;
text-align: left;
}

#header a:link,
#header a:visited {
color: #ffffff;
text-decoration: none;
}


/*CONTENT
-------------------------------------------------*/

#content {
display: inline;
font-size: 80%;
}

.narrowcolumn {
float: left;
width: 510px;
margin: 30px 20px 0px 25px;
padding: 0 0 20px 0;
}

.widecolumn {
width: 600px;
margin: 0 100px;
padding: 20px 0;
background: #ffffff;
}

.navigation {
margin: 0 0 20px 0;
padding: 0;
text-align: center;
}

.navigation .alignright {
float: right;
margin: 0;
padding: 0;
}

.navigation .alignleft {
float: left;
margin: 0;
padding: 0;
}

.clear {
clear: both;
margin: 0;
padding: 0;
}

.post {
margin: 0 0 40px 0;
}

h2.pagetitle {
margin: 0 0 20px 0;
padding: 0;
color: #666;
font-size: 120%;
letter-spacing: 1px;
}

.post h2 {
margin: 0 0 5px 0;
padding: 0;
border-bottom: 1px solid #ddd;
font-size: 125%;
}

.post h2 a:link,
.post h2 a:visited { color: #666666; text-decoration: none; }
.post h2 a:hover,
.post h2 a:active { color: #cc6666; }

.smaller {
font-size: 87.5%;
}

.data {
margin: 0;
color: #666;
font-size: 87.5%;
}

.entry {
margin: 1.5em 0;
}

.entry * {
color: #4d4d4d;
line-height: 160%;
}

.postfooter {
margin: 1em 0 40px 0;
text-align: right;
}

.postmetadata {
clear: both;
margin: 1em 0 40px 0;
padding: 10px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
font-size: 87.5%;
text-align: left;
line-height: 150%;
}

/* ENTRY TAG */

img.alignright {
margin: 0 0 3px 5px;
}

img.alignleft {
margin: 0 5px 3px 0;
}

.alignright {
float: right;
}

.alignleft {
float: left
}

.entry ul,
.entry ol {
list-style-position : inside;
margin: 1em;
padding: 0;
}

.entry blockquote {
clear: both;
margin: 2em 1em;
padding: 1em;
background-color: #f7f7f7;
border-top: 1px double #eee;
border-bottom: 1px double #eee;
}

.entry blockquote p {
margin: 0;
}

pre {
overflow: auto;
width: auto !important;
width: 98%; /* for IE */
margin: 1em;
padding: 10px 10px 15px 10px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
background: #f7f7f7;
font-family: monospace;
}

.entry code {
font-family: 'Courier New', Courier, monospace;
}


/*SIDE BAR
-------------------------------------------------*/

#sidebar {
display: inline;
float: right;
width: 200px;
margin: 30px 5px 20px 0px;
padding: 0;
font-size: 80%;
}

#sidebar a { text-decoration: none; }

#sidebar h2 {
margin: 0 0 0.5em 0;
padding: 2px 20px;
background: #f7f7f7;
color: #808080;
font-weight: bold;
line-height: 1.5em;
}

#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
line-height: 150%;
}

#sidebar ul li ul {
margin: 0 20px 20px 20px;
}

#sidebar ul.children,
#sidebar li.pagenav ul ul {
margin: 0;
}

#sidebar ul.children li,
#sidebar li.pagenav ul ul li {
margin: 0;
margin-left: 1em;
}

#searchform {
width: 150px;
margin: 10px 20px 20px 20px;
padding: 0;
}

#sidebar #searchform #s {
display: block;
width: 150px;
margin: 0 0 3px 0;
padding: 2px;
border-top: 1px solid #999999;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #999999;
background: #fcfcfc;
}

#sidebar #searchsubmit {
margin: 0;
padding: 2px 5px;
border-top: 1px solid #cccccc;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #cccccc;
background: #cccccc;
}

/*CALENDAR
-------------------------------------------------*/

#wp-calendar {
width: 160px;
margin: 0 20px 20px 20px;
border-collapse: collapse;
border: 1px solid #ddd;
color: #666666;
text-align: center;
font-size: 87.5%;
}

#wp-calendar {
line-height: 1.8em;
}

#wp-calendar thead {
border: 1px solid #ddd;
}

#wp-calendar tbody {
border: 1px solid #ddd;
}

#wp-calendar tfoot {
border: 1px solid #ddd;
}

#wp-calendar td,
#wp-calendar th {
line-height: 160%;
text-align: center;
border: 1px solid #ddd;
}

#wp-calendar td#today {
border: 1px solid #cccccc;
background: #eee;
}

#wp-calendar th[abbr="Sunday"] {
color: #6699cc;
}

#wp-calendar th[abbr="Saturday"] {
color: #cc6666;
}

#wp-calendar a {
display: block;
text-decoration: none;
}

/*COMMENT
-------------------------------------------------*/

h3.respond {
color: #666666;
font-size: 100%;
}

#commentform {
width: 100%;
}

#commentform p {
font-size: 100%;
}

#commentform input,
#commentform textarea {
font-size: 100%;
}

h3#comments {
margin: 0 0 10px 0;
}

ol.commentlist {
list-style-position: inside;
margin: 0 0 40px 0;
padding: 0;
border-top: 1px solid #eee;
}

.commentlist li {
padding: 10px;
border-bottom: 1px solid #eee;
text-align: left;
}

.alt {
background-color: #f7f7f7;
}

.commentlist cite,
.commentlist cite a {
font-style: normal;
text-decoration: none;
}

.commentlist p {
line-height: 150%;
}


/*FOOTER
-------------------------------------------------*/

#footer {
clear: both;
width: 510px;
margin: 0 20px 0 25px;
padding: 0;
border-top: 1px solid #ddd;
background: transparent;
font-size: 80%;
}

#footer p {
margin: 0;
padding: 20px 0;
line-height: 150%;
}

</style>


<script type="text/javascript">

function sh (id) {

whichpost = document.getElementById(id);

if (whichpost.className=="show") {
whichpost.className="hide";
}
else {
if (whichpost.className=="hide") {
whichpost.className="show";
}
}
}


<ItemPage>
var hasChanged = 0;
var hostName = 'blogspot.com';

function setCookie (name, value, expires) {
document.cookie = name + '=' + escape(value) + '; expires=' + expires.toGMTString() + '; domain=' + hostName + '; path=/';
}

function getCookie (name) {
var key = name + '=';
var c = document.cookie;
var i = c.indexOf(key);
if (i < 0) return '';
var j = c.indexOf(';', i + key.length);
if (j < 0) j = c.length;
return unescape(c.substring(i + key.length, j));
}

function rememberMe (f) {
var now = new Date();
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
setCookie('author', f.anonName.value, now);
setCookie('site', f.anonURL.value, now);
}

function setFormValues (f) {
f.anonName.value = getCookie("author");
f.anonURL.value = getCookie("site");
}

function doLoaded () {
if (!document.frmComment) return;
setFormValues(document.frmComment);
if (document.frmComment.anonName.value)
document.frmComment.rememberInfo.checked = 1;
}
onload = doLoaded;

function escapeQuotes(text) {

text=text.replace(/'/g,"\\'");
text=text.replace(/\n/g,"\\n");
return text;
}


//Preview
function PreviewpostBody(){
if (cFrm.postBody.value=='') return;
var preview=window.open('','Preview','width=500,height=200');preview.document.open();
var text=cFrm.postBody.value;while(text.indexOf("\n") > -1)
text=text.replace("\n","<br/>");
preview.document.write('<html><style>*{font-size:11px;font-family:Verdana,Arial,Sans-Serif}<\/style><bo'+'dy>'+text+'<\/body><\/html>');
preview.document.close();
}
</ItemPage>
</script>



</head>
<body>

<div id="page">

<!-- header -->
<div id="header">
<h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1>
<div class="description"></div>
</div>
<hr />
<!-- /header -->
<div id="content" class="narrowcolumn">


<Blogger>

<!-- Begin .post -->

<div class="post">
<h2><a href="<$BlogItemUrl$>" title="Permanent Link to <$BlogItemTitle$>"><$BlogItemTitle$></a></h2>
<p class="data"><$BlogItemDateTime$></p>

<div class="entry">
<$BlogItemBody$>

<p class="postfooter">Posted by <$BlogItemAuthorNickname$></a>
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemPermalinkURL$>#comments"><$BlogItemCommentCount$> コメント</a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">Links to this Post</a></font>
</BlogItemBacklinksEnabled>
<$BlogItemControl$>

</p>
</div>
   </div>
<!-- End .post -->

<!-- Begin #comments -->

<ItemPage>

<div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>

<h2><$BlogItemCommentCount$> コメント</h2>

<dl id="comments-block">
<BlogItemComments>
<dt class="comment-data" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>,
<$BlogCommentAuthor$> said...
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>


<p class="comment-timestamp">


<!-- comment form -->
<tr>
<h3 id="respond">コメントを投稿する</h3>
<form name="cFrm" id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<div>
<input type="hidden" name="blogID" value="<$BlogID$>"/>
<input type="hidden" name="postID" value="<$BlogItemNumber$>"/>
<input type="hidden" name="isPopup" value="false"/>
<input type="hidden" name="iden" value="Other"/>
Name:<br />
<input type="text" name="anonName" maxlength="100" size="30" /><br />
Website:<br />
<input type="text" name="anonURL" maxlength="100" value="http://" size="30" /><br />
Comment:<br />
<textarea name="postBody" cols="40" rows="10"></textarea><br />
<script type="text/javascript">
//<![CDATA[
document.write('<input type="checkbox" id="remember"> Remember me<br \/>');
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var bgPosted = false;
var cFrm = document.getElementById('cFrm');
cFrm.target = 'bgpost';
cFrm.onsubmit = function(){return cFrmPost()};
if (document.cookie != '') {
cFrm.anonName.value = document.cookie.replace(/^.*anonName=?([^;]*);?.*$/, '$1');
cFrm.anonURL.value = document.cookie.replace(/^.*anonURL=?([^;]*);?.*$/, '$1');
}
cFrm.postBody.value = '';
function cFrmPost() {
with (cFrm) {
anonName.value = anonName.value.replace(/^\s+|\s+$/g, '');
anonURL.value = anonURL.value.replace(/^\s+|\s+$/g, '');
postBody.value = postBody.value.replace(/^\s+|\s+$/g, '');
if (anonName.value == '') {
alert('Please enter your name');
anonName.focus();
return false;
}
if (postBody.value == '') {
alert('Please enter a comment');
postBody.focus();
return false;
}
anonURL.value = anonURL.value.replace(/^http:\/\//g, '');
}
bgPosted = true;
document.cFrm.post.disabled=true;document.cFrm.post.value="Please wait...";
return true;
}
function bgpostLoad() {
if (bgPosted == true) {
if (cFrm.remember.checked) {
var expires = new Date();
expires.setFullYear(expires.getFullYear()+1);
document.cookie = "anonName=" + unescape(cFrm.anonName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonURL=" + unescape(cFrm.anonURL.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromName=" + unescape(cSend.fromName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromEmail=" + unescape(cSend.fromEmail.value) + "; path=/" + "; expires=" + expires.toGMTString();
}
window.location.reload();
}
}
document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"><\/iframe>');
//]]>
</script>
<input type="button" value="&nbsp;Preview&nbsp;" onclick="javascript:PreviewpostBody()" /> &nbsp; <input style=";font-weight:bold" type="submit" name="post" value="&nbsp;Post&nbsp;" id="FinalPublish" />
</div>
</form>


</p>

</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name="links&quot;></a><h4>Links to this post:</h4>
<dl id="comments-block"&gt;
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>



<p style="padding-left:20px;">
<a href="<$BlogURL$>">HOMEへ</a>
</p>
</div>
</ItemPage>

<!-- End #comments -->

</Blogger>
</div>


<!-- sidebar -->
<div id="sidebar">
<ul>

<li class="pagenav"><h2>Pages</h2><ul><li class="page_item"><a href="<$BlogOwnerProfileUrl$>" title="About">About This Blog</a></li>
<li class="page_item"><a href="http://" title="Archives">Unknown</a></li>
<li class="page_item"><a href="http://" title="Download">Unknown</a><ul>
<li class="page_item"><a href="http://" title="KASANE">Unknown</a> </li>
<li class="page_item"><a href="http://" title="Luster Brown">Unknown</a> </li>
<li class="page_item"><a href="http://" title="Luster Gray">Unknown</a> </li>
<li class="page_item"><a href="http://" title="naLightGreen">Unknown</a> </li>
</ul>
</li>
</ul></li>
<li id="calendar"><h2>Unknown</h2>


</li>

<li id="search"><h2>Search</h2>
<form method="get" id="searchform" action="http://search.blogger.com/?as_q=%s&ie=UTF-8&ui=blg&bl_url=life7-2ch-okiraku.blogspot.com&x=0&y=0">
<div><input type="text" value="" name="s" id="s" size="10" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form></li>

<li><h2>Archives</h2>

<script type="text/javascript">
var archives = new Array();
<BloggerArchives>
archives[archives.length] = new Array("<$BlogArchiveURL$>", "<$BlogArchiveName$>");
</BloggerArchives>
document.writeln("<select name='archivemenu' onchange='document.location.href=this.options[this.selectedIndex].value;'>");
document.writeln("<option value='" + location.href + "' selected>- Archives -</option>");
for (var i = archives.length - 1; i >= 0; i--) {
document.writeln("<option value='" + archives[i][0] + "'>" + archives[i][1] + "</option>");
}
<ArchivePage>document.writeln("<option value='./'>Current Posts</option>");</ArchivePage>
document.writeln("</select>");
</script>
<noscript>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</noscript>

</li>

<li><h2></h2>

</li>


<li><h2>Links</h2>
<ul>
<li><a href='http://www.google.com'>Google</a></li>
    </ul>
</li>


<li><h2>Meta:</h2>
   <ul>

   </ul>
</li>

</div>
<!-- /sidebar -->



<hr />
<div id="footer">
<p>
<a href="<$BlogURL$>"><$BlogTitle$></a> is proudly powered by <a href="http://www.blogger.com/">Blogger</a> <br /><a href="<$BlogURL$>/atom.xml">Entries (Atom)</a>
</p>
</div>

<!-- 作者情報(削除禁止) -->

<center><font size=-2>Template by <a href="http://www.napdays.com/">Napdays</a>
&copy; 2005 Novu</font></center>

<!-- 作者情報(削除禁止) -->

</div>

<!-- Gorgeous design by Michael Heilemann - http://binarybonsai.com/kubrick/ -->


</body>
</html>

月曜日, 1月 09, 2006

lightbox.js - Web2.0ライクな画像サムネイル生成

これは好きなように設定してください。
必要かといわれたら、そうでもないので。

テンプレート:<head>内に
<script type="text/javascript" src="lightbox.js"></script>
※lightbox.jsはどこかに置くこと。

実際に表示する時は
<a href="images/image1.jpg" rel="lightbox"><img src="image/image1-thumb.jpg" /></a>
を書いて投稿する。
※images/image1.jpg = 表示させたい画像 / image/image1-thumb.jpg = postbody上に表示させるもの。



■Lightbox JS
ここからCSSとjs、画像ファイルを持ってくる。
CSSは直接書いてもよし。
CSSをどこかに置いてテンプレートに書くときは
<link rel="stylesheet" href="ここに置いた先URLの" type="text/css" />

日曜日, 11月 20, 2005

アーカイブの並びを逆転する

どういったことかといえば、サイドバーのArchivesは古い順に上から並ぶが、
このコードを使うことで上下を逆転し、新しいものを上に持っていくことが出来る。

<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</ul>

土曜日, 11月 19, 2005

Backlinksについて

BloggerHelp>バックリンクとその使用方法について教えてください。
相手のBlogにリンクすると、その記事へのリンクをGoogleが発見し相互にリンクする仕組み。
トラックバックとは違い、タイトルだけ表示されるが利用価値は十分である。

注意:公式以外のテンプレートを使用する場合、設定→コメントで解除する必要がある。
だが、このときに表示されるコードをそのままコピーしてする際に注意してもらいたいのは、

  1. コードに"¥(\)"が余計に入っているので、$前後にあるものは消すこと。
  2. <a href="<$BlogItemPermalinkURL$>#links">の>の位置が<a href="<$BlogItemPermalinkURL$#links>">となっているので、訂正すること。
以上の2点に注意すれば、問題なく使えるようになる。
BacklinksはBlogger以外のBlogでもリンクを貼ることで表示されるので、気にせず使える。

JavaScriptを使った記事の省略

BloggerHelp>投稿に表示/非表示のリンクを設定するにはどうすればよいですか。

JavaScriptを使うことで利用できる。
Read Moreとは違い、本文がすべて略されるので注意。

Read Moreを搭載するには

Read More、日本のBlogでよく見かける「続きを読む」を搭載する方法。

BloggerHelp>省略版の投稿の要約部分を作成するにはどうすればよいですか。

但し、このコードを使用すると追記が無いのにもかかわらす"Read More"が入ってしまうので、
PrestonCafeより、次のコードを代用するとよい。


<mainorarchivepage><a href="http://www.blogger.com/%3C$BlogItemPermalinkURL$%3E">
title="Read More!">More...</a></mainorarchivepage>
<p class="post-footer">posted by <$BlogItemAuthorNickname$>
at <a href="http://www.blogger.com/%3C$BlogItemPermalinkUrl$%3E" title="">link"><$BlogItemDateTime$></a> |
<mainorarchivepage><blogitemcommentsenabled><a class="comment-link" href="http://www.blogger.com/%3C$BlogItemPermalinkURL$%3E#comments">
title="comments"><$BlogItemCommentCount$> comments</a>
</blogitemcommentsenabled></mainorarchivepage>
<$BlogItemControl$></p>

E-mailコメント投稿フォームを搭載するには

通常のコメントではなく、E-mailによるコメント投稿フォームのコード



<div class="hide" id="sendmail">
<form id="cSend" action="http://www.blogger.com/email-post.do" method="post">
<div class="comments-open">
<h2 class="comments-open-header">E-mail this post</h2>
<div class="comments-open-content">
<input type="hidden" name="blogID" value="<$BlogID$>" />
<input type="hidden" name="postID" value="<$BlogItemNumber$>" />
<input type="hidden" name="returnTo" value="<$BlogURL$>" />
<input type="text" name="fromName" class="inputCom" id="fromName" size="20" value="Your name" onfocus="value=''" />
<input type="text" name="fromEmail" class="inputCom" id="fromEmail" size="20" value="Your email" onfocus="value=''" />
<input type="text" name="toEmail" class="inputCom" id="toEmail" size="20" value="Your friend's email" onfocus="value=''" /><br />
<input type="text" name="messageBody" class="inputCom" size="60" id="messageBody" value="Your message here" maxlength="300" onfocus="value=''"></textarea>

<script type="text/javascript">
//<![CDATA[
var bgSended = false;
var cSend = document.getElementById('cSend');
cSend.target = 'bgSend';
if (cSend.addEventListener) {
cSend.addEventListener('submit', function(){return cSendPost()}, false);
} else {
cSend.onsubmit = function(){return cSendPost()};
}
if (document.cookie != '') {
cSend.fromName.value = document.cookie.replace(/^.*fromName=?([^;]*);?.*$/, '$1');
cSend.fromEmail.value = document.cookie.replace(/^.*fromEmail=?([^;]*);?.*$/, '$1');
}
function cSendPost() {
with (cSend) {
fromName.value = fromName.value.replace(/^\s+|\s+$/g, '');
fromEmail.value = fromEmail.value.replace(/^\s+|\s+$/g, '');
if (fromName.value == '') {
alert('Please enter your name');
fromName.focus();
return false;
}
if (fromEmail.value == '') {
alert('Please enter your email');
fromEmail.focus();
return false;
}
if (toEmail.value == '') {
alert('Please enter your friend\'s email');
toEmail.focus();
return false;
}
}
bgSended = true;
return true;
}
function bgSendLoad() {
if (bgSended == true) {
if (cSend.notforget.checked) {
var expires = new Date();
expires.setFullYear(expires.getFullYear()+1);
document.cookie = "fromName=" + unescape(cSend.fromName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromEmail=" + unescape(cSend.fromEmail.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonName=" + unescape(cFrm.anonName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonURL=" + unescape(cFrm.anonURL.value) + "; path=/" + "; expires=" + expires.toGMTString();
}
alert('Your message has been sent');
}
}
document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgSend" onload="bgSendLoad()"></iframe>');
//]]>
</script>

<input type="submit" class="inputCom" name="post" value="Envoyer" /><br />
<input type="checkbox" id="notforget"> Remenber me (<a href="javascript:sh('explanation')">?</a>)
<p class="hide" id="explanation">
<br />
<br />
All personal information that you provide here will be governed by the Privacy Policy of Blogger.com. <a href="http://www.blogger.com/terms.g">More...</a>
</p>
</div>
</div>
</form>

</div>
</div>

サイドバーに"最近のコメント一覧"を搭載する

BloggerHacksより引用。
完成度は高いが、テンプレートによっては障害を伴う。
その都度、修正するよう。

尚、コード上部のOPTIONSで詳細設定が可能。


次のコード(もしくはそれに近いもの)をテンプレートで見つけ出す。

<h2 class="sidebar-title">Previous</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

<MainOrArchivePage>
<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</ul>
</MainOrArchivePage>


それに続く形で次のコードを貼り付ける。

<!-- **** FARRAGO RECENT COMMENTS HACK **** -->
<!-- Version 1.03 -->
<!-- Copyright © 2004 Ebenezer Orthodoxy -->
<!-- http://boggerhacks.blogspot.com -->
<!-- ************** OPTIONS *************** -->
<script type="text/javascript" language="JavaScript1.2">
var titleText = "Recent Comments";
var numberToShow = 5;
var displayTemplate = "[name]:<br/>[title]";
var nameIsLink = true;
</script>
<!-- ********* CODE DO NOT CHANGE ******** -->
<script type="text/javascript" language="JavaScript1.2">
var comments=new Array(0);var title = "";
var itemurl = "";
function getSortDate(strDate){var d=new Date(strDate);
var day=''+d.getDate();if(day.length==1)day='0'+day;
var month=''+(d.getMonth()+1);if(month.length==1)
month='0'+month;var hour=''+d.getHours();
if(hour.length==1)hour='0'+hour;var min=''+
d.getMinutes();if(min.length==1)min='0'+min;var sec=''+
d.getSeconds();if(sec.length==1)sec= '0'+sec;
var sortDate=''+d.getFullYear()+month+day+hour+min+sec;
return sortDate;}
function recentComment(t,u,i,a,d){var rcmnt=
document.getElementById('frch'+i).innerHTML;
while(rcmnt.indexOf("\n") > -1)rcmnt=
rcmnt.replace("\n","");while(rcmnt.indexOf(" />") > -1)
rcmnt=rcmnt.replace(" />","/>");
while(rcmnt.indexOf(" <a/>") > -1)rcmnt=
rcmnt.replace(" <a/>","<a/>");var author=a;var pos=
rcmnt.toLowerCase().lastIndexOf('<br><a></a>posted by');
var pos2=
rcmnt.toLowerCase().lastIndexOf('<br><a></a><a></a>');
var pos3=
rcmnt.toLowerCase().lastIndexOf('<br/><a/><a/>');
var pos4=
rcmnt.toLowerCase().lastIndexOf('<br/><a></a><a></a>');
var aoffset=pos+6;if (pos3 > -1) pos2=pos3;
if (pos4 > -1) pos2=pos4;
if (pos2 > -1){pos=pos2;aoffset=
rcmnt.toLowerCase().lastIndexOf('<a><b> </b></a>');
if (aoffset==-1)aoffset=
rcmnt.toLowerCase().lastIndexOf('<a><b></b></a>')-1;}
if (pos > -1){author=
rcmnt.substr(aoffset+15,rcmnt.length-1);var expt="";
expt=rcmnt.substr(0,pos-4).replace(/(<([^>]+)>)/ig,"");}
else expt=rcmnt.replace(/(<([^>]+)>)/ig,"");
author=author.replace("<A ","<a ");
if (expt.length > 50){expt=expt.substr(0,50);
if (expt.lastIndexOf(' ') > -1)
expt=expt.substr(0,expt.lastIndexOf(' '));expt+='...';}
expt=expt.replace('"',"\"");expt=expt.replace("'","\'");
if (!nameIsLink)author=author.replace(/(<([^>]+)>)/ig,"");
var st=getSortDate(d)+'<li>'+displayTemplate+'</li>';
st=st.replace('[name]',author);
st=st.replace('[title]','<a title="'+expt+'" href="'+
u+'#c'+i+'">'+t+'</a>');comments.push(st);}</script>
<MainPage><h2 class="sidebar-title">
<script type="text/javascript" language="JavaScript1.2">
document.write(titleText+'</h2>');</script>
<Blogger>
<span id="frcht<$BlogItemNumber$>"
style="visibility:hidden;position:absolute;">
<BlogItemTitle><$BlogItemTitle$></BlogItemTitle></span>
<script type="text/javascript" language="JavaScript1.2">
title=
document.getElementById('frcht<$BlogItemNumber$>').innerHTML;
itemurl='<$BlogItemPermalinkURL$>';</script>
<BlogItemCommentsEnabled><BlogItemComments>
<span id="frch<$BlogCommentNumber$>"
style="visibility:hidden;position:absolute;">
<$BlogCommentBody$></span>
<script type="text/javascript" language="JavaScript1.2">
recentComment(title,itemurl,'<$BlogCommentNumber$>',
'<$BlogCommentAuthor$>','<$BlogCommentDateTime$>');
</script></BlogItemComments>
</BlogItemCommentsEnabled></Blogger><ul>
<script type="text/javascript" language="JavaScript1.2">
comments.sort();comments.reverse();
for (i=0; i<10 && i < comments.length && i < numberToShow; i++){
var s=comments[i];s=s.substr(14,s.length-1); document.write(s);}
</script><br/><br/><span
style="font-size:7pt;text-align:center;width:100%;border-top:1px dashed;">
<a title="Farrago Recent Comments Hack from BloggerHacks"
href="http://bloggerhacks.blogspot.com">BloggerHacks</a> </span>
</ul></MainPage>
<!-- END FARRAGO RECENT COMMENTS HACK -->


また、タグの最後の部分に開発者Blogへのリンクが張られるが、気になるのであれば削除してもかまわない。

コメント投稿フォーム Ver.3

コメント投稿フォームVer.1およびVer.2以上で完成度の高いもの。
以下、BloggerHacksより引用。


<!-- ** BLOGGER COMMENTS METEMPSYCHOSIS HACK ** -->
<!-- Version 1.03 -->
<!-- Copyright © 2004 Ebenezer Orthodoxy -->
<!-- http://boggerhacks.blogspot.com -->
<!-- -->
<!-- Modify the styles and options below to -->
<!-- customize the look of the comment form. -->
<!-- ***************** STYLES ***************** -->
<style type="text/css">
<!--
.commentForm
{ border-top:1px solid rgb(0,0,0);
border-bottom:1px solid rgb(0,0,0);
font-size:8pt;
width: 100%;}

.caption
{font-size:10pt;
text-align:center;
width: 400px;}

.nameBox
{width: 200px;
font-size:8pt;}

.emailBox
{width: 200px;
font-size:8pt;}

.urlBox
{width: 355px;
font-size:8pt;}

.toolbarBox
{width: 397px;
font-size:8pt;
padding:2px;
}

.commentBox
{width: 400px;
font-size:8pt;}

.buttonsDiv
{width: 400px;
text-align:center;}

.commentButton
{font-size:8pt;}

.previewButton
{font-size:8pt;}

a.toolbarButton
{text-decoration:none;
color: rgb(0,0,0);
border-width: 1px;
padding: 0px 3px 0px 3px;
border-style: outset;}

a.toolbarButton:hover
{text-decoration:none;
cursor: default;}

a.toolbarButton:visited
{color: rgb(0,0,0);
text-decoration:none;}

a.toolbarPressed
{text-decoration:none;
color: rgb(0,0,0);
border-width: 1px;
padding: 0px 3px 0px 3px;
cursor: default;
border-style: inset;}
-->
</style>
<!-- ***************** OPTIONS ****************** -->
<script type="text/javascript" language="JavaScript1.2">
var formCaption= "Post a Comment";
var labelWidth = 40;
var nameLabel = "Name";
var emailLabel = "Email";
var urlLabel = "URL";
var rememberLabel = "Remember Me";
var postedByText = "Posted by";
var commentButtonText = "Post Comment";
var previewButtonText = "Preview";
var previewWindowTitle = "Comment Preview";
var confirmBeforePost = true;
var confirmText = "Post this comment?";
var boldButtonText = "B";
var italicsButtonText = "I";
var linkButtonText = "Link";
var linkPrompt = "Link Text:";
var urlPrompt = "Link URL:";
var quoteButtonText = "Quote";
var quotePrompt = "Use your mouse to select the text"+
" in the comment you want to quote.\n"+
"Then press the quote button.";
</script>
<!-- ******************* CODE ******************* -->
<!-- ************** DO NOT MODIFY *************** -->
<div class="commentForm">
<script type="text/javascript" language="JavaScript1.2">
var blogId;var postId;var clink='<$BlogItemCreate$>';
var today=new Date();var expiry=new Date(today.getTime()+
90*24*60*60*1000);var bpos=clink.indexOf('?');
var endpos=clink.indexOf('">');
var ppos=clink.indexOf('&'+'amp'+';postID=');if(bpos > -1){
blogId=clink.substring(bpos+8,ppos);}if (ppos > -1){
postId=clink.substring(ppos+12,endpos);}
function getAuthorInfo(frm){
var text="";var author=frm.author.value;
var email=frm.email.value; var url=frm.url.value;if
(author=="")author="Anonymous";if(url || email){
email=email.replace('@',' at ');
while(email.indexOf(".") > -1)
email=email.replace("."," dot ");
text+=postedByText+'<a><b> </b></a>'+
'<a title="'+email+'" href=';
if (url)text+='"'+url+'"';
else text+='"'+document.location+'"';
text+='>'+author+'</a>';}else
text+=postedByText+'<a><b> </b></a>'+author;
return text;}
function addTags(ltag,rtag){
if (document.all){var txt=
document.selection.createRange().text;
if (txt!=""){
document.selection.createRange().text=ltag+
txt+rtag;}}else if
(document.getElementById){
ta=document.CommentForm.Comment;
var sLen=ta.textLength;
var sStart=ta.selectionStart;
var sEnd=ta.selectionEnd;
if (rtag != '' && sStart==sEnd)return;
if(sEnd==1 || sEnd==2)sEnd=sLen;
var s1=(ta.value).substring(0,sStart);
var s2=(ta.value).substring(sStart,sEnd)
var s3=(ta.value).substring(sEnd,sLen);
ta.value=s1+ltag+s2+rtag+s3;}}
function makeLink()
{var ta = document.CommentForm.Comment;
if (document.all &&
document.selection.createRange().text){
linkurl=prompt(urlPrompt,'http://');
if (linkurl==null || linkurl=='' ||
linkurl=='http://')return;
addTags('<a href="'+linkurl+'">','</a>');
}else if (document.getElementById &&
ta.selectionStart < ta.selectionEnd)
{linkurl=prompt(urlPrompt,'http://');
if (linkurl==null || linkurl=='' ||
linkurl=='http://')return;
addTags('<a href="'+linkurl+'">','</a>');
}else{var txt=prompt(linkPrompt,'');
if (txt==null || txt=='')return;
var linkurl=prompt(urlPrompt,'http://');
if (linkurl==null || linkurl=='' ||
linkurl=='http://')return;
insertText('<a href="'+linkurl+'">'+
txt+'</a>');}}
function storeCaret(ta){if
(ta.createTextRange)ta.caretPos=
document.selection.createRange().duplicate();}
function insertText(txt)
{var ta=document.CommentForm.Comment;
if (document.all){if
(ta.createTextRange && ta.caretPos){
var caretPos = ta.caretPos;caretPos.text=
caretPos.text.charAt(caretPos.text.length-1)==
' '?txt+caretPos.text+' ':txt+caretPos.text;}
else{ta.value = ta.value + txt;}}else if
(document.getElementById){addTags(txt,'');}}
function boldText(){addTags('<b>','</b>');}
function italText(){addTags('<i>','</i>');}
function quoteText()
{var txt=(document.all)?
document.selection.createRange().text:
window.getSelection();if(txt==null || txt==''){
alert(quotePrompt);
return;}insertText('"<i>'+txt+'</i>"');}
function press(lnk){lnk.className="toolbarPressed";}
function unpress(lnk){lnk.className="toolbarButton";}
function PreviewComment(frm){if (frm.Comment.value=='')
return;var preview=window.open('','Preview',
'width=400,height=300,resizable=yes,toolbar=no,'+
'location=no,directories=no,status=yes,scrollbars=yes,'+
'menubar=no');preview.document.open();
var text=frm.Comment.value+"<br/><br/>"+
getAuthorInfo(frm);while(text.indexOf("\n") > -1)
text=text.replace("\n","<br/>");
preview.document.write('<html><head><title>'+previewWindowTitle+
'</title></head><bo'+'dy>'+text+'</body></html>');
preview.document.close();}
function PostComment(frm){if (frm.Comment.value=="" ||
(confirmBeforePost &&
confirm(confirmText)==false))return;
if(frm.rememberMe.checked){
setCookie('author',frm.author.value);
setCookie('email',frm.email.value);
setCookie('url',frm.url.value);
setCookie('remember','true');}else{
setCookie('remember','false');}
var txt=frm.Comment.value;
txt=txt.replace('</i>','</i>&'+'#'+'160;');
txt= txt.replace('</b>','</b>&'+'#'+'160;');
txt=txt.replace('</a>','</a>&'+'#'+'160;');
frm.postBody.value=txt;
frm.postBody.value+="&"+"#1"+"60;\n\n<a></a><a></a>"+
getAuthorInfo(frm);
frm.submit();}
function toggleRemember(frm){if(frm.rememberMe.checked)
setCookie('remember','true');else
setCookie('remember','false');}
function getCookie(name){var rexp = new RegExp(name +
"=([^;]+)");var val=rexp.exec(document.cookie);
return (val!=null)?unescape(val[1]):"";}
function setCookie(name, value){document.cookie=name+
"="+escape(value)+";expires="+expiry.toGMTString();}
document.write('<div id="post" class="caption">'+
formCaption+'<br/>');if(!document.all)
document.write("<br/>");</script></div>
<form name="CommentForm"
action="http://www.blogger.com/add-comment.do"
method="post"><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">'+nameLabel);</script>:</div>
<input type="text" name="author" class="nameBox"
tabindex="1"/></div><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">'+emailLabel);</script>:</div>
<input type="text" name="email" class="emailBox"
tabindex="2"/></div><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">'+urlLabel);</script>:</div>
<input type="text" name="url" class="urlBox"
tabindex="3"/></div><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">&'+'#160');</script></div>
<input type="checkbox" name="rememberMe"
tabindex="4" style="vertical-align: middle;"
onclick="toggleRemember(document.CommentForm);">
<script type="text/javascript" language="JavaScript1.2">
document.write(rememberLabel);</script></input></div>
<div class="toolbarBox" style="text-align:right">
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:boldText();"><b>
<script type="text/javascript" language="JavaScript1.2">
document.write(boldButtonText);</script></b></a>
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:italText();"><i>
<script type="text/javascript" language="JavaScript1.2">
document.write(italicsButtonText);</script></i></a>
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:makeLink();">
<script type="text/javascript" language="JavaScript1.2">
document.write(linkButtonText);</script></a>
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:quoteText();">
<script type="text/javascript" language="JavaScript1.2">
document.write(quoteButtonText);</script></a></div>
<script type="text/javascript" language="JavaScript1.2">
document.write('<input type="hidden" name="blogID" value="'+
blogId+'"/>\n<input type="hidden" name="postID" value="'+
postId+'"/>');</script><textarea name="Comment" rows="10"
class="commentBox" tabindex="5" onselect="storeCaret(this);"
onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea>
<input type="hidden" name="postBody"/>
<input type="hidden" name="anonymous" value="y"/>
<div class="buttonsDiv">
<script type="text/javascript" language="JavaScript1.2">
document.write('<input type="button"'+
' class="commentButton" tabindex="6" name="post"'+
' onclick="PostComment(document.CommentForm);" value="'+
commentButtonText+'"/>');
document.write('<input type="button" class="previewButton"'+
' tabindex="7" name="preview"'+
' onclick="PreviewComment(document.CommentForm);" value="'+
previewButtonText+'"/>');</script><br/>
<span style="font-size:7pt;text-align:center;">
<a title="Metempsychosis Comments Hack from BloggerHacks"
href="http://bloggerhacks.blogspot.com">BloggerHacks</a>
</span></div></form>
<script type="text/javascript" language="JavaScript1.2">
var cfrm=document.CommentForm;var remember=
getCookie('remember');if(remember=="true")
{cfrm.rememberMe.checked=true;cfrm.author.value=
getCookie('author');cfrm.email.value=getCookie('email');
cfrm.url.value=getCookie('url');}
</script></div>
<!-- ***********END METEMPSYCHOSIS HACK********** -->

コメント投稿フォーム Ver.2

コメント投稿フォーム

まず、<head>内に以下のコードを貼る(これが無いとPreviewやCookie処理がされない)。


<script type="text/javascript">

function sh (id) {

whichpost = document.getElementById(id);

if (whichpost.className=="show") {
whichpost.className="hide";
}
else {
if (whichpost.className=="hide") {
whichpost.className="show";
}
}
}


<ItemPage>
var hasChanged = 0;
var hostName = 'blogspot.com';

function setCookie (name, value, expires) {
document.cookie = name + '=' + escape(value) + '; expires=' + expires.toGMTString() + '; domain=' + hostName + '; path=/';
}

function getCookie (name) {
var key = name + '=';
var c = document.cookie;
var i = c.indexOf(key);
if (i < 0) return '';
var j = c.indexOf(';', i + key.length);
if (j < 0) j = c.length;
return unescape(c.substring(i + key.length, j));
}

function rememberMe (f) {
var now = new Date();
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
setCookie('author', f.anonName.value, now);
setCookie('site', f.anonURL.value, now);
}

function setFormValues (f) {
f.anonName.value = getCookie("author");
f.anonURL.value = getCookie("site");
}

function doLoaded () {
if (!document.frmComment) return;
setFormValues(document.frmComment);
if (document.frmComment.anonName.value)
document.frmComment.rememberInfo.checked = 1;
}
onload = doLoaded;

function escapeQuotes(text) {

text=text.replace(/'/g,"\\'");
text=text.replace(/\n/g,"\\n");
return text;
}

function insertTags(tagOpen, tagClose, sampleText) {

var txtarea = document.cFrm.postBody;
// IE
if(document.selection) {
var theSelection = document.selection.createRange().text;
if(!theSelection) { theSelection=sampleText;}
txtarea.focus();
if(theSelection.charAt(theSelection.length - 1) == " "){
theSelection = theSelection.substring(0, theSelection.length - 1);
document.selection.createRange().text = tagOpen + theSelection + tagClose + " ";
} else {
document.selection.createRange().text = tagOpen + theSelection + tagClose;
}
// Mozilla
} else if(txtarea.selectionStart || txtarea.selectionStart == '0') {
var startPos = txtarea.selectionStart;
var endPos = txtarea.selectionEnd;
var myText = (txtarea.value).substring(startPos, endPos);
if(!myText) { myText=sampleText;}
if(myText.charAt(myText.length - 1) == " "){ // exclude ending space char, if any
subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " ";
} else {
subst = tagOpen + myText + tagClose;
}
txtarea.value = txtarea.value.substring(0, startPos) + subst + txtarea.value.substring(endPos, txtarea.value.length);
txtarea.focus();
var cPos=startPos+(tagOpen.length+myText.length+tagClose.length);
txtarea.selectionStart=cPos;
txtarea.selectionEnd=cPos;
// All others
} else {
tagOpen=tagOpen.replace(/\n/g,"");
tagClose=tagClose.replace(/\n/g,"");
document.infoform.infobox.value=tagOpen+sampleText+tagClose;
txtarea.focus();
}
if (txtarea.createTextRange) txtarea.caretPos = document.selection.createRange().duplicate();
}


//Preview
function PreviewpostBody(){
if (cFrm.postBody.value=='') return;
var preview=window.open('','Preview','width=500,height=200');preview.document.open();
var text=cFrm.postBody.value;while(text.indexOf("\n") > -1)
text=text.replace("\n","<br/>");
preview.document.write('<html><style>*{font-size:11px;font-family:Verdana,Arial,Sans-Serif}<\/style><bo'+'dy>'+text+'<\/body><\/html>');
preview.document.close();
}
</ItemPage>
</script>


次に、コメント投稿フォームを実際にBlogger上に表示するには
テンプレートで<!$BlogItemCreate$>を以下のコードに置き換える。

<!-- comment form -->

<form name="form" id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<div class="comments-open">
<h2 class="comments-open-header">Add a comment</h2>
<div class="comments-open-content">
<div>
<input type="hidden" name="blogID" value="<$BlogID$>"/>
<input type="hidden" name="postID" value="<$BlogItemNumber$>"/>
<input type="hidden" name="isPopup" value="false"/>
<input type="hidden" name="iden" value="Other"/>
</div>
<p><label for="uname">Name:</label>
<input type="text" id="uname" name="anonName" maxlength="100" size="30" /></p>
<p><label for="url">Website:</label>
<input type="text" id="url" name="anonURL" maxlength="100" value="http://" size="30" /></p>
<p><label for="comment-body">Comment: &nbsp; &nbsp; &nbsp;
<img class="out" src="http://www.blogger.com/img/gl.bold.gif" width="18" height="18" align="middle" onMouseOver="this.className='over';sh('bold')" onMouseOut="this.className='out';sh('bold')" onClick='insertTags("<b>","</b>","")' /> &nbsp; <img class="out" src="http://www.blogger.com/img/gl.italic.gif" width="18" height="18" align="middle" onMouseOver="this.className='over';sh('italic')" onMouseOut="this.className='out';sh('italic')" onClick='insertTags("<i>","</i>","")' /> &nbsp; <img class="out" src="http://www.blogger.com/img/gl.link.gif" width="18" height="18" align="middle" onMouseOver="this.className='over';sh('link')" onMouseOut="this.className='out';sh('link')" onClick='var lien = prompt("URL :","http://");if(lien!=""&&lien!=null&&lien!="http://"){insertTags("<a href=\"" + lien +"\">","</a>","")} else {}' /> &nbsp; <span id="bold" class="hide">Convert to <b>bold</b></span><span id="italic" class="hide">Convert to <i>italic</i></span><span id="link" class="hide">Convert to <a href="#">link</a></span></label>
<textarea id="comment-body" name="postBody" cols="40" rows="10"></textarea></p>
<script type="text/javascript">
//<![CDATA[
document.write('<p><label for="remember"><input type="checkbox" id="remember"> Remenber me ?</label></p>');
//]]>
</script>
</dl>
<script type="text/javascript">
//<![CDATA[
var bgPosted = false;
var cFrm = document.getElementById('cFrm');
cFrm.target = 'bgpost';
cFrm.onsubmit = function(){return cFrmPost()};
if (document.cookie != '') {
cFrm.anonName.value = document.cookie.replace(/^.*anonName=?([^;]*);?.*$/, '$1');
cFrm.anonURL.value = document.cookie.replace(/^.*anonURL=?([^;]*);?.*$/, '$1');
}
cFrm.postBody.value = '';
function cFrmPost() {
with (cFrm) {
anonName.value = anonName.value.replace(/^\s+|\s+$/g, '');
anonURL.value = anonURL.value.replace(/^\s+|\s+$/g, '');
postBody.value = postBody.value.replace(/^\s+|\s+$/g, '');
if (anonName.value == '') {
alert('Please enter your name');
anonName.focus();
return false;
}
if (postBody.value == '') {
alert('Please enter a comment');
postBody.focus();
return false;
}
anonURL.value = anonURL.value.replace(/^http:\/\//g, '');
}
bgPosted = true;
document.form.post.disabled=true;document.form.post.value="Please wait...";
return true;
}
function bgpostLoad() {
if (bgPosted == true) {
if (cFrm.remember.checked) {
var expires = new Date();
expires.setFullYear(expires.getFullYear()+1);
document.cookie = "anonName=" + unescape(cFrm.anonName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "anonURL=" + unescape(cFrm.anonURL.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromName=" + unescape(cSend.fromName.value) + "; path=/" + "; expires=" + expires.toGMTString();
document.cookie = "fromEmail=" + unescape(cSend.fromEmail.value) + "; path=/" + "; expires=" + expires.toGMTString();
}
window.location.reload();
}
}
document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"></iframe>');
//]]>
</script>
<div class="buttons">
<input type="button" id="comment-preview" value="&nbsp;Preview&nbsp;" onclick="javascript:PreviewpostBody()" /> &nbsp; <input style="font-weight:bold" type="submit" name="post" value="&nbsp;Post&nbsp;"/>
</div>
</form>