ボックスごとリンク化する - かちびと.net
Result jQuery $(document).ready(function() { //class="box"をクリックでイベント発火 $('.box').click(function() { //a要素からhref属性を探して中身を取得し、そのURLに飛ばす。別窓なら('href'), '_blank'とすればOK window.location = $(this).find('a').attr('href'); return false; }); }); HTML5ならボックス要素にリンク貼れますのでこのコードは不要ですね。 css .box{ background: #eee ; padding: 50px ; margin:50px; height: 200px ; width: 200px ; cursor: pointer; } .box:hover{background
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
手書き風のWebデザインを作りたい時に役立ちそうなフリー素材やデザイン例まとめ - かちびと.net
個人的に大好物の手書き風な Webデザインを作りたい時に 役立ってくれそうなフォントや テクスチャ、アイコンなど、無料 のリソースをメモしておきます。 手書き風と言っても色々あるのでこのまとめは偏ったものになっているかも知れません。参考程度にして頂ければ幸いです。全ては掲載出来ないので個人的に好みのリソースを厳選します。 日本語フォント ふい字 かなり使用条件を緩くしてくれている有名な手書きフォント。 ふい字 みかちゃんフォント こちらもかなりオープンに配布してくれています。 みかちゃんフォント あんずもじ 縦書き用も含まれています。こちらも有名なフォント。 あんずもじ ひま字 基本的には商用でも利用可能ですが、よく規約を読んで。可愛くて使いやすいです。 ひま字 ミウラ Liner ジュニア 漢字もがっつり入った素敵なフォント。 ミウラ Liner ジュニア 衡山毛筆フォント 著作権を放棄
WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする - かちびと.net
凄く今更な話題かもしれませんが、知ってると便利なのでちょっと書いてみます。WordPressのテーマのcssに変更を加えたときに、表示をクライアントさん等に確認して貰う際、キャッシュの説明をするのがかなり面倒です。 というわけで、古来から伝わるcssファイルのキャッシュ(cssに限りませんけど)を防ぐ方法をWordPressで、という内容です。 この辺の理屈は、よく拝見させて頂いている小粋空間さんが書かれてますので合わせてご参照下さい。 コード get_bloginfo( ‘stylesheet_url’ )の方の方が多いかもですけど、今回はcssを読み込ませるのにこれ使います↓ href="<?php bloginfo('stylesheet_directory'); ?>/style.css" これで以下のように出力。 href="http://example.com/wp-conte
リンク不要で商用サイトにも利用可能なフリーのアイコンセットいろいろ - かちびと.net
商用でも使っていいよと言ってくれて いるアイコンセットのまとめです。商用 でもOKだけど、要リンクタイプのクリエ イティブコモンズライセンスや、リンク シェア等の「リンク必須」な商用可アイ コンと、あまり使う機会の無い、ソーシ ャルメディアのアイコンセット、RSSア イコンのみのセットなどは割愛しています。 個人的に実用できる、リンク不要のアイコンに絞っています。一応商用OKを確認してはいますが、さらっとしか見ていないので間違ってたら教えていただければ幸いです。また、ご利用の際はご自身でライセンスを確認してからご利用下さい。 200+ Exclusive Free Icons: “Reflection” リフレクションを与えたモノクロアイコンのセット。 ※リンクウェアでした・・・大変失礼致しました 200+ Exclusive Free Icons: “Reflection” Simpli
ゲーム感覚で楽しく学べる系Webサービスいくつか - かちびと.net
ちょこちょこ見かけるので最近に なって見かけた、ゲーム感覚で 楽しく学べるWebサービス的なもの をご紹介。Webアプリのアイデア の参考にもなればなぁとの気持ち も込めて。 ゲーム感覚で学べる、みたいなWebサービスは昔からありますので、ここ最近見かけたものを中心に少しまとめてみます。暇つぶししながら学べるって考えるとお得かもしれませんね。 Web制作に関わるものが中心です。 Kern Type カーニングをゲーム感覚で楽しく学べます。ドラッグで文字詰めしてください。 Kern Type Shape Type ベジェ曲線を学べるサイト。デザイナーさんは勿論、非デザイナーさんもこういうのでデザインがいかに難しく時間がかかるものか理解できるのではないかと。こういうの体感しておくとデザインなんて安売り出来ないし、簡単に学べない事が分かるかと思います。 Shape Type Color — Me
【木目素材祭！】木目、ウッドテイストなアイコンやフォント、テクスチャなど37点
木目が好きです。だからやります、木目素材祭り。 木目のアイコン、フォント、テクスチャや PhotoShopブラシ、WordPressのテーマ、 おまけに僕が衝動買いした木目アイテムも 合わせてご紹介します。木目好きの 僕にはヨダレ物のエントリーです（自己満足 ※ライセンスには十分ご注意下さい。 木目アイコンいろいろWood RSS Feed Icons クールなRSSアイコンのセット Wood RSS Feed Icons Glossy Waxed Wood Icons Social Media Logos 高級感ある木目アイコン108個セット。単体でもDL可能。 Glossy Waxed Wood Icons Social Media Logos Made Of Wood 木目調のフォルダアイコン。かっこいい。 Made Of Wood Wooden Slick Drives coolな
ノンプログラマー向けのWordPressカスタマイズハック用プラグイン・WP Total Hacks - かちびと.net
昨日Twitterにも情報流れてましたけど やっぱり便利なプラグインなので、改め てご紹介。僕やほかのブログでもよく 見かける、functions.phpにコードを追加 して行うカスタマイズを1つのプラグインで 管理できるようにしたもの。 デベロッパーは最近よくお話させてもらっている@miya0001氏。よく見かける、需要の高そうなfunctions.phpでのカスタマイズをプラグインで一括管理出来るようにしてくれました。 ページ推移も不要で、よく見かけるカスタマイズハックを簡単に行うことができます。 functions.phpに追記すればOKなものばかりですが、もともとコードがごちゃ付いてる場合も多々ありますが、PHPの知識が無いとなかなかテーマファイルに手を加えるのはハードルが高いと思います。そんなノンプログラマーさん向けに作られたプラグインです。 出来ることは以下。プラグインを有効化
比較の仕方の話 - かちびと.net
3連休ですねー。いかがお過ごしでしょうか？ さて、最近少し気になることがあるので、 たまには日記のようなものでも書いてみよう かなと思います。ここで書かなくてもいい かなとも思うんですけど、どこで書いても 変わらないですしね・・・ ちょっとタイトルが簡素すぎてアレですけど、何かと何かを比較する事の話です。全然考えがまとまってないし、そもそも行動分析の専門家でもなんでもないので特別な内容ではありませんけど、まぁただの日記ですので細かいことは気にしないで下さい。 人が比較する理由 比較というのは何かを何かを比べる事で、人が何かを比較する理由は、基本的には差をはっきりさせるためです。それにより優劣を決めたり、何が違うかを可視化しやすくなるわけですね。分かりやすい例だと 物の価値や値段 人や動物の容姿や性格など データ分析に使用するファクターの一つ なんかを分かりやすくする為に用いられたりします。
Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合
WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α - かちびと.net
以前書いたWordPressでWeb制作する際 の手順リストが少し古い情報込みだったり するので改正版を書きます。先日、WPも 3.2のリリースを迎えましたので、手順リスト もアップデートすることにしました。多少考え が変わっているので内容も少し変更有ります。 以前のリストの改正版です。加えて他の情報も一緒に載せておく事にしました。 【2011・07・11】 WordPressインストール サーバーを用意（PHP5.2.4 以上 / MySQL5.0 以上） DBを作成 WordPressをダウンロードし、解凍 wp-config-sampleをwp-configにリネームし、内容をDBに合わせて変更 プリフィクス（接頭語）を変更する（wp_→foodblog_） FTPソフト等でサーバーにアップロード サイト名やパスワード、IDを決める（adminは避ける） 作成したユーザー名でログイン
最近よく使ってる、Web制作に役立つWebサービス的なやつ
少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を
スクリーンショットを撮るChromeエクステンションはAwesome Screenshotが一番良かった - かちびと.net
やっと捜し求めていたものに出会えた と思ったChromeのキャプチャ系のエク ステンション。いくつかあるんですが、 どれも微妙でした。で、ようやく自分の 求めていた機能を持ったエクステが 出てくれました。 Awesome Screenshotです。もう結構DLされてるんですね。人気のWebpage Screenshotが最近よくクラッシュするし、他のも微妙で困っていました。 ブロガーさんには特にオススメです。個人的に求めていたのは 軽量 操作が楽 多機能で無くていいからシンプルに ページ全体を撮れる クラッシュしない という条件だったのですが、これらは全てクリア、クラッシュはまだ分かりませんし、環境によりけりでしょうけど・・更に編集機能まで付いています。何より、動作が軽いのが決め手でした。 使い方 DLするとアイコンが出ます。キャプチャを撮りたいページでアイコンをクリックすると「見えてる部
商用サイトでも無料の国内外のWeb制作に使える素材サイト総まとめ・2009 - かちびと. net
ローカル環境にストックしていた日本国内、海外サイトで商用OKなWeb素材を配布しているサイトのリンク集が結構な量になってきたので出来る限り多くの方とシェアしたいと思ってエントリーします。 懐の広いクリエイターさん方に感謝します。このリンク集は商用サイトでも利用が可能（Commercial use）なWebサイトの素材情報です。一応確認はしていますが、ご利用の際はご自身の目で必ずライセンスや利用規約（Terms of Use等）をご確認下さい。サイトごとに利用規約も異なります。当サイトは一切の責任を負いかねます。 日本国内、及び海外の商用OKなWeb素材配布サイトと日本語で紹介された海外記事のまとめです。 2度手間を防ぐ目的でリンクにマウスオーバーすると画像をツールチップで表示するようにしました。多少表示に時間掛かるかもしれません。 写真 商用サイトでも利用できるロイヤリティフリー、パブリッ
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer
結局、一番使いやすくて高機能なSEOツールはSEOチェキ！だった - かちびと.net
Firefoxのアドオンやよく言われる 海外のSEOエキスパートみたいな 方々の作成したSEOツールも凄いけど 結局僕が一番使いやすくて高機能 だと思ったSEOツールは国産の SEOチェキ！でしたので機能をご紹介。 使い方次第なのかもしれませんが、結局一番使うのはSEOチェキなので紹介します。アライグマかレッサーパンダか未だにその正体を教えてくれない友達のロプロスさんの作ったツールですが、贔屓なしに現時点で最高のSEOツールです。 ※書いてある順番は適当です。書かないと分からないようなので追記しました。 Ajaxで動くのでとにかく軽快 国産なので開発者と連絡が取れる 無料で広告も無い 調査できる必要項目がほぼ全て揃ってる やたら見やすい といった感じで重宝しています。とにかく動作の軽快さ。これが大きいです。SEOツールなのに動作が重いってユーザビリティ的にどうなの？って気がしますのでいくら
WordPressを使ったWebサイトでfunctions.phpによく書いてるやつ - かちびと.net
お問い合わせ頂いたので記事にします。 WordPressのfunctions.phpは便利なの はよく分かりますが、結局何が出来るの か分からないのでこんな事できる、という のがあれば教えて欲しいとのことでした。 僕も詳しくないので僕も教えて欲しいんです が、一応書いてみます。 基本的にfunctions.phpはちょっと機能を追加したい、という時に使うものだと思うのでデフォルト機能やプラグインで済むならそうしたほうがいい気がしますのであまり拘らなくてもいいかと思います。 それでも、やはりお仕事ではよく追加する機能はありますのでそれをご紹介します。 ※ウィジェットは割愛しますね カスタムポストタイプ add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'exa
インスピレーションを刺激させたい時に大抵見てまわるWebサイト集
インスピレーションを向上させたい 時に僕が見てまわるWebサイトを ご紹介。というか基本的に殆ど閃く 事は皆無に等しいレベルでナンセ ンスな人間なのでドーピング的に 綺麗なものを見るようにしています。 というわけで、発想力の有る方には全く役に立たないエントリーです。個人的には勉強を兼ねたWebデザイン、フォトグラフィのためのインスピレーション向上が目的ですが、「発想力を上げる」というのは様々な業種の方にも通ずるものがあるのではないかと思っています。 パッと見、一貫性の無いまとめですが、どのサイトからもアイデアを貰ったことがあるのでそういったWebサイト集になります。順不同。 Dribbble 世界中のデザイナーの作品が見れるサイトです。新しく作ったコンテンツを公開してくれます。色やカテゴリで探せますが、どれも素敵なのでダラダラ見てるのも楽しいです。 Dribbble We heart it
最近知った素晴らしいデザインの国内ブログいろいろ
「最近」というのはここ4～5ヶ月 を指しています。国内のブログで 凄く素敵だなぁと個人的に感じた サイトをご紹介させて頂きます。 主観で選んでいますのでその辺 ご了承くださいね。。 （恐らく）配布されたテンプレート等を使用していないブログデザインを選んでいます。更新のあまり無いブログやコンテンツの少ないブログは極力割愛しました。 K’conf 一目惚れしたブログです。メニューのツールチップもいいですね。クールなデザインですがなんとなく柔らかい印象も受けます。内容もWeb制作に役立つ情報なども配信してくれています。 K’conf Photoshop Vip このブログと同じ時期くらいに始められたそうです。大きなフォントが凄く印象的。リニューアルも検討されていると伺ったので変更されるかもしれません。 Photoshop Vip RedLine Magazine クール＆ビューティーなデザインで
Google Chrome使い始めたけどFirefoxにはコレがあるから完全に移行出来ないっていうアドオンまとめ
二十歳街道まっしぐらさんの私が Firefox から Chrome に乗り換えた７つの理由という記事に刺激されて食わず嫌い（と言うほどでも無いけど・・）していたGoogle Chromeを使い始めました。 記事通り、リリース当初よりかなり便利になっていますし、Chromeの速度はかなり魅力なのですが、Firefoxの「このアドオンがあるから・・」という理由でやはり完全に移行出来ませんでした。カメきちさんの記事のブコメもいろいろと参考になりますね。一言で済ますと好みですよね。使いやすいもの使ったり併用したり。 僕は今は半々くらい、ややFirefoxよりでテスト利用しています。通常ブラウジングは殆どChromeになりそうです。ついでに「このアドオンがあるから・・」というアドオンをご紹介したいと思います。 「お勧めアドオン」系の記事ってあまり参考にならないことも多いと思いますので「こいつはこんな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
