またまた!サイトデザインを結構大幅に変更しました。

Written by Joe
無題

今回はいろいろギミックを付けてみたので遊んでみてください。

サイトデザイン変更

何度も申し訳ありません。なかなかこのサイトのデザインは安定しないですね。

ですが、今回は彩りやギミックも含めてかなり大幅に変更をしたのでちょっとおもしろいと思いますよ?

明るいサイトへ

今までは、ヘッダーもグレーメインで、背景色も暗めのグレーで、と明るさが少々足りないものでした。

他のサイトを閲覧していて、「あぁ、おれんとこ暗ぇ。。。」と幾度と無く思っていたので、この度かなり変更しました。

サイトのデザインの変更としては、この色の変更くらいしか目立つ部分は無いので、あとはちょっとした変更になります。

シェアリンクを組み直した

無題

今まで、Evernoteなり、リンク自体が縦長なりと、シェアリンクがちょっとスマートではありませんでした。

前のバージョンを作り終わった時はそれで満足していたのですが、僕は飽きやすい正確のようです。

サイトデザインのシェアリンク周りをちょっとだけ弄った話。(こちらの記事は前前バージョンですが、似たようなものなので参考にも)

あとは、いろいろ(と言っても2つですが)搭載したギミック、jQueryの話です。

ギミック?

ちょっと気にしてみてください、特にスマホ版のメニューはちょっと楽しいと思います。

ヘッダーが追尾する

PC版では、カテゴリリンクが、スマホ版(ブラウザ幅が640px未満の端末での表示)の場合はヘッダー全体が、画面の移動に追尾してくる様になっております。

これはPCでの表示です。

無題

 

そしてコレがスマートフォン版

無題

いつか自分のブログでもやってみたかったな、と思っていたことなので実装できて良かったです。

スマホ版で、横スクロールのカテゴリリンクとGoogle検索

スマホ版で、右上の■のボタンをタップすると、カテゴリリンクと検索窓が出てきます。

カテゴリリンクは横スクロール型になっていまして、右の方までリンクが有ります。

無題

スマートフォンユーザーの方は試してみてくださいね~

イメージで言うと、Google検索でスマホで検索した時、上の絞り込みで、「画像」なり「地図」なり選択できるバーがあったのですが、そのイメージで実装しました。

ここは結構自分では気に入っていますw

まとめ

  1. サイトデザイン変更
  2. ちょっとこだわり

 

いろいろとやりたいことが一気に出来たのですが、そのため記事更新が疎かになってしまっていました。

 

分からない事がある?質問しよう!