chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2015/03/23

スマートフォンにサイトを対応させました

先月、Googleよりモバイルフレンドリーのサイトを検索結果に反映するという発表を受け、ずっとしなければと思っていたスマートフォンに対応させました。
スマートフォン対応に向け、今回はしてみたかった事を色々と実装しております。今後も誰かのお役に立てるよう頑張っていきますので、どうぞよろしくお願いいたします。

スマートフォンに対応しました

先月、Googleより「モバイルフレンドリーのサイトを検索結果に反映」することが発表されました。

今まで、対応しなければならないなーとずっと思っていましたが、これを機にようやく作りました。

空き時間に色々構築してましたので、中々記事が書けず。。w

今回のスマホサイトは、色々なテストを兼ねて実装してみました。

実装してみたのは、

  • Sassを利用したモジュール化
  • BEMっぽくしようとした(これはあまりわからなかったです。。)
  • CSS3アニメーション
  • アイコンフォントからSVG画像に変更

レスポンシブデザインにはしていません。

元々レスポンシブを考慮した作りをPCサイトではしていない事と、あまりレスポンシブデザインが好きではないという理由です。

PCとスマホの切り替えに関してはプラグイン「Multi Device Switcher」を利用してみました。

テーマを切り替えて使用出来るのでテーマの管理がしやすいです。

夏頃には、別サイトを作ろうと計画していましてそれはレスポンシブデザインで考えてみようと思っています:)

内容はおそらくくだらない日常の日記みたいになると思いますw

スマートフォンサイトを構築してかなり色々調べましたので、この内容もアウトプットしていきたいと思います。

毎月、アクセスが増加しています。今後も誰かのお役に立てるよう頑張っていきますのでどうぞよろしくお願いします。

 

スマートフォン版ではβ版のSNS elloをリンクさせています。(PCも後々付けておきますw)

私で良ければ招待コードをお送りしますので、興味がある方は是非コンタクトフォームで一言ください:)

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加