Showing posts with label About this blog. Show all posts
Showing posts with label About this blog. Show all posts

2008/02/22

AdSense インライン広告

今更ながら[レイアウト] - [ページ要素] - [ブログの投稿]で"投稿の間に広告を表示する"にチェックを入れてもうまくAdSenseが表示されなかった問題を解消。

実は純正テンプレートでも、インライン広告が表示されない(レイアウトで設定はできるけど…)テンプレートがあるようです。

"クリボウの Blogger Tips: Blogger に「AdSense インライン広告」登場"より引用

という事で、結局は下記赤字部分のコードを手書きで追記。

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>

</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>

[続きがあれば読む]

2008/02/19

タグ(ラベル)クラウド変更

STEP:1
cssに下記コードを追記

#labelCloud a {
text-decoration: none;
white-space: nowrap;
margin: 2px;
}
#labelCloud span.label_xs {
font-size : 80%;
line-height: 120%;
}
#labelCloud span.label_s {
font-size : 100%;
line-height: 120%;
}
#labelCloud span.label_m {
font-size : 120%;
font-weight: bold;
line-height: 120%;
}
#labelCloud span.label_l {
font-size : 140%;
font-weight: bold;
line-height: 120%;
}
#labelCloud span.label_xl {
font-size : 160%;
font-weight: bold;
line-height: 120%;
}

STEP:2
<b:widget id='Label1' locked='false' title='Labels' type='Label'>~</widget>を下記コードに書き換える。

<b:widget id='Label1' locked='false' title='ラベルクラウド' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<span id='labelCloud'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<b:if cond='data:label.count > 20'>
<a expr:href='data:label.url'><span class='label_xl' expr:title='data:label.count'>
<data:label.name/>
</span>
</a>
<b:else/>
<b:if cond='data:label.count > 10'>
<a expr:href='data:label.url'>
<span class='label_l' expr:title='data:label.count'>
<data:label.name/>
</span>
</a>
<b:else/>
<b:if cond='data:label.count > 5'>
<a expr:href='data:label.url'>
<span class='label_m' expr:title='data:label.count'>
<data:label.name/>
</span>
</a>
<b:else/><b:if cond='data:label.count > 1'>
<a expr:href='data:label.url'>
<span class='label_s' expr:title='data:label.count'>
<data:label.name/>
</span>
</a>
<b:else/>
<a expr:href='data:label.url'>
<span class='label_xs' expr:title='data:label.count'>
<data:label.name/>
</span>
</a>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:loop>
</span>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[続きがあれば読む]

2008/02/18

サイドバーにメールアドレスを追加

STEP:1
メモ帳に下記のコードを貼り付けて、"mail.js"という名前で保存して、適当なところにアップロードする。

mailid = new Array();
idnum=0;
function mail(ad,expre){
idnum += 1;
ad=ad.replace(/¥@/g,"¥.");
ad=ad.replace(/¥%/,"¥@");
if(expre==""){
expre=ad;
}
if (expre=="nolink") {
document.write(ad);
} else {
mailid[idnum] = ad;
document.write("<a href=¥"javascript:mailto('" + idnum + "');¥">" + expre + "</a>");
}
}
function mailto(i){
location.href="mailto:" + mailid[i];
}

STEP:2
<head>~</head>に下記赤字のコードを追記する。

<SCRIPT type='text/javascript' language='JavaScript' src='(mail.jsのパス)'></SCRIPT>
</head>

STEP:3
[レイアウト] - [ページ要素の追加] - [HTML/JavaScript]を[ブログに追加]して、"コンテンツ"に下記のコードを書いて[変更を保存]

a)****@gmail.comというメールアドレスを書きたいとき

<SCRIPT type='text/javascript'>
<!--mail("****%gmail@com","");//-->
</SCRIPT>

b)画像にリンクさせたいとき

<SCRIPT type='text/javascript'>
<!--mail("****%gmail@com","<img src='(画像のパス)'>");//-->
</SCRIPT>

GMail, Hotmail, MSN, Yahooあたりならジェネレーターでアドレス入りの画像を簡単に作れる。

[続きがあれば読む]

track feedを追加

"HPにリンクが貼られると、それが初めてクリックされた瞬間に RSS でリンクが張られたことをお知らせ"してくれるtrack feedを追加。

=== 使い方 ===
1. メールアドレスを入力すると
2. 設定方法がメールで届きます
3. 指定されたスクリプトをあなたのHPに埋め込めば完了
4. 他のサイトからリンクが張られると、初めてクリックされた瞬間に更新通知が RSS で届きます

"リンクが張られた瞬時にRSSで通知するアクセス解析ツール - トラックフィード"より引用

入力したアドレスに設置用のコードが送られてくるので、設置したい場所にコードを張り付ければOK。

<a href="http://trackfeed.com/">
<img name="trackfeed_banner" src="http://img.trackfeed.com/img/tfg.gif" alt="track feed" border="0"/></a>
<script src="http://script.trackfeed.com/usr/**********.js"></script>

送られてきたコードをそのまま貼り付けるとエラーになるから、上記赤字の"/"を書き足して貼り付けるとHappy

[続きがあれば読む]

"前の投稿"と"次の投稿"の位置を入れ替える

下記のコードを

#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}

下記のように$statrSideと$endSideを入れ替える。

#blog-pager-newer-link {
float: $endSide;
}
#blog-pager-older-link {
float: $startSide;
}

[続きがあれば読む]

ファビコンをつける

STEP:1
ココの"Sorce image"に用意した画像のパスをに入力して、"Generate Favicon.ico"をクリックする。

STEP:2
プレビューが表示されたら、"Download Favicon"をクリックしたファビコン用画像をダウンロードする。(zipで圧縮されている)

STEP:3
ダウンロードしたファイル(favicon_********_****.zip)を解凍して、favicon.icoをアップロードする。

Google Page Creatorにアップする場合は、favicon.icoとは違う名前にリネームする必要が有る。

Google Pages へは favicon.ico というファイル名ではアップロードできない。というのも、Google Pages の favicon.ico とパスと衝突してしまうから。ここの例のやうに favicon.ico とは違う名前に変更してから、ファイルをアップされたし

"clmemo@aka: Blogger に favicon を付けた"より引用

step:4
<head>~</head>に下記のコードを追記する。

<link href="'http://shakingidea.googlepages.com/blogger_favicon1.ico'" rel="'shortcut"><link href="'http://shakingidea.googlepages.com/blogger_favicon.ico1'" rel="'icon'/">

[続きがあれば読む]

トラックバック(haloscan)を追加する

STEP:1
<head>~</head>に下記のコードを追記する。

<script src="'http://www.haloscan.com/load/shakingidea'" type="'text/javascript'"></script>
</head>

STEP:2
下記コードを

<span class="'post-comment-link'">
<b:if cond="'data:blog.pageType">
<b:if cond="'data:post.allowComments'">
<a class="'comment-link'" href="'data:post.addCommentUrl'" onclick="'data:post.addCommentOnclick'">
<b:if cond="'data:post.numComments"> 1 <data:top.commentlabel/>
<b:else/>
<data:post.numcomments/>
<data:top.commentlabelplural/>
</b:if>
</a>
</b:if>
</b:if>
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'>
<data:top.backlinkLabel/>
</a>
</b:if>
</b:if>
</span>

を下記のように書き換える。

<span class="'post-comment-link'">
<b:if cond="'data:blog.pageType">
<b:if cond="'data:post.allowComments'">
<a class="'comment-link'" href="'data:post.addCommentUrl'" onclick="'data:post.addCommentOnclick'">
<b:if cond="'data:post.numComments"> 1 <data:top.commentlabel/>
<b:else/>
<data:post.numcomments/>
<data:top.commentlabelplural/>
</b:if>
</a>
</b:if>
</b:if>
</span>
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'>
<data:top.backlinkLabel/>
</a>
</b:if>
</b:if>
</span>
<span>
<a expr:href='"javascript:HaloScanTB(" + "\"" + data:post.id + "\"" + ");"' target="_self">
<script type="text/javascript">
postCountTB('<data:post.id/>');
</script>
</a>
</span>


[続きがあれば読む]

"サイドバーのリスト"のスタイル

".sidebar li"のスタイルを書き換える。

テンプレート"Washed Denim"のデフォルトスタイルを

.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 15px;
text-indent: -15px;
line-height: 1.5em;
}
こう書き換える。

.sidebar li {
padding: 0 0 4px 17px;
background: url(http://shakingidea.googlepages.com/li_ebyin.gif) no-repeat 0 3px;
}

[続きがあれば読む]

"コード <pre class="code">"を書く時のスタイル

cssファイルに下記コードを追記する。


pre.code {
margin: 0 0 1em 20px;
padding: 5px 0 5px 10px;
}
pre.code {
font-size: 80%;
color: #666666;
line-height: 1.02;
border-left: solid;
border-width: 2px;
border-color: #666666;
}
HTMLソースを

<pre class="code">
コード
</pre>
こう書くと、


コード
こう表示される。

[続きがあれば読む]

"引用 <blockquout>"のスタイル

cssファイルに下記コードを追記する。

div.quote {
margin: 0 0 1em 20px;
padding: 5px 0 5px 10px;
}
blockquote {
font-size: 80%;
color: #666666;
font-style: italic;
line-height: 1.5;
background: url(http://shakingidea.googlepages.com/quotes.gif) no-repeat top left;
}
blockquote p {
margin: 0;
}
p.quote {
text-align: right;
}
HTMLソースを

<div class="quote">
<blockquote>
引用文
<p class="quote">
"引用元"へのリンク
</p>
</blockquote></div>
こう書くと、
引用文

"引用元"へのリンク

こう表示される。

[続きがあれば読む]

"続きを読む"のテスト

ここに要約を書く。

続きを書く。

[続きがあれば読む]

"続きを読む"を追加する

STEP:1
ココからhackosphere.jsをダウンロードする。

STEP:2
ダウンロードしたhackosphere.jsを適当な所にアップする。
今回はGoogle Page Creatorにアップロードする。

STEP:3
<head>~</head>の間に下記赤字のコードを追記する。

<script type='text/javascript'src='http://shakingidea.googlepages.com/hackosphere.js' /></script>
</head>

STEP:4
<b:includable id='post' var='post'>を検索して、下記赤字のコードを追記する。

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[続きがあれば読む]</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[記事を折りたたむ]</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>")
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div></div>

STEP:5
<span>~</span>の前に記事の要約を書く、<span>~</span>の間に隠したい部分を書けば要約だけが表示される。

Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>

[続きがあれば読む]

2007/08/02

ファビコン

なんとなくファビコンを付けてみた。

FavIcon from Picsで用意した画像のパスをSorce imageに入力して、"Generate Favicon.ico"をクリックする。

プレビューが表示されたら、"Download Favicon"をクリックするとファビコン用画像をダウンロード(zipで圧縮されている)する事が出来る。

ダウンロードしたzipを解凍して、favicon.icoを取り出して、好きな名前にリネームして、どっか適当な所にアップする。

bloggerの管理画面「テンプレート > HTMLの編集」からTitle 要素の下に下記を書いて保存。

<link rel="SHORTCUT ICON" href="アイコンファイルの URL" />
<link rel="icon" href="アニメ GIF ファイルの URL" type="image/gif" />

おしまいちゃ~ん♪

@akaさんのページによるとアイコンファイルをGoogle Page Creatorにアップする場合はfavicon.icoとは違う名前にリネームする必要が有るらしい。

Google Pages へは favicon.ico というファイル名ではアップロードできない。というのも、Google Pages の favicon.ico とパスと衝突してしまうから。ここの例のやうに favicon.ico とは違う名前に変更してから、ファイルをアップされたし

ファビコン自体はbloggerのロゴの色を変えただけ。
そのうち作り直す、多分。

[続きがあれば読む]

Snap shots 改良

先日追加したSnap shots。

見た目が格好いいからイイ感じだけど、すべてのリンクのプレビューが出てくるのがウザい。

"comment"、"プロフィール"、"記事の中の写真"、"Twitter update"あたりのプレビューは不要なので、そのように対処してみた。

Q 特定のリンクでSnap Shotsの表示を防ぐには?

A リンクに'snap-noshots'クラスを追加すると、Snap Shotを表示しなくなります。

例<a class="snap_noshots" href="http://www.example.com">www.example.com</a>


基本的にはこの方法でリンクに"snap_noshots"のclassを指定すればokらしい。

でも、ウィジェットの内のリンクなんかはclass指定が出来ないので(もしかしたら出来るかも、俺が無知なだけかも…)、"comment"、"プロフィール"、"Twitter update"内部に関しては、それぞれのドメイン単位でプレビューを表示出来ないように設定してみる。


Q 特定のドメインに対してSnap Shotsを有効/無効にできますか?
A できます。ただ少し技術的です。
以下のコードをコピーしてテキストエディターに貼り付けて編集できるようにしてください。編集が終わったらそれをHTMLの</body>タグの前に貼り付けてください。

<script type="text/javascript">
//<[CDATA[
var links = document.getElementsByTagName('a');
for (var l = 0; l < links.length; l++) {
    if(links[l].href.match(/^http:\/\/www\.example\.com/)){
        links[l].className += " snap_noshots";
    }
}
//]]>
</script>

上のコード内のsnap_noshotsはwww.example.comへのSnap Shotsを無効にします。しかしながらデフォールトで無効にしてあるドメインに対してのみ有効にしたいかもしれません。そのときはsnap_shotsを使います。

snap_noshotsはwww.example.comへのSnap Shotsを無効にします
snap_shotsはwww.example.comへのSnap Shotsを有効にします

しかしおそらくwww.example.comにリンクしたくないでしょう。そこでどうするかというと:
まず、"www.example.com"のコードは www\.example\.comのように書かれていることに気をつけてください
そこで、 www\.example\.com  をあなたの好きなドメインに置き換えてください。それぞれのドットの前にバックスラッシュを入れて同じような記述方法で書いてください。
もしひとつのドメインへのSnap Shots有効・無効を設定したいのなら、これでコードの編集は終りです。</body>タグの前に編集したコードを貼り付けて発行してください。
しかし、Snap Shotsをふたつかそれ以上のドメインに対して有効・無効を設定したいでしょう。そのときはこうします:
Replace the line in the code that contains  www\.example\.com  with this line:  if(links[l].href.match(/^http:\/\/(www\.example1\.com|www\.example2\.com)/)){
この行でSnap Shotsはwww.example1.comまたはwww.example2.comを探します。このコードの中で2つのドメインが縦線( | )で区切られていることに気をつけてください。

You can add more domains simply by adding a vertical bar before each new domain, as shown in this replacement line of code. And, of course, remember to put a backslash (\) before any dots.

最後に、この編集したコードをHTMLの</body>タグの前に貼り付けれて発行すれば終りです。


と、いうことなので、Blogger の管理画面「テンプレート > ページ要素」と進んで、「ページ要素を追加」をクリックして「HTML/JavaScript 」を選んで「ブログに追加」ボタンを押し、「コンテンツ」部分に上記のコードを貼り付けて「変更を保存」ボタンを押す。

上記赤字部分はプレビューを表示させたくないドメインに書き換える。

"comment"と"プロフィール"はwww.blogger.com、"Twitter update"はtwitter.comをブロックすれば良いから以下のコードを貼り付けた。


<script type="text/javascript">
//<[CDATA[
var links = document.getElementsByTagName('a');
for (var l = 0; l < links.length; l++) {
    if(links[l].href.match(/^http:\/\/www\.blogger\.com|twitter\.com/)){
        links[l].className += " snap_noshots";
    }
}
//]]>
</script>

そうすると、"comment"、"プロフィール"、"Twitter update"はトリガーのアイコンが出なくなったのでとりあえずはok。

snap shotsの日本語は直訳なのか、なんだか日本語下手だな…。

それにしても、パーツを簡単に追加できるのも勿論だけど、java scriptとかも簡単に追加出来るbloggerのウィジットって便利かも。

…って、こんな解説記事のような物を書いてみたかったけど、行き当たりバッタリでやってみたら出来た!って感じなんで、あんまり参考にはならんな…。

まぁ、自分用のメモと言う事で。

[続きがあれば読む]

2007/07/30

タグクラウド化とtwitterやら

なんだか注意力散漫な今日この頃。
幸い仕事も暇なのでblogをいじってみた。

・ラベルのタグクラウド化

なんとなく見た目が格好良いのでクラウド化してみた。
二行にまたがっちゃう部分はどうにかなるのかしら?

ま、とりあえず。

・twitterを始めてみた。

blogger用のwidgetが有ったので導入してみた。

・Google AdSenseから認証okのメールが来たのでGoogle AdSenseを追加。

・Snap shots導入

と、まぁ、いろいろといじり始めてるけど、例の「立ち上げる⇒デザインいじる⇒飽きて放置」な流れになりつつあるような…。

まぁ、日記代わりにゴーゴゴー♪

[続きがあれば読む]

2007/06/28

テンプレートを変更

好きな赤緑黄のデザインにしようと色々いじってみたけど、どうにもこうにもセンスが無いので、bloggerのテンプレートに変更。
やはり、収まりが良い感じ。

そして、過去の無駄な記事を削除。

[続きがあれば読む]

2007/03/08

Readmoreを追加

Read moreを追加。

参考にしたサイト

Hackosphere: Blogger hack: Expandable posts with Peekaboo view

[続きがあれば読む]