タグ

カスタマイズに関するricopinxのブックマーク (2)

  • 画面横幅いっぱいに画像を表示するスライダー | スタッフブログ | LAB Inc.(株式会社ラボ)

    サイトのホームによくある、いくつかのコンテンツがスライドして表示する要素(機能)があるかと思います。 jQuery プラグインで言えば、 bxSlider や FlexSlider 2 などがあります。それらは、画面の中央に1つのコンテンツが表示され、他のコンテンツは隠れているサンプルがほとんどなのですが、画面横幅いっぱいにコンテンツを並べ、それをスライド表示できないか、という事例がありました。(ちなみに、レスポンシブ Web デザイン採用で。) スライダーを自作すると結構時間がかかることが予想されたので、既存のプラグインのオプション変更で対応できないか等探ってみました。しかしながら、該当するものがありませんでしたので、 bxSlider を少し改造して使ってみることにしました。結果、上手く表示できるようになりました。 表示サンプル カスタマイズ後のコード( jquery.bxslider

    画面横幅いっぱいに画像を表示するスライダー | スタッフブログ | LAB Inc.(株式会社ラボ)
  • GoogleMapをかっこ良くする!カスタマイズ方法 | それからデザイン スタッフブログ

    地図などを表示するページを作る際に、GoogleMapを読み込むといった事はよくやると思います。 サイトの雰囲気と違っていても、「仕方がない・・・」と妥協した、といった経験も少なからずあるはず。 実はGoogleMapはスタイル(装飾)を定義する事ができるのでデモとして、 今回はデフォルトの色合いを変更して、灰色をベースにしたシックな感じのマップを作ってみました。 まずは、完成形のデモをご覧ください。 色合いを変更した完成形デモ では、今回用意したデモの内容で説明をいたします。 まずは全体のJSのソースが下記となります。 それでは、順を追ってみてみましょう。 <script> var map; function initialize() { var latlng = new google.maps.LatLng(35.65858,139.745433); //① var mapOption

  • 1