日替わり NAT’s Champloo

音楽やライブ(HM/HRやボカロなど)、旅行など、ごちゃっとした日記

日記のデザインをちょっと変更

この日記のデザインをマイナーチェンジしてみた。一覧系のリンクを左側にまとめて、それ以外のリンクを右側にまとめる、という方針でちょっとデザインを変更。
プログラミング関係の日記(id:NAT_programming)の最新タイトルも左側に表示するようにした。これが一番やりたかった変更で、この表示にはrssモジュールを使った。表示形式を合わせるため、ここの日記の最新タイトルもrssモジュールを使った表示に変更。
rssモジュールのデフォルト表示だと、タイトルに 1, 2, 3, ... と番号が振られてイマイチなので、以下のように属性を設定したコードをフッタに入れた。

  <hatena name="rss" url="http://d.hatena.ne.jp/NAT_programming/rss"
          moduletitle="NAT's Programming Champloo (プログラミング日記)" 
          template="hatena-module" titlelength="80" dateformat="%Y-%m-%d">  

これで日付とタイトルだけが並ぶようになる。
日付とタイトルが別の行になるように、スタイルシートにも少し手を加えて、以下のコードを追加。

.hatena-rss li a{
	display: block;
	margin-bottom: 0.8ex;
	_width: 100%;
}

これは、他の方の日記のスタイルシートを参考にしながら試行錯誤したもの。Firefoxでうまく表示されたと思ったら、IEでは思ったように表示されなかったりして、ちょっと苦労した。
"display: block" を指定するのがポイント。これで、タイトル部分(タグの内容)が日付とは別の行で表示される。
"_width: 100%;" は、IEで余計な余白が表示されないように必要だった。これは、他のサイトのスタイルシートを真似して追加したものなのだけど、このおまじないがなぜ必要なのかは、よく分からない・・・。

そんなわけでデザインをちょっと変更してみたのだけど、基本的な配置は変えてないので、見た目はほとんど変わってない。気が向いたときにでも、思い切ったデザイン変更を試してみようかな・・・。