ブログのデザインをブラッシュアップしました

New Design

昨日のNHKオンラインがリニューアルに感化された(直接の理由は後述)のか、久々にCSSをいじくっていたらいつの間にかこのブログのデザインを変更していました。サイドバー周りを中心にアイコンを配置し、クリックできる領域を増やしました。

ヘッダーを画像に

サイドバー周り

あまり目に付く場所ではないですが、サイドバーのヘッダー(タイトル部分)を画像に置換しました。

Amazon商品の情報を追加

サイドバー周り2

トップページや月別アーカイブに表示されるAmazonの商品に「商品の発売日」と「Amazonでの販売価格」を追加しました。

クリッカブル領域を拡大

サイドバー周り3

全てのページに表示される「最近の記事」と「アクセス数の多い記事」、そしてトップページや月別アーカイブページで表示される「アーカイブ」の表示領域を増やし、クリックできる領域を拡大しました。

最近の記事

このブログ上で公開されている、最も新しい記事を5件表示します。投稿日も表示するようにしました。

アクセス数の多い記事

直近30日間のアクセス数が多い記事を5件表示します。1日1回更新されています。

アーカイブ

記事を月別にまとめて表示します。記事が30件以上ある月については、複数ページに分割しています。

著作物の引用を明確化

メインコンテンツ

テレビキャプチャ画像には著作権マークとその権利者を明文化し、引用であることを明確にしました。
文章の引用と違い、画像の引用についてはHTMLタグが存在しないため、苦慮していましたが、今回はciteタグとCSSで画像の上に重ねる形で対処しています。

iPod touchで自分のサイトを見ている時に、サイドバーのリンクが小さすぎて、なかなかクリックできなかったことがブラッシュアップする直接のきっかけになったわけですが、振り返ってみると、最後にCSSをいじったのは昨年8月のサーバ移転以来でした。
見た目は良くなったものの、知識を忘れかけていたこともあり、結果的にコードの量は増えてしまいました。今後はCSSの特徴である継承を生かして、もう少しサイズを抑えたいところ。

スポンサーリンク

この記事をシェアしてくださいねっ

このサイトが気に入ったらフォローしてください!