ウェブサイトをスマホ対応しました

MAMEプロダクションのウェブサイトをスマホ対応いたしました。

PC版と同じく、スマホ版も縦と横にスライド（スマホ版の場合はフリック）できるように、

swiperというライブラリを採用しました。

divを入れ子にするだけで、

縦にも横にも動くスライダーの実装が可能です。

<div class="swiper-container swiper-container-h"><!-- 横に動く外側のスライダー -->
 <div class="swiper-wrapper">
 <div class="swiper-slide">Horizontal Slide 1</div>
 <div class="swiper-slide">

 <div class="swiper-container swiper-container-v"><!-- 縦に動く内側のスライダー -->
 <div class="swiper-wrapper">
 <div class="swiper-slide">Vertical Slide 1</div>
 <div class="swiper-slide">Vertical Slide 2</div>
 <div class="swiper-slide">Vertical Slide 3</div>
 <div class="swiper-slide">Vertical Slide 4</div>
 <div class="swiper-slide">Vertical Slide 5</div>
 </div>
 <div class="swiper-pagination swiper-pagination-v"></div><!-- 縦に動くスライダーのナビゲーション -->
 </div>

 </div>
 <div class="swiper-slide">Horizontal Slide 3</div>
 <div class="swiper-slide">Horizontal Slide 4</div>
 </div>

 <div class="swiper-pagination swiper-pagination-h"></div><!-- 横に動くスライダーのナビゲーション -->
</div>

また、今回はスケジュールを考慮して

レスポンシブではなく、PC版とスマホ版を別HTMLにしています。

別HTMLでの検索順位などをウォッチしながら、

必要に応じてアップデートしていく予定です。

ホームページのスマホ対応をお考えの方は、ぜひお問い合わせください。

BACK TO BLOG

PROFILE

本間智久
MAMEプロダクションという屋号で、フリーランスのウェブデザイナーとしてお仕事しています。

広告や販促物のグラフィックデザイナーを務めた後、求人サイト運営会社にてウェブデザイナーとして勤務。
サイトの運営、リニューアル、特集コンテンツのディレクションや作成、SEO内部施策などの業務を担当。
2012年に独立。

趣味は、テレビゲームと酒場巡り。