ちょこまかブログ設定をいじってユーザエクスペリエンス向上

見る人にとって使い勝手が良くなるよう、ちょこまかと設定をいじってみた。

１．恒例のバナーフォト変更
春はやっぱり桜。今回はphotoLibraryからセレクト。

２．２カラム右メニューに変更
最近、良いブログをいくつか眺めると、左に記事があって右にメニューがある、というスタイルが多い。こうすることで、ケータイからアクセスしてケータイ用変換になっても、上の方にすぐ記事が表示される。これまでは３カラムで、左メニュー・記事・右情報としていたが、私も２カラムに変えてみた。

３．リンクを分かりやすく
リンク文字は青色で目立たせているが、マウスオーバー時に色が変わるなどの変化があるとより分かりやすいということを、先日のCSS niteで学んだ。確かにその通り。CSSをいじってaタグのhover属性を変えた。

a:hover{
color:#800;
text-decoration:none;
}

４．過去記事一覧をプルダウンに
1998年5月からスローペースで書いているので、過去記事一覧がズラーっと並ぶ。２カラムになったことで、よりスクロール負担が大きくなってしまうので、プルダウンメニュー方式にした。選べば自動でページ遷移するJavaScriptをしかけた。Sesesaaブログであればこのまま貼り付ければ動くはず。MovableTypeでもいけると思う。

<script language="javascript" type="text/javascript">
<!–
function ChangeArchive (sel) {
  if (sel.options[sel.selectedIndex].value != "") {
    location.href = sel.options[sel.selectedIndex].value;
  }
}
–>
</script>
<div class="sidetitle"><% content.title %></div>
<div class="side">
<form method="get" action="">
<select name="archive" onChange="ChangeArchive(this)" class="archiveselect">
<% content.header -%>
<option>過去の記事</option>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<option value="/archives/<% archives.createstamp | date_format("%Y%m") %>-1.html"><% archives.createstamp | date_format("%Y年%m月") %>(<% archives.count | __or__ | echo('0') %>)</option>
<% /if -%>
<% /loop -%>
</select>
</form>
<% content.footer -%>
</div>

５．Webスカウターをつけた
Webスカウターというサイトの戦闘力測定ができるパーツを貼り付けた。ブログやサイトを持っていなくても、ブックマークレット式にお気に入りに登録しておき、任意のサイトの各種数値が見れる。相当便利だ。

６．フッターをつけた
クリエイティブコモンズの明記と、ホームジャンプ、ページトップジャンプをつけた。

こうやって、インプットした情報を自分のブログで試せるのは面白い。さて、次は何を試そうかな。