GameLog

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログをリニューアルしたので、その変更点と軽く実装方法を書きます。

gamelog_re3.jpg

サイトのデザインを少しだけ、いじってリニューアルしてみました。これで2回目のリニューアルです。1回目は内部的に変更しただけで外見は全く変わってなかったんだけどね。今回は外見をちょっとだけ変えてみました。凄くシンプル!シンプル・イズ・ベスト!

デザインセンスが無いだけなんですけどね。以下に大きな変更点だけまとめておきまっせー。
※1から作ったわけではなく、元はFC2テンプレートから取ってきたものを改造しています。今回の実装で原型無くなってもたけど。

改良点について


gamelog_re1.jpg

ヘッダー部分のデザインを変更しました


gamelog_re2.jpg

ヘッダー部分が以前は画像で実装されており、このヘッダー画像のせいで、ブログの記事のエリアを広げることができませんでした。ずっと広げたかったんですけど、めんd(ry 忙しくて出来ていませんでした。今回の実装で、そのヘッダー画像を取っ払い、幅を100%で指定し、どんなブラウザのウィンドウサイズでも綺麗に表示されるようになったかと思います。
ヘッダーの下にあるオレンジの線はただのアクセント。

ヘッダーの右側には、何か加えようと思いましたが、加えるほどコンテンツ無いなと絶望したので、何もしないことにした。シンプル・イズ・ベスト!
後、ヘッダーとブログ記事の間も何か入れたかったんですけど、(例えば人気記事3つほど横に並べるとか)FC2ブログで、どうやったら人気記事を自動で、そこに持ってこれるように実装するのか、やりかた分からんかったので止めました。

ブログ記事のタイトル部分のデザインを変更しました


gamelog_re4.jpg

個人的に、ここが一番改良加えたかった所です。ヘッダー部分と同様に、記事タイトルが表示される場所を画像で実装していたため、タイトル文が長くなると、画像の幅よりはみ出してしまい、読みにくかったかと思います。改行しても画像からはみ出るし、汚いし。

なので、画像やめ!。いや今も実は画像です。オレンジの僅かにストライプ模様の入った素材を作って、h2要素の背景にbバックグラウンドイメージを指定し、リピートさせて配置しております。
まあ、ようはタイトル文がどれだけ長くなっても、改行しても、デザイン的に以前より違和感無いようにしたぜ!ってことです。

左カラムのデザインを変更しました


gamelog_re5.jpg

「デザインを変更しました。」ばっかりで、どうせ次もデザインを変更しましただろ?と思ったかもしれません。まあその通りだ。これもな・・・左側が横幅狭い画像で実装されておったからな・・・。幅増やしたくても増やせなんだ。

だから画像やめ!普通のテキストに変更です。見出しは、フォントサイズを大きく設定して灰色っぽい色を加えました。
見出しに続く文章については、それと差別するためにフォントサイズを小さめにして、色は同じに。マウスカーソルを置くと、
オレンジっぽい色に変わるように変更しています。(少し色が弱いなとか思ったりもするけど、眠いからいいや!また明日!

トップに戻るボタンを1つだけにして、アニメーションを実装しました


gamelog_re6.jpg
トップに戻るボタンに付いている、半透明の四角いアイコンは自分がクロームに入れている拡張機能なので、他の皆さんには見えていないものです。

今までトップに戻るボタンは、例によって画像で配置されており、記事の文章の終わり、コメント欄の終わりなど、いたるところに配置されていましたが、これを1つだけに変更しました。後、画像要らんから!取っ払った。

丸くしているのは、CSS3のborder-radiなんちゃらですね。(border-radiusプロパティ)コレを使うと、画像を使わなくても丸いデザインの物を実装可能です。ただし、IE8くらいから見れないので、古いIEを使用の方は、四角く見えるかと思います。

ついでに、アニメーションも実装しています。マウスを上に乗せると、徐々に(とか言いながら、ほぼ一瞬)半透明になりますし、クリックすると徐々に(とか言いながらほぼ一瞬に)ブログページのトップに戻されます。
実装は超簡単です。JavaScript(あんなん難しいから、jQuery使った)で、要素取ってきて、アニメーションでトップ戻すだけ!(詳しくは、そのうちに書くかもしれん)

広告一個追加してます


一個だけ広告追加してるから・・・すまんな。


まあこんな所でしょうか。使いにくかったらまたそのうち改良加えるかと思いますが、しばらくはコレで行きます。

テーマ:ブログ - ジャンル:ブログ

コメント

コメントの投稿















管理者にだけ表示を許可する

トラックバック

トラックバック

URL
http://vaisu0.blog3.fc2.com/tb.php/291-6b4db382
この記事にトラックバックする(FC2ブログユーザー)

プロフィール

vacasu0

Author:vacasu0
FC2ブログへようこそ!

ヴァイスです。
ゲームのプレイ。WEBページ作り。クロスバイクで、どこかに出かける。奇術。が好きです。
このブログはゲームプレイのメモや攻略方法に関して書いていくつもりです。よろしくお願いします。

最新記事

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

カウンター

検索フォーム

RSSリンクの表示

リンク

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。