Kachibito.net is a website to writing tutorials and code snippets for Web Developers, the main subjects are WordPress, javascript, CSS, OSS, tools and resources. Links About/Privacy Policy Contact X(Twitter) Facebook
jQuery UIで利用出来るテーマを オンラインで作成出来る、という Webサービス・jQUIT Builderの ご紹介です。公式でもかなりテーマ を用意してくれていますが、やはり 自作したいところですね。 考えただけでも面倒臭いjQuery UIのデザインをオンラインで作成出来る、というWebサービス。凝ったものは作成できませんが、シンプルなデザインでサクッと作りたいという時にはお世話になりそうです。 いわゆるジェネレーター的なものです。Metro UIベースだそうですよ。見やすくて個人的には結構好きです。 こんな感じ。使い方の説明は不要だと思います。 操作も簡単でいいですね。探せば他にもありそうなツールでは有りますけど個人的には初見でした。 jQUIT Builder
珍しいタイプだったので何となく ご紹介。WordPressの管理画面内 のヘルプを作成・管理できる、 というWordPressのプラグイン。 記事を書くようにヘルプコンテ ンツを作成出来ます。 クライアントワーク向け、マルチユーザーサイト向けのプラグインでしょうか。管理画面内のヘルプを作成出来るWordPressのプラグインです。いろいろ思いつきますね・・ 管理画面内でヘルプを作るプラグイン。コード見てないけど、カスタム投稿タイプでやってるっぽいです。こんなのも出来るんですね。 こんな感じで作れます。ネストも出来るしドラッグ&ドロップで順番を変える事も可能です。 ヘルプの作成は記事を書くように作成出来ます。 なかなか面白い。他の用途もありそうですね。コードも参考になりそうなので暇を見てチェックしたい。 WP Help (via:WPMU)
自分用メモ。wp-config.phpの設定 で出来る事のリストです。よくある カスタマイズは、テーマファイル内 にコードを書きますが、wp-config で出来る事を知っておくのもとても 大事ですね。 普段あまり利用しないので覚えてないし、困ったときはいちいち探してるので時間をロスしないようにメモしておきます。 スニペットのメモリストですし、細かい解説は面倒なんでしません。また、「wp-configってなんだろう?」という方には全くお役に立てないと思います。 wp-config.phpで出来る事リスト 以下リストです。古いバージョンの事は視野に入れてません。 リストはCODEXのwp-config.phpの編集から抜粋しています。 ※変更前にバックアップして下さい ※自己責任でお願いします ※コード一覧は記事最下部に有ります 01. デバッグモードにする define('WP_DEBUG
黄金比を取り入れたグリッドレイアウト のWebデザインを作る際のPhotoshopや Fireworks用テンプレや、PSアクション などがセットになったデザインキット・ The Golden Gridのご紹介。アクション が便利そうでした。 黄金比を取り入れたグリッドレイアウト用のPSDやFw用テンプレとかアクションがセットになってるやつです。グリッドレイアウトは960グリッドシステムに準じているみたい。 内容物は以下となっています。 PhotoshopアクションPhotoshop用テンプレートFireworks用テンプレートillustrator用テンプレートindesign用テンプレートomnigraffle用テンプレートpixelmator用テンプレートflash用テンプレート上記にそれぞれ12カラム、16カラム、24カラムが用意されています。 ↑ a:bが1.6180:1となって
ユーザーにどれくらいページ内で スクロールされているかをGAの イベントAPIを使って解析する為 のjQueryプラグイン・Scroll Depth のご紹介。 スクロールに応じて視差効果を演出できるパララックス系サイトやペラサイトのような1ページで完結するタイプのコンテンツを持つサイトは割と見かけるので、どれくらいスクロールされているかを解析する方法もあるといいかもですね。という需要に応えたライブラリみたいです。 ※時間なくて動作テストしてないのでその程度の記事という事で今日はご了承下さい。 ユーザーのスクロール状況をパーセンテージでトラッキングするプラグイン。デフォルトでは25%、50%、75%といったポイントで解析できるようになってるみたい。また、任意のDOM要素をターゲットにする事も出来るそうです。 コード<script src="https://ajax.googleapis.c
クライアントワーク向けのWordPressの プラグインです。管理画面のメニュー はWebに疎いクライアントさんには世辞 にも使いやすいものではありません。 そんな管理メニューを使いやすくする、 という目的で作られたプラグインです。 同じような物は作ってあるんですけどこちらの方が作りが良かったので利用させて頂く事にしました。 こういうやつです。こういう配慮があるのと無いのとでは大きく管理モチベーションが変わってきます。僕も未だに使いにくい管理画面のサイトは使う気になりません。初心忘れるべからず。思いやりとは相手の身になる事ではなく、自分の物差しを相手に押し付けない事ですよね。相手の身になる、って結局自分の考えの押し付けでしょうし。 表示するメニューも選択する事が出来るので、一度作れば使い回しが利くのでは。 英語ですけど、ソース見れば簡単に変更できるのが分かりますので全く問題ないと思います。
今日もWordPressの記事です。今日は、クライアントワークで、納品物としてWordPressを使うときに覚えておくと便利な管理画面をカスタマイズ出来るコードのまとめです。ほとんど地味な施工ですけど。 今日はクライアントワーク向けの管理画面カスタマイズコードをいろいろご紹介します。こちらも、昨日お知らせしたWordPressスニペットに掲載しますのでそちらでもご確認頂けます。と言うわけで宣伝でした。 WordPressスニペット まだ未完成ですけど暇を見て使いやすく出来たらなぁと思います。 更新をWebに疎いクライアントさん側で行うのであれば、管理画面の利便性の向上は更新モチベーションに繋がりますし、工数分の売り上げ増加にも繋げられます。地味だけど、覚えて置いて損はありません。 では、コードいろいろです。コピペはあまり良く無いですけど、今日はまとめ記事なのでコードの解説は割愛させてくださ
土曜日なので軽い話題でもご紹介。 ノイズっぽいテクスチャの背景を よく見かけると思いますが、そう いったパターン画像をオンライン で生成出来るWebサービスです。 地味に便利かも。 パターン画像は重宝しますし、こうしてパパッと作れるので覚えておくとどこかで役に立つかもしれません。 操作もシンプルなので操作すれば分かると思います。ので、使い方は省きます。 画像はData URI schemeで吐き出されます。DLするなりそのまま利用するなりお好みで処理してください。 ガチのクライアントワークでないならこんなんでもいいんじゃないですかね。楽できるところは楽したいです。 Noise Texture Generator
特にネタも無いのでダウンロードした フォントをまとめておきます。好みの テイストじゃなくてニーズに合わせて ダウンロードするので一貫性があまり 無いですが、その辺は適当にスルーし てください。 殆ど英語です。順不動。 Linden Hill 有名なRalewayを産んだフォントファウンダリと同じところのフォントです。数字が可愛い。ライセンスはOFL。 Linden Hill GOVERNOR レトロなフォントを排出するファウンダリの提供するフォントの一つ。可視性が高くて好きです。商用利用も無料。ライセンスはDLしたファイルに同梱されてます。 GOVERNOR Rex こちらはフリーフォントを中心に扱うファウンダリの提供するクールなフォント。商用でも無料ですけど、Webフォントで利用する場合はファウンダリへのリンクが必要です。 Rex Villa Didot こちらもレトロな感じ。多分使う機
地味に困ってた事が楽に解決したのでシェア。 WordPressで諸事情で無駄に追加してしまった 不要なカスタムフィールドの名前ってあると 思うんです。誤操作とか、他のプラグインで 自動で追加されたけどいらなくなった、とか。 そういう不要なカスタムフィールドを消す事 が出来るプラグイン。 削除するときはDBで直接消す、という手軽に消せないカスタムフィールド名。消さなくても大きな実害は多分無いけど、選択するときにプルダウンにあるのが凄く邪魔です。でも、それだけの理由でDBをいじるのは、慣れていない方にはちょっと気が引けます。 というわけで、簡単に消せるプラグインをご紹介します。これでストレス無くカスタムフィールドを利用できますね。 Delete Custom Fields 1つしか使わないのに誤作動とかテストで追加したやつが残って邪魔やねん・・・みたいな状況。地味にストレス溜まりますので、簡単
来年の復習用の記事リストです。自分用。 年末ですし、だれかがまとめ記事を書く と思って待ってましたが、他力本願も あまり良くないので自分でリストを作る 事にしました。去年も作ったけどあまり 出来なかったんですよね。。 タイトル通り、個人的に参考になった記事で、来年の勉強用リストです。 去年の記事(2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ)と似たような感じだけど、必要な情報が偏ってきたのと、国内のRSS購読ブログ数が1/30になったのでリストも偏ってます。 リストの内容に関して この手の記事はいろいろご意見頂き易いので、ご覧頂く方に不毛なストレスを与えないように、内容に関して先に記述しておきます。 リストの内容ですが、単なるリソースの羅列のようなまとめ記事は個人的に参考になったことがないので割愛しています、というかこの記事自体そんな感じです。また、結果のみで解説
3連休ですがいつも通り更新です。暇なものでして。今日はWordPressの小ネタです。一見凄く使えそうですが、使い方に気を付けたほうがいい、みたいなTips。任意のファイルを外部だろうが内部だろうが読み込むショートコードです。 休日ですし、ちょっとネタっぽい内容です。htmlでもxmlでもcssでも、指定したファイル内の文字列を取得してその場に実装します。 以下のコードをfunctions.phpに含めます function show_file_func( $atts ) { extract( shortcode_atts( array( 'file' => '' ), $atts ) ); if ($file!='') return @file_get_contents($file); } add_shortcode( 'show_file', 'show_file_func' ); で
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). (意訳:バグを報告するとき
以前ご連絡を頂いたフォントポ日本語の 作者さんから新作のお問い合わせを頂 いたのでご紹介。やわらかい印象の明朝 系フォント、「はんなり明朝」です。こちら も商用で利用できるとのことです。なんとも 太っ腹ですね・・ フォントポ日本語の作成者さんからまたまたご連絡いただきました。いつもありがとうございます:D 商用で利用できる日本語フォントに新しく仲間入りです。 かわいいですねーwきりっとした印象の明朝ですが、こちらは少しふんわりとした印象を与えられそう。明治時代の築地体を参考に作られたそうですよ。 利用規約 利用規約は 当サイトのフォントはすべて無料です。個人・商業用途での利用について特に制限はございませんので、どうぞお気軽にご使用ください。ただし、フォントデータの改変はおやめください。また、フォントの使用によって生じたいかなる結果や損害につきまして、一切の責を負いませんのでご了承ください。
千手観音の如き機能と噂のSEO系 WordPressプラグイン、HeadSpace2 を導入してみました。確かに高機能です。 WPでSEOするならコレ1本使いこなせ ればheadを弄る事もあんまりない気が します。HeadSpace2の機能はそれだけ では有りませんが、いいプラグインだと 思うのでご紹介です。 ほぼ全ての機能をご紹介しています。 インストール 1・ダウンロードして解凍 2・wp-content/plugins内に解凍したファイルをコピー&アップロード 3・プラグインを有効化 4・各種設定 5・Done 設定 設定にHeadSpaceが現れます。HeadSpaceのメニューは ・ページセッティング ・ページモジュール ・サイトモジュール ・オプション ・インポート があります。分かる範囲で以下にご紹介します。 ページセッティング セッティングは図のような画面で個別に設定可能で
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基本的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな
アイコンやシンボルなどの形をしたフリーフォント のまとめ。なかなか使い勝手が良いものがいつ のまにか増えていたので色々とまとめてダウン ロードしましたのでその過程で良さそうに感じた ものをシェアしてみます。まだお盆明けだったり お休み中な感じなので軽めの話題で・・ というわけでシンボルタイプのフリーフォントのまとめ。サクッとアクセント加えたい時にアイコン作ったり、というのも面倒なのでフォントで済むならそのほうが早いですし、いくつか覚えておくと便利なんじゃないかなと。 順不同です。ライセンスは各々でご確認ください。 SYMBOL SIGNS ピクトグラムとか標識でよく見かけるシンボルのフォント SYMBOL SIGNS NOTICE こちらも標識で見かけるタイプの角丸フォント NOTICE DINGBESTS 鉛筆や消しゴム、電話機など使い勝手の良いデザインフォント DINGBESTS GL
これは便利だなー!と思ったのでご紹介。 WordPressでブログ書いてる方でもよく Flickrの画像を使っている方をよく見かけ ます。WordPressプラグインでも投稿を 便利にするものはいくつかあるんですが、 その中でもFlickr Photo Postは結構使い 勝手が良かったです。 というわけで便利なのでシェアです。画像投稿時にFlickrで検索、著作権表示も挿入して画像投稿可能なプラグインです。 画像を投稿するときにこんな感じでLightboxが表示されますが、この中にFlickr検索ツールが追加されます。切り取りと自動で著作権挿入してくれるのが大きな特徴ですね。シンプルでいい感じですよ。 機能はシンプル ↑ キーワードで検索すると結果が表示されますので好きな画像を選びます。 ↑ サイズも選択可能 ↑ 切り取りも可能です。ドラッグで範囲を決めて「投稿に挿入」をクリックすれば切
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く