アニメーションGifの自動再生を制御する軽量スクリプト・「Gifffer」GiffferはGifアニメの自動再生を制御して再生開始ボタンを付与する軽量スクリプトです。1.8kbで非依存型なので使いやすそうです。再生する内容次第では動画を埋め込むよりパフォーマンスを向上させられるかもしれませんね。使い方も指定されたカスタムデータ属性でGifのパスを読みこめばいいだけみたい。ライセンスはMITとの事です。 Gifffer
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM
input要素に入力パターンを組み込めるjQueryプラグイン・formatter.js
地味に便利そうだったのでメモ。input要素に入力パターンを組み込める、というスクリプトです。jQueryに依存しています。ユーザーの入力の補助によさそう。 input要素に入力パターンを組み込めるスクリプトです。 クレカや電話番号などの数字の入力項目に良さそうですね。 $('#foo').formatter({ 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' });上記のように予めパターンを作成しておきます。 <input type="text" class="input" id="foo" maxlength="19" pattern="\d*">あとは指定したセレクタでマークアップすればパターンが適応されます。クレカ等なら、制作側はいちいち4つのinput要素を用意し、レイアウトする手間が省けて、ユーザーも別のinput要素に移動する
ソースコードも公開されているシンプルな.htaccess作成ツール・httool
.htaccess生成ツールです。よくある Webサービスなどのように高機能な ものではなく、予め用意された雛形 に入力していくようなもの。コードも 公開されているので自分の用途に合 わせてカスタマイズしてもいいかも しれません。 シンプルな.htaccess作成ツールです。多用するものでも無いかもですけど、書き方のルールが全然覚えられないのであると便利かも知れない。 URLを入れて、必要な項目にチェックを入れると.htaccessのコードが発行されるのでコピペしてね、みたいなやつです。HTML+JSで出来てるみたいなのでローカル環境でも特別な設定も不要で動いてくれる、という手軽ががいいですね。 シンプルな作りなので自分用にカスタマイズしても良さそう。用意されている項目は非wwwへのリダイレクトやホットリンク防御など簡単なものが殆どです。 このブログではhtaccessは使ってませんけど、
サイト構成 - かちびと.net
【２００９・５・３１最終更新日】 ※情報は非常に古いです。参考になさいませんようご注意ください。 かちびと.netはWordPressというオープンソースのCMS（コンテンツ・マネジメント・システム） で作成しています。WordPressにはテーマスキンを簡単に変更出来る事も特徴のひとつで、 私もあるテーマをベースに、かちびと.netのような独自のテーマスキンを作成しました。 そのカスタマイズ法を一つも隠さず書いて置きます。 もくじ カテゴリごとに違うsingle.phpを呼び出すカスタマイズ法 WordPressのテーマSEOハック 使用しているプラグインの解説 WordPressに関する雑感 便利な便利なブログパーツ Twitterが好きなんです かちびと.netは完成しない カテゴリごとに違うsingle.phpを呼び出す 通常、WordPressは記事にsingle.phpが割り当
WordPressのwp-config.phpで出来る事いろいろ
自分用メモ。wp-config.phpの設定 で出来る事のリストです。よくある カスタマイズは、テーマファイル内 にコードを書きますが、wp-config で出来る事を知っておくのもとても 大事ですね。 普段あまり利用しないので覚えてないし、困ったときはいちいち探してるので時間をロスしないようにメモしておきます。 スニペットのメモリストですし、細かい解説は面倒なんでしません。また、「wp-configってなんだろう？」という方には全くお役に立てないと思います。 wp-config.phpで出来る事リスト以下リストです。古いバージョンの事は視野に入れてません。 リストはCODEXのwp-config.phpの編集から抜粋しています。 ※変更前にバックアップして下さい ※自己責任でお願いします ※コード一覧は記事最下部に有ります 01. デバッグモードにするdefine('WP_DEBUG',
ページ移動の必要が無くなるページング系jQueryプラグイン・Pagination Plugin - かちびと.net
ページングのユーザビリティを あげたいけど、オートタイプは 嫌だ、と言う方にオススメの jQueryプラグインがありました。 選択肢の一つに如何でしょう。 タブのような感覚でページ移動が出来ます。ページ数の多いサイトはユーザビリティとしても取り入れたいですね。
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利 - かちびと.net
昨日知ったWebサービスに久々に感激したので勢いでシェアします。Web制作で必ずと言っていいほど必用になるダミー画像を生成してくれるサービスなんですが、これが個人的にかなり便利でした。 PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。 ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。 使い方 使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。 例えば350×150ピクセルの画像が欲しいなら http://placehold.it/350×150 にアクセスすれば指定したサイズの画像が表示されます。 なので、 <img src="http://placehold.it/350x150" /> これで以下のようにダミー画像を表示させる事ができます。 勿論、細か
jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々 - かちびと.net
気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも大丈夫っぽい。多数のオプションも用意されており、FlickrAPIにも対応してるくさいです。ライセンスはMIT/GPLのデュア
無料・商用利用OK・バックリンク不要・著作権表示も不要で使える写真や日本語フォントなどの素材サイト集 - かちびと.net
少しリソースが溜まってきたのでリンク集に して開放します。バックリンク不要で、商用 の利用可能、著作権表示も不要のWebデザイン 向け素材サイト。商用で使ってもいいけど リンクしてね、といったようなCCのBY的な ライセンスだとどうしても個人的に使いにく いのでバックリンク不要は割りと必須です。 今までのリソースをまとめただけなのでほぼ全部既出だと思います。自分用リンク集なのでいろいろ適当です。 細かいライセンスもあるので利用規約には必ず目を通してください。 9search この記事の題名の条件の素材を紹介しているサイト。小物系探すなら最初にここ見たほうが早いです。 9search ソザィ-Sozay- こちらもこの記事の題名の条件で収集していますが、素材単位ではなく、Webサイト単位で紹介しています。国内多めですかね。 ソザィ-Sozay- 国内のWeb制作に役立ちそうな無料の写真素材や
最近見つけた完成度の高いフリーのWordPressテーマ - かちびと.net
最近知ったthemes2wp.comというサイト のフリーのWordPressテーマで、個人的 に完成度高いなと感じたテーマをいくつか ご紹介したいと思います。完全に主観が 入っているので参考にならなかったら ごめんなさい。 ここで言う”完成度が高い”、というのは「使いやすそう」「変更箇所が少なそう」という意味です。いいデザインにしたいけどカスタマイズは面倒・・・という方にお勧めです。11個あります。 [note]ワームのご報告を受けて全テーマへのリンクを削除しました。テーマは沢山ありますのでテーマカテゴリでお探しになってみてください。[/note] BlockStock Theme 非常に綺麗なテーマです。シンプル系がお好きな方なら殆ど変更する箇所無さそうな気がします。個人的に凄く好きなテーマです。 ※「誰がために鐘は鳴る」さんよりご指摘を受けてリンクを削除しました BlockStock
スライドギャラリー、エフェクトなど、画像関連のmootoolsプラグインまとめ
cssやプログラミングMootools 最近jQueryばかりなので 備忘録的にmootoolsの プラグインもいくつかまとめて おこうと思ってエントリーします。 最近jQueryばかりなので 備忘録的にmootoolsの プラグインもいくつかまとめて おこうと思ってエントリーします。 個人的に使用頻度が高いのは 画像関連なのでそれ中心に。 mootoolsもjQuery同様、軽量なjsライブラリとして人気を集めています。以前話題になったscroll-clock（スクロールバーで作られた時計）もmootoolsを使ってます。「それ、jQueryで出来るよ」というのはとりあえず置いておいて、mootoolsの画像関連プラグインをいくつかご紹介します。 ※利用にはmootools.jsが必要です。 Exhibition これいいかも。クリックした画像にスムーズにスクロールします。縦横斜めに動き
パブリックドメインやGPLライセンスの高品質なアイコンをパッケージで配布しているOpen Icon Library
素敵なアイコンをフリーで配布している Open Icon Libraryをご紹介します。この サイトではパブリックドメインやGPLなど、 商用でも使えるライセンスのアイコンも 豊富にあり、ライセンスパッケージもある ので結構使い勝手は良いのでは。 素敵なアイコンをフリーで配布している Open Icon Libraryをご紹介します。この サイトではパブリックドメインやGPLなど、 商用でも使えるライセンスのアイコンも 豊富にあり、ライセンスパッケージもある ので結構使い勝手は良いのでは。 オープンソースのソフトウェアで有名なsourceforgeのサブドメインで運営されているサイトみたいです。数はかなりありますのでとりあえずDLしておきたいところ。詳細は以下より。 基本的にフリーで使えるアイコンのみが置かれていますが、それぞれライセンスが異なります。Open Icon Libraryでは
背景等に重宝するシームレス（繋ぎ目無し）な写真のパターン素材いろいろ
Webデザイン繋ぎ目の無い写真素材 写真、または見た目が写真に近い ものでシームレス（繋ぎ目無し）な 素材を背景に使う事が個人的に 多いので倉庫代わりにエントリー。 背景以外でも結構使い易いです よね。 写真、または見た目が写真に近い ものでシームレス（繋ぎ目無し）な 素材を背景に使う事が個人的に 多いので倉庫代わりにエントリー。 背景以外でも結構使い易いです よね。 そういう訳で色々な種類のシームレスタイプの写真素材を手に入れられるサイトをメモします。写真以外のパターン素材でしたら無料でテクスチャやパターン画像を手に入れられるサイトいろいろというきじも書いていますのでこちらをご参照下さい。 Seamlesstextures.net 一番よく見てるサイトですシームレス写真専門のサイト。 Seamlesstextures.net cgtextures cgtexturesで「pattern」
シンプル、ミニマルなサイトを作りたい時に役立ちそうなアイコンやフォント、ギャラリーなどのまとめ - かちびと.net
個人的にミニマリズムなサイトが 好みなので自分用の備忘録です。 情報が多いので若干まとめのまとめ という感じになっていますがご了承 下さい。シンプルなサイトを作る時に 役立ちそうなリソースやギャラリーを。 内容はシンプルなアイコン、インスピレーション向上に必須なギャラリー、相性の良さそうなフォントなどになります。 白黒のサイトを作りたいときに役立つもの、という記事と被りますがご了承下さい。 Iconic モノクロながら可愛らしい感じのアイコン103個セット。 Iconic picol 汎用性の高そうなアイコンセット。 picol Token 色々なところで紹介されてるアイコン。28万人中10万人はDLしてるみたいです。人気ですねー。 Token Brightmix icon set EPSファイルで配布されるアイコンセット。丸型にほぼ統一されてます。地球のアイコン凄いですね。。 Brigh
配布する全てのフリーフォントがクリエイティブ・コモンズの「FREE FONTS」
配布しているフォントが全てフリーで ライセンスがクリエイティブ・コモンズ ライセンスのFREE FONTSをご紹介 致します。数が大量では有りませんが、 全部CCライセンスなのはありがたい。 FREE FONTSでは配布しているフォントは全てクリエイティブ・コモンズライセンスで提供されています。 計60ものフォントがCCライセンスで無料で手に入ります。配布されているフォントもクオリティ高め。 汎用性も高そうです。 クリエイティブ・コモンズに関してはフッターに明記されています。↓ フォントは著作権に困る事が多いので助かりますね。以前GPLライセンスのフォントの記事も書きましたので宜しければ合わせてご覧下さい。 FREE FONTS コメントやTwitterで有料のフォントが含まれていると教えていただきました。真相を件のサイト管理者に問いますのでご利用はお控え下さいます様お願いいたします。大変
あのサイトを作りたい！オープンソースのクローンCMSまとめ
「自分であんなサイトを作りたい」と、思う Webサービスは結構多いかと思います。 いくつかの有名なWebサービスは クローンのCMSがオープンソースとして 提供されているものがあります。そんな クローンタイプのCMSをいくつかご紹介します。 既出のCMSばかりですが、個人的も一度まとめておきたいのでメモも兼ねて。 Diggクローン 海外でもかなりの人気ソーシャルサイト、Diggのようにユーザーが投稿、Vote（投票）を行えるCMSです。以前SEOカスタマイズ法も書いたので宜しければ合わせてご覧下さい。Pliggが相性悪いなと思うようならPHPDugもいいかも。 Pligg / デモ Deliciousクローン ソーシャルブックマークサイトとして有名なサイトがDeliciousです。タグを付けてWebサイトへのリンクを簡単に追加、共有できるオーップンソースのCMSがscuttleです。僕もこ
ユーザーのニーズを把握する7のフリーのHeatmapツール
ヒートマップとはクリックした場所を 把握する為のアクセス解析の類で 物を言わないユーザーの行動 パターンを把握し、ユーザビリティに 繋げる為に使用されます。決して 熱い地図とか情熱大陸の英語版 等ではないです（分かるがな そんな便利なヒートマップですが、多くは有料のサービスで以前は 無料版もあった有名なCrazy EggもＡｌｌ有料に なってしまったので無料で使用出来るヒートマップのサービスや ソフトウェアを７つご紹介します。 ClickHeat 個人的には一番使いやすい印象でした。インストール型ですが、 インストールも簡単で日本語化されています。GPLで配布される オープンソースのアクセス解析ソフトで、PHP、MySQLで動きます。 使用法ClickHeatをDLして解凍、フォルダごとアップロードします。フォルダ名はClickHeatとします。 http://example.com/Cl
色付けするだけの便利な白抜きの画像素材いろいろ - かちびと.net
使いたい素材が無料で配布 されていても、既に色付けも してあるとデザインを変えるのは なかなか面倒だったりします。 そのまま使えるものあるにはあるけど、 やっぱりオリジナリティが欲しい！ なんて時に便利な白抜きの素材を いくつかご紹介します。 もともとは24 useful free vectorsというエントリー内にこういった素材がいくつか合って使えそうだなーと思ったので記事にしてみました。探せばまだ有りそうなんですが、とりあえず20点ほど。 MacBook Pro Freebie 薄型のMacbookの白抜き。 MacBook Pro Freebie New Exclusive EPS and AI Vector PACK 様々なボトルの白抜き画像。いろいろ用途ありそう。 New Exclusive EPS and AI Vector PACK Rough, Hand Drawn Ill
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryスニペット | かちびと.net