テーマのレイアウトの変更

webdesign

今流行り(?)の画面全体に渡るようなワイドなレイアウトです。
テーマのレイアウト変更と少しだけ配色を変えました。

結構色んなところを変更したので以前のサイトを覚えている人は探してみてください(いない)

テーマのレイアウトの変更

スポンサーリンク

CSSの変更点

CSSでborder-radiusの使用を控えました。
やってみた感じだと、そっちのほうがシンプルで個人的には好きですね。
その代わりと言ってはなんですがtransitionをちょっとだけ使ってみました。

記事内の見出しのデザインも変更しました。
全部CSSで実現してみました。
こちらのサイトを参考させて頂きました。

見出しの文字や画像を大きく

最新記事などを載せているウィジェットは画像を大きくしました。
もともと50pxぐらいだったのですが80pxにしています。
小さいと画像を貼る意味がなくなってしまうのでわかりやすいようにしたつもりです。

見出しというより記事タイトルですが、もともと20pxだったのですが小見出し(h3)との違いを明確化するため実験的に25pxにしてみました。
以前から日付やカテゴリは記事の文字サイズより小さめですが、これはそのままにしております。

カテゴリーウィジェット

カテゴリー別のページに飛びやすいようにウィジェットを追加しました。
カレンダーのウィジェットとタグクラウドはあるのにカテゴリーのウィジェットがないという状態がおかしかったような気がします。
当サイトはヘッダにはナビゲーションバーがあるのでそこから色んなところに飛べるようにしているのですが、個人的に右側にあると目につきやすいので設置しました。

フッター

フッターは一気に白から黒ベースに変更です。
ワイドなレイアウトにすると背景が真っ白になってしまい、どうにも締まりません。
フッターを思い切って変えることにより個人的には良くなった気がします。

あと、フッターにはいくつかの個別ページに飛べるようなリンクを用意しました。
と言ってもナビゲーションバーにもあるリンクなんですけどね。


レイアウトの変更と言いながらサイトの説明文や404ページもガラッと変えております。
その他説明できないくらい変更点はありますよ。
これで時代の流れに乗れたらいいんですけどね。

テーマのレイアウトの変更

スポンサーリンク

Leave a Comment