きこえない海をリデザインしました。きこえない海kikoenaiumiHomeProfilePortfolioBlogstudyきこえない海をリデザインしました。2013.02.07.当サイト「きこえない海」も開設から半年くらいになりそうです。いうことで開設当初から考えていたレスポンシブ化をテーマの新調にあわせてかなり手探りで行なってみました。[adsense]テーマ前回はなるべくシンプルなものを作ろうと考えながら作成しました。カラーもモノトーンを基調としていたのですが、少し地味だったように思います。今回は前回よりも色を使っていくことにしました。全体のイメージは「きこえない海」という言葉の響きから前回に引き続きシンプル、レトロです。レスポンシブレスポンシブと簡単にいうとPCからでもタブレットからでもスマートフォンからでも最適化されて見れるデザインのことです。要素を可変させたりすることで画面サイズに合わせてサイズを調節します。リデザインと合わせてレスポンシブレイアウトに今回挑戦してみました。OSX、windows7、iPhone5、nexus7です。webフォント今回webフォントを少し利用してみました。webフォントとはフォントをwebから参照して利用するため閲覧者の端末に存在しないフォントも表示できるスグレモノです。日本語フォントだとまだまだ無料で使えるものが少ないのですが、英字フォントだとgoogleが配布しているため使えました!数も多いので迷っちゃいます。Script」を使ってみました。Win、IEの環境などでは少し見難いようなのでそのうち変えようと思っています。その他スクロールに合わせて浮かんでくる上へ戻るボタンをjqueryで実装しました。憧れていたので満足です。コンタクトページやfacebookやtwitterへの連携などが手軽に行えるメニューをヘッダーに置きました。流行の円形を使ったデザインにしてみました。マウスオーバー時にゆらりと浮かび上がるアニメーションを付けてみました。まとめレスポンシブ化に思っていたよりも苦戦しました。慣れの部分もあると思うのでコツを掴めばスムーズにできそうです。CSSフレームワークを使う手もあるそうなので次回は挑戦してみようかと思います。CSS3やHTML5を利用してかっこいい動きをつけたりしましたが、IEのことなどを考えるとまだ用途次第では使わないほうが良いパターンもありそうです。いうことでこれからも細々と修正を続けていきますのでサグラダファミリアを見守るような気持ちで見守ってください...。当方アンドロイド端末でのデバッグが満足に行えておりませんのでレイアウトが崩れている部分など見かけましたら教えてくださると助かります。あると思いますので宜しくお願い致します。こちらの記事もオススメですwordpressでAmazonのリンクをウィジェットにランダムで表示する方法。