APIと少しのjQueryコードでGoogle Mapの地図の色を変更する
Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a
WordPressをクライアントワークで使用する際に覚えておくと良さそうな管理画面のカスタマイズ用コードいろいろ - かちびと.net
今日もWordPressの記事です。今日は、クライアントワークで、納品物としてWordPressを使うときに覚えておくと便利な管理画面をカスタマイズ出来るコードのまとめです。ほとんど地味な施工ですけど。 今日はクライアントワーク向けの管理画面カスタマイズコードをいろいろご紹介します。こちらも、昨日お知らせしたWordPressスニペットに掲載しますのでそちらでもご確認頂けます。と言うわけで宣伝でした。 WordPressスニペット まだ未完成ですけど暇を見て使いやすく出来たらなぁと思います。 更新をWebに疎いクライアントさん側で行うのであれば、管理画面の利便性の向上は更新モチベーションに繋がりますし、工数分の売り上げ増加にも繋げられます。地味だけど、覚えて置いて損はありません。 では、コードいろいろです。コピペはあまり良く無いですけど、今日はまとめ記事なのでコードの解説は割愛させてくださ
画像の任意の箇所にツールチップを配置出来るjQueryプラグイン・iPicture
画像内の任意の箇所に自由にホバーで テキストを表示するツールチップを 配置出来るjQueryプラグイン・iPicture のご紹介。この手のライブラリは、 実務でかなり有効的に使えますので 覚えて置いて損は無いのでは。 画像上にツールチップを配置出来るライブラリです。ECサイトや不動産、ホテル、アミューズメント施設などなど用途は沢山ありそうです。 こういうやつ。画像の上にオブジェクトを配置してマウスホバーで情報が見られる。 ECサイトなんかでは、こうやって生活してる写真にしてあげることでユーザーはプロダクトを使用してるイメージをしやすくなりますので、訴求力アップに貢献できます。 コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></s
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate - かちびと.net
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" sr
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
国内のiPhoneアプリでデザインが参考になったWebサイトいろいろ - かちびと.net
以前からちょいちょいブックマーク していたんですが、いつの間にか増 えてたので一覧化してみたいと思い ます。国内のiPhoneアプリサイトで Webデザインが参考になったサイトの まとめ。あんまり無いですが・・ 個人的な備忘録とメモ書きです。探し方も悪いと思いますので数はさほど網羅していません。「あそこ凄い素敵なのに載ってない」みたいなご意見ありましたらコメント欄にてご教授頂けますと幸いです。 この記事で見たいのはアプリではありませんのでWebサイトへのリンクしかありません。順不同となっています。シェア系アプリが多いです。 MogSnap 食べたものを写真で評価、共有するiPhoneアプリ。写真系なのでこういったスライドがあるとアプリの概要をイメージしやすいですね。無料であること、キャプチャ、アプリダウンロードのボタンが分かりやすく明示されています。 MogSnap 大辞林 言わずと知れた
要素を遅延表示させながらレンガ風に整列させるシンプルで軽量なjQueryプラグイン・stalactite - かちびと.net
jQuery Masonryのように、要素をレンガ のように時系列を崩さず配列させるだけ でなく、遅延表示させるjQueryプラグイ ン・stalactiteです。たまに見かける エフェクトなんじゃないでしょうか。 スクリプトも軽量で使い勝手も良さそう です。 遅延表示はちょっと面白いですね。スクリプトも軽量なのでポートフォリオかギャラリーで使ってみたいですね。Tumblrでも試したい。 Masonryと同じタイプのスクリプトです。こちらは軽量でシンプルなのと、要素を遅延表示させるエフェクトが付いています。テキストや動画コンテンツなども対応していますよ。 サンプル作りました。以下に進んでClick me!をクリックしてください。分かりやすいように少し遅延速度を遅めにしてあります。 Sample デモの写真はmark sebastian氏のものです。徐々に表示されたのが確認出来ましたでしょう
美容院や宿泊施設等で見かけるような予約システムを実装出来るWordPressプラグイン・Bookings(の今後にちょっと期待) - かちびと.net
美容院のサイトやホテル、民宿などのサイト でたまに見かけるWeb上で簡単に予約できる システムを構築できる、というWordPressの プラグインです。タイトルの通り、まだ実用 性のあるものではありませんが、プラグイン では初めて見たので備忘録的に記事にします。 タイトルで釣るっていう不毛なトラフィックが嫌なので、一応明記しましたが、使い勝手もUIもまだ良い訳ではありませんので、本当に今後期待をこめて、という記事です。 リリースされたばかりのようで、日本語化もまだされてもいません。少しでも多くのデベロッパーにこのプラグインの存在を知ってもらって、より改善していけたら素敵だなぁと思ってご紹介します。 こちらでも書いてありますが、美容院や、スパ、マッサージ、病院など、予約が必要な施設向けに開発されたプラグインです。この手のシステムはどこかで見かけた事がある方もいらっしゃるのでは無いでしょうか？
フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か - かちびと.net
どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデザインに変更できます。 ラジオボタンとかチェックボックスを画像に置換するプラグインですかね。なので、デザインの変更は基本的に画像とCSSを少し変えるだけです。尚、画像の指定もcssで行います。 左が普通で、右がリア充ですね。シンプルでいい感じです。見た目がいいほうが愛されるんですねきっと。世知辛い世の中ですこと。 マークアップも特別なことはしなくて済むのも楽かも。デザインの変更は基本的に画像を変え
jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々 - かちびと.net
気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも大丈夫っぽい。多数のオプションも用意されており、FlickrAPIにも対応してるくさいです。ライセンスはMIT/GPLのデュア
日本の良デザインなFacebookページを収集しているデザインギャラリーサイト・520PX facebookmark - かちびと.net
今日は3連休最後ですね。個人的には 全然関係ないので普通に記事を書き ます。日本もかなりFacebookが浸透 したようですが、まだまだ数は少ない 印象です。企業もかなり参戦してきて いるので、Facebookページの需要も 少しあがってきている印象ですね。 そんな中で日本のFacebookページで良デザインなページのみを収集しているギャラリーサイトがありましたのでご紹介。 こんな感じで国産のFacebookページが並べられています。カテゴリは結構細かく分けられていますが、いかんせんまだ数が少ないのでまだ必要ない状態ではありますね。 VOGUEJAPANはコンテンツが充実してるので結構好きです。 520PX facebookmarkにも書いてありますが、まだ数が少ないのが日本の現状です。こちらのギャラリーも厳選しているため、まだ100に満たない状態です。もちろん審査有りですが、自信のあるF
tumblrで画像収集するのに向いてそうな、無料のテーマ・51個まとめ（と、少しだけ特徴をメモ - かちびと.net
tumblrで画像収集するのは割と当たり前 ですが、後で見返すときに見にくいテーマ だと見る気がしないのでいろいろ試して いましたが、せっかく試したのでついでに 画像収集に向いてそうなtumblrのフリー のテーマをご紹介します。 というか変えたい時に探してるんですけど、いちいち面倒なのでメモしたいんですが、せっかくなのでここにリンク集作ってシェアしようかなと思った次第です。 簡単ではありますが、特徴をメモ書きしています。Lightboxが付いてるとか、自動で次のページを読み込むとかリキッドレイアウトとか。 全てをちゃんと確認したわけではないので、参考程度に。順不同、全部で51個ありました。 キャプチャはテスト用で作ったものです 全部無料です 環境次第でカラム数が変わるものもあります 長くなってしまって見る気がしないので1カラムは省いています。 Themanati 3カラムのリキッドレイア
複数並べられたコンテンツをまとめてスライドさせるjQueryプラグイン・Grid Slide Plugin - かちびと.net
ちょっとうまい説明が思いつかなかった んですけど、複数並べられた画像など を同時にスライドさせるjQueryプラグイン。 省スペースに多くのコンテンツを表示 させる事が出来るのはちょっといいかも 知れません。 あんまり見かけないタイプのスライダーですね・・省スペースに沢山の情報を表示させたい、という時に使えそうな使わなそうな。たまに似たようなインターフェース見かけますね。 これらの8つのコンテンツ部分が同時にスライドします。オプションで数を減らしたり速度を変えたり。 デモ見たほうが早いですね。説明下手ですみません。 Demo js <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> </script> <script src="jquery.ea
jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた - かちびと.net
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
「WordPressのfunctions.phpを使って出来るカスタマイズ」をまとめたスレ・Best Collection of Code for your functions.php file
いつかやろうと思っていたWPの functions.phpで出来ることのま とめが、海外のWP専門質問サ イトにあったのでこちらをご紹介。 個人的にもかなり役に立ちました。 Q&Aサイトは色々助かりますよね。 WordPressのテーマファイルで使えるfunctions.phpは色々とテーマの機能を拡張するのに大いに貢献してくれます。 このfunctions.phpを使って何が出来るのかは、WebデザインレシピさんのWordPressのfunctions.phpに書いておくといいかもしれないコードいろいろという記事をご覧になってみてください。 今日ご紹介するBest Collection of Code for your functions.php fileというスレッドには79個の回答があります。 WordPressの情報専門のQ&Aサイト・WordPress Answersでのスレッド
[勉強用] WPのテーマに独自のオプション機能を加える事が出来るTheme Options Theme
なんと説明していいか分かりませんが、 配布されているテーマの中には、テーマ 独自のオプション機能が加わっているもの を見かけたことが有るかと思います。以前 当ブログで配布したテーマにも独自のオプ ション機能を追加しました。そのスニペット 的なソフトウェアです。 以前配布させて頂いたYoutube動画を背景に指定できるWPテーマ・WP-Tubularにも簡単なオプション機能を付けています。 このオプションを加えることで、ユーザーはPHPもHTMLも学ぶこと無く、簡単に好きなYoutube動画を背景に加えられる、という訳です。 ※プラグインではないです。念のため 勉強用にも良さそう。貴方だけのオリジナルオプション機能をテーマに加えることが出来ます。テーマファイルに加えるPHPファイルで、プラグイン作る程でもないけど、管理画面で変更できると良いよね、的な機能をつけてあげたり、なんて時に。 上図の
![[勉強用] WPのテーマに独自のオプション機能を加える事が出来るTheme Options Theme](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f6bc818ca62716d332249d7691031ec7d21b4aa/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2010%2F12%2Ftheme01.jpg)
2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net
少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基本的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン 読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考える ウェブデザインでこれは気をつけたいの35のポイント デザインQRコードの作り方 非デザイナーのための
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ - かちびと.net
個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas
日本のWebサイトの404ページデザインいろいろ+α - かちびと.net
気になって探したのですが、ググッても 9割は海外のデザインだったので、日本 の素敵な404ページを探してみました。 時間の関係でさほど数を揃える事が出来 ませんでしたが、少しでも参考になれば 幸いです。 404は、誰でも訪れる可能性のあるページです。ある意味、用意したコンテンツよりも見られる可能性がありますのでほんの少しでも手を入れておくといいかも知れませんね。 どこかで「404は古い。無条件でトップページリダイレクトが最適」なんて意見も見かけましたが、個人的にはユーザーを混乱させる要因になるのでリダイレクトは避けたほうがいいと思います。 では、個人的に気になった404ページをご紹介していきます。順不同で、ややサイトの属性がWeb関係に偏っていますがご了承ください。尚、リンクは404ページではなく、TOPページにしてあります。 株式会社サクラクレパス デザインも好評のサクラパレスの404ペ
不動産サイト構築がとても楽になる国産で無料のWordPressプラグイン見つけた - かちびと.net
ちょっと感動したので脊髄反射で ご紹介。日本の不動産サイト向け に作られたプラグインがかなり良い 感じです。不動産サイトの構築も かなり楽になりそうですよ。こういう ものは有料が多いですが、こちらは 無料で提供してくれています。 いつ有料になっておかしくない気がしますので今のうちにDLしておきました。お礼も兼ねて記事にさせて頂きます。 WordPress 不動産向けプラグイン もう、なんというか感謝です。このプラグイン入れるだけで、かなり楽になりますよ。 ざっと機能をご紹介。 専用の投稿画面 ↑ 通常の投稿画面とは別に、専用の投稿画面が用意されています。 画像を種類別に分けられる 不動産独特の画像の種類で分けられます。例えばキッチンとかトイレ画像とか。 管理用項目や詳細項目 物件番号、掲載日や制約の有無なども決められます。状態では空いてるかどうかの選択も。また、物件の種別、賃貸なのか分譲な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
