IEでも表示されるようにした
ソースを簡略化してみた
かなり簡略化したので汎用性がないかも
テンプレート変えたら使えなくなったりして
火曜日, 10月 31, 2006
月曜日, 10月 30, 2006
サイドバーにページの目次をつけてみる実験
ページ全体の更新ができるようになったので
サイドバーにページ内にある記事タイトルを表示して
アンカーにリンクするスクリプトを作ってみた
ヘッダーに
<script charset='UTF-8' src='http://tirasi.no.ura.googlepages.com/blogmenu.js' type='text/javascript'/>
表示したい所に
<div id='blogmenu'><!-- Blogmenu here --></div>
を追加
Firefoxでうまくいったと思ったら
IEでの表示がうまくいってない…undefinedって…><
めんどうなので明日直すか
今日はもう寝る。
'Newer Posts','Older Posts'のリンクで強制的にページ全体を更新させる実験
ページの下の方にある'Newer Posts'と'Older Posts'のリンクは
クリックすると古い記事にさかのぼって見たりすることができるのですが
indexページの場合これをクリックすると記事の所だけ更新されてるような気がします
これをページ全体を更新するようにしたいと思う。
いろいろやってみた結果
テンプレートの
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
と
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
の青く表示されてる部分を削除するとうまくいった。
なぜわざわざ全体を更新させるかというと
例えばトップページから'Older Posts'で記事をさかのぼっていくと
記事のところだけ更新されるのでブログタイトルの所(ここでは'(超)実験室'の所)がリンクにならず
さらに'Newer Posts'と'Older Posts'の間に'Home'がでてこないので
ブログトップへ戻るリンクがない(ブラウザでリロードすれば直ぐ戻れるんだけど…)
まあそれはいいとして
Javascriptとかで拡張してるとその拡張がページに反映されない
これは結構人によっては重要かも
カレンダーにしてもLightboxにしても最初のindexページはいいとして
'Older Posts'で移動するとぜんぜん機能しなくなったりします…たぶん…
実験的にカレンダーをindexページでも表示するように戻してみたけど
ちゃんと反映するようになった
(月をまたいでるページはちょっと問題ありかな…カレンダーはアーカイブページだけで使った方がいいかも)
サイドバー(?)にいっぱいいろんなものを表示してる人は遅くなるのでやらない方がいいかも
でもキャッシュから表示するからそんなでもないのかな?
記事の所だけ更新させてJavascriptもちゃんと反映するスマートな方法とかあればいいんだけど
これで問題なければまあいいか。
土曜日, 10月 28, 2006
アドレスバーとかに表示されるアイコンの変更
Firefoxとかのアドレスバーとかタブのところに表示されるアイコンを変えてみる
これはzikite氏の
Blogger Beta Tips: ブログのアイコンを変える
に書いてあったので簡単だった
あと、クリボウ氏の所はアニメーションするのでソースを覗いてみたら
gifもつかえるようだった
で、HEADの所に
<link href='http://****/****.ico' rel='shortcut icon' />
<link href='http://****/****.gif' rel='icon' type='image/gif' />
こんな感じで追加してみた。
追記
クリボウ氏のTipsもありました
クリボウの Blogger Tips: アニメ GIF を自分のサイトの Favicon に
コメントありがとうございますm(_ _)m
アーカイブページの時だけカレンダーを表示する実験
トップページとかで前のページとかに行くとカレンダーがまともに動かなくなるので
月間アーカイブの時だけカレンダーを表示するようにしてみた
ぶっちゃけ
テンプレートのスクリプト追加の所で条件分岐させて
元からスクリプトを追加するかしないかみたいな感じで
<b:if cond='data:blog.pageType == "archive"'>
<link href='http://****/bloglendar.css' rel='stylesheet' type='text/css'/>
<script charset='UTF-8' src='http://****/bloglendar.js' type='text/javascript'/>
<script charset='UTF-8' src='http://****/bloglendar-main.js' type='text/javascript'/>
</b:if>
ヘッダー内のスクリプト等を追加する所の部分を挟むようにした
カレンダー自体はExpand Widget Templatesにチェックチェックを入れて
Blog Archiveの所に埋め込んだ
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<div id='bloglendar'><!-- Bloglendar here --></div>
<b:if cond='data:style == "HIERARCHY"'>
ついでにスタイルシートをクリポウ氏のをパクッた
カレンダーがコンパクトになっていい感じ。