数日前からだがちょこっとブログのデザインをリファインしましたよ。新年も迎えたことだし心機一転ってことで。今回は「favicon」、「配色」、「フォント」、「上へ戻るボタン」などをやった。

blog_001.jpg

表示がおかしかったり反映されてないよって場合は強制再読み込み(Chrome、Firefox、IEはCTRL+F5)やキャッシュクリアなどお試しください。

まずはfavicon。昔からFC2の意味不明な馬のfaviconから変えたいと思ってたんだがいいデザイン案が思い浮かばず&作るのが面倒なんで放置してた。でも「もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ | 株式会社LIG」の記事を読んで単純な角ばったアイコンでもいいかなと思い立ち、そのついでに見つけた「favicon.ico Generator」でドットをコツコツと並べていって作ってみた。最初は単純な塗りつぶしだったりしたけど要領が分かってきて最終的にはこうなった。blog_002.jpg一応アイコンのモチーフはブログで使ってる配色で四角形が並んでるのは今のブログのデザインを反映。でもこのfavicon見てこのブログを連想することはちょっと難しいだろうなw まぁ自己満足だからいいか。

次に配色。今までは濃い目のシックな色合いにしてたしそうゆう志向が好きだったけど今回は爽やかなパステル系にしてみた。一応「color-sample.com」で配色を関連させたりして練ってあるけど果たして見た目いいかどうか。配色に関してはほんと自分は苦手で面白味のない無難なのしか出来ないからなぁ。それとリンク色も変更。今度はちゃんと訪問前と訪問後で分かる色にした。デザイン的には同色の方が見た目はいいんだけどアクセシビリティを考えるとやっぱりね。記事内にあるリンクはさらに明るめの色にして分かりやすくさせてたりする。他にはこのブログ以外の外部リンクには小さいアイコンを付けたいんだが画像にまでアイコンが付いてしまい鬱陶しいから保留。なにか解決法がないものか。

フォントは今まで何故かフォント幅が狭めのMeiryo UI使ってたけどもはやスタンダードとなったメイリオに変えた。これで大分視認性が上がったかな。

上へ戻るボタンはjQueryで実現。スクロールしてない時は何も出ないけど少しスクロールしたら右下に矢印が出てくる筈。それを押せばスルッとページの一番上へスクロールしてくれる。自分が書く記事は無意味に長くなったりする場合が多いからやっぱりこうゆうUIはあった方がいいよね。かくいう自分はマウスジェスチャーで実現させてるけどw jQueryといえばlightboxで画像をクリックするとオーバーレイで拡大ってのやりたいんだがあれ画像タグに属性付けないといけないんだよね。自分の記事は画像をたくさん貼る場合が多いからそれはちょっと面倒。

blog_003.jpg

他にはmargin、paddingの微調整やブログタイトル部分を小奇麗にしてみたり色々弄ったけどひとまず今回はこんなとこかな。やりたいけど自分の力不足で実現出来なかったとこもあるけどそれはまた今度だな。

ブラウザでの表示確認はWindows上のGoogle Chrome 39、Firefox 35beta、Internet Explorer 11のみ。元となったNefertさん作のテンプレートがとてもしっかりしてるから少々手を入れてもおかしいことにはなってないと思う。

そういえば以前FC2の騒動のこともあって移転を考えるって書いたがあれから全く考えずw 差し迫った危機があればやる気が起きるんだけど特にこのままでも問題なさそうだからまぁいいか~になってるw

関連記事
  • web拍手 by FC2
  • このエントリーをはてなブックマークに追加


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)
    (管理者にだけ表示を許可する)


    トラックバック

    Trackback URL
    Trackbacks