ブログのデザインを(プチ)リニューアルしました(Ver.1)

まだやりたいことが処理しきれていない状態ですが、
(todoに溜まっているタスク達…)
思っていた感じのものが仕上がってきたので、こちらをデザインver1.0とします。

極力画像を使用しないシンプルなブログを目指して—
簡単に変更した箇所を記載。

カラーイメージ

割合が厳密ではありませんが、私の中のイメージで。
主な2色に+1すると、なんとなくいい感じになるような…

カラーイメージ

ロゴの変更

少し丸みを帯びました。
卵をモチーフにしているので、やわらかい印象をつけたかったのです。

ロゴの変更

titleにツールチップ

ツールチップを導入してみました。
参考:TITLE属性を利用した簡単ツールチップの作り方 jQuery編 :: 5509

titleにツールチップ

メニューのアクティブ

オンマウスでストライプがススーっと動きます。(超、地味!手軽にgifアニメです)

メニューのアクティブ

外部URLは別窓表示

jsでtarget設定とclassを追加する
参考:簡単に外部リンクを設定するjqueryベースのjavascript | sawa memo

jQuery(function($){
/*外部リンクにのみtarget=blank*/
	$("a[href^='http://']").not("[href*='http://25egg.com/']").attr("target","_blank");
	$("a[href^='http://']").not("[href*='http://25egg.com/']").addClass("blank");
});
外部URLは別窓表示

フッター

以前はfrickrやらfacebookやらのウィジェットを入れていましたが、
思い切ってコピーライトだけにしました。

フッター

今後も調整を加えつつ、より見やすいブログを目指していきます :)

追記[2011.11.21]:スクロールするとページトップへ戻るボタンを表示

1つ忘れていましたので、追記…
戻るときの速さは”ゆっくり”に変更してます。
参考:Animated Scroll to Top [web designer wall]

$(document).ready(function(){
/*ページトップへ戻る*/
	$("#pagetop").hide();

	$(function () {
		$(window).scroll(function () {
		  if ($(this).scrollTop() > 100) {
		    $('#pagetop').fadeIn();
		  } else {
		    $('#pagetop').fadeOut();
		  }
		});
		
		$('#pagetop a').click(function () {
			$('html,body').animate({ scrollTop: 0 }, 'slow');
			return false;
		});
	});
});
pagetop_off