WordPress管理画面のメニュー項目に使われるアイコンをオリジナルに変更する為のテンプレート素材 - かちびと.net
WordPressの管理画面のメニュー項目 に使用されているアイコンを変更する のに便利そうなテンプレートがあった のでご紹介。カスタム投稿タイプも 一般的に利用されてきている印象なの で、アイコンも投稿タイプに合わせて 作ってみては如何でしょう。 WPの管理画面のメニューなどに利用するアイコンを作成するための雛形です。いざ作ろうと思うと面倒なものなので1つ持っておけば作る気になる・・・気がします。やっぱり面倒くｓ WordPress Admin Icons Template アイコン作成の為のテンプレートです。まぁそれだけなんですが管理画面内の施工も工数にいれるのが基本の方もいますし、地味に便利かなと。 PSDを開くとこのように枠がありますので中にアイコンを収めて書き出せばいいだけですね。 変更方法 アイコンを変更するにはadmin_headアクションフックで管理画面のスタイルを上書きし
Pinterestっぽいレイアウトを作ってみる
以前、レンガ風に要素を配列するレイ アウトを凄くよく見かけるようになり、 それから一種のブームのように様々な リソースが出回りました。最近はあま り見かけなかったのですが、Pinterest の登場で、また似たようなレイアウト のリソースが出てきている印象です。 Pinterestのように時系列を崩さず、ボックスを配置するスクリプトにjquery masonryっていうプラグインがあるのですが、同じようなプラグインでWookmark-jQueryというのを昨日見かけましたので、空いた時間になんとなくPinterestっぽいレイアウトを作ってみる事にしてみました。 Sample ソース調べるほど真面目な記事でもないので見た目を勘に頼って似せただけ。 ※あくまで「っぽい」です。 Sample コード<script src="js/jquery-1.7.1.min.js"></script> <
Webフォントにも利用可能なフリーの天気アイコンフォント・Climacons Font - かちびと.net
土曜日なので軽い話題。天気 アイコン型のWebフォントです。 スマートフォンのアプリ向け に作られたみたいです。見た目 が可愛いのでアプリ以外にも 何かに利用したいですね。 天気アイコンフォント、というニッチなニーズに応えたフリーフォントです。スマフォのアプリなんかに良さそうな感じ。Webフォントにも利用できますが、PSDやEPSも用意されています。 可愛らしい天気アイコンです。UNIQLO CALENDARにも似たようなテイストのアイコンが使われていましたね。 結構揃ってます。 フォトショやイラレで使えるデータもあります。 商用でも使っていいみたいですけど直に販売したりするのはやめてくれ、との事です。下部に規約あるので目を通してくださいませ。 Climacons Font
Webに疎いクライアント向けにWordPressの管理メニューを使いやすくする為のプラグイン・CMS Dashboard - かちびと.net
クライアントワーク向けのWordPressの プラグインです。管理画面のメニュー はWebに疎いクライアントさんには世辞 にも使いやすいものではありません。 そんな管理メニューを使いやすくする、 という目的で作られたプラグインです。 同じような物は作ってあるんですけどこちらの方が作りが良かったので利用させて頂く事にしました。 こういうやつです。こういう配慮があるのと無いのとでは大きく管理モチベーションが変わってきます。僕も未だに使いにくい管理画面のサイトは使う気になりません。初心忘れるべからず。思いやりとは相手の身になる事ではなく、自分の物差しを相手に押し付けない事ですよね。相手の身になる、って結局自分の考えの押し付けでしょうし。 表示するメニューも選択する事が出来るので、一度作れば使い回しが利くのでは。 英語ですけど、ソース見れば簡単に変更できるのが分かりますので全く問題ないと思います。
ドロップダウンするページ内スクロール用の固定ナビゲーションを実装するjQueryプラグイン・fixedTOC - かちびと.net
個人的に使いそうなのでメモ。 よくあるページ内スクロールを 固定させてドロップダウン式に するjQueryプラグインです。 これはなかなか実用性があると 思います。 プラグインとしてはちょっと今更感あるかもですけど。 位置固定+ドロップダウン+アコーディオン+ページ内スクロール、みたいなやつです。結構いいんじゃないかなと感じました。 サンプル用意しました。 Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery.fixedTOC.js"></script> <script> $('#toc').fixedTOC({ menuOpens: 'click', // or 'mouseenter' scroll
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利 - かちびと.net
昨日知ったWebサービスに久々に感激したので勢いでシェアします。Web制作で必ずと言っていいほど必用になるダミー画像を生成してくれるサービスなんですが、これが個人的にかなり便利でした。 PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。 ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。 使い方 使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。 例えば350×150ピクセルの画像が欲しいなら http://placehold.it/350×150 にアクセスすれば指定したサイズの画像が表示されます。 なので、 <img src="http://placehold.it/350x150" /> これで以下のようにダミー画像を表示させる事ができます。 勿論、細か
その場でiPhoneやAndroidのユーザーエージェントに切り替えられるChromeエクステンション・User-Agent Switcher - かちびと.net
その場でサクッとUAを切り替える 事が出来るChromeエクステンション User-Agent Switcherのご紹介です。 iPhoneやiPad、Androidだけでなく、 FirefoxやIEなどのブラウザにも スイッチできます。 FirefoxやIE、iPhone、iPadやAndroidなどのユーザーエージェントにその場で切り替え可能なChromeエクステンションです。ただそれだけなんですがシンプルだし地味に便利かなと思いまして。 閲覧中のページでサクッとユーザーエージェントを切り変える事が出来ます。iPhone4やiPad、AndroidなどのタッチデバイスだけでなくIE、Firefox、Safari、Operaなどにも変更可能です。 使い方 使い方は簡単で、User-Agent Switcherをインストールするとメガネのアイコンが表示されるようになりますので、好きなUAを
WordPressをクライアントワークで使用する際に覚えておくと良さそうな管理画面のカスタマイズ用コードいろいろ - かちびと.net
今日もWordPressの記事です。今日は、クライアントワークで、納品物としてWordPressを使うときに覚えておくと便利な管理画面をカスタマイズ出来るコードのまとめです。ほとんど地味な施工ですけど。 今日はクライアントワーク向けの管理画面カスタマイズコードをいろいろご紹介します。こちらも、昨日お知らせしたWordPressスニペットに掲載しますのでそちらでもご確認頂けます。と言うわけで宣伝でした。 WordPressスニペット まだ未完成ですけど暇を見て使いやすく出来たらなぁと思います。 更新をWebに疎いクライアントさん側で行うのであれば、管理画面の利便性の向上は更新モチベーションに繋がりますし、工数分の売り上げ増加にも繋げられます。地味だけど、覚えて置いて損はありません。 では、コードいろいろです。コピペはあまり良く無いですけど、今日はまとめ記事なのでコードの解説は割愛させてくださ
WordPressで作っておくと便利なショートコード何個か - かちびと.net
WordPressではショートコードを自作して 好きなときに使う事が出来ます。ショート コードを利用すると、通常記事内では出来 ない事もできる様になったり、面倒なマーク アップを簡略化できたりと、とても便利 ですので、ぜひ覚えてみてください。 という訳で、WordPressで作っておくと便利なショートコードをいくつかご紹介します。 その前に宣伝。 WordPressのスニペットを集めてシェアする事にしました ご存知のように、WordPressで使える便利なコードは日々世界中で公開、シェアされています。その背景にWordPressがOSSであることが理由の一つとしてあげられるかと思います。 WordPressはGPLですので、極論を言えば有料のプラグインも無料で配布可能です。このあたりがGPLが一部の方に嫌われる原因でもありますが、沢山のコードを割と自由に使う事が出来るのも利点の一つです。
WordPressの関数の使い方を1日1回、メールで教えてくれる・The Daily WordPress Reference - かちびと.net
WordPressの関数の使い方をメール マガジン形式で1日1回教えてくれる The Daily WordPress Referenceの ご紹介。復習やモチベーション維持、 知らなかった使い方も知ることが 出来るかもしれません。 メールマガジンで関数の使い方を教えてくれる、というサービス。同じようにwpMailというサービスもあります。 作った理由は自分自身と自分の奥さんに強制的に学ばせるためだそうです。 少々ストイックな気もしますが、こういう方は個人的に結構好きです。ブックマークやTwitterで流れてきた記事を見ただけで学んだ気になってコードも書かずに口だけ達者にはなりたくないものです、と自戒した次第です。 バックナンバーもあります。基本的な使い方とサンプルコードもあります。 送られるメールの形式も選べます。 CODEX見ればいいじゃない、とも思いますけど冒頭でも書いたようにモチベー
mootoolsをベースとしたオープンソースのモバイル向けフレームワーク・Moobile - かちびと.net
いつもjQueryなのでたまには別のライブラリ の話題でもご紹介。mootoolsをベースとした モバイル向けフレームワーク・Moobileです。 mooltoolsベースのものは個人的には初見です が、他にもあるんですかね・・あまり使った 事が無いので良く分かりませんが。 mootoolsを使ったモバイル向けOSSフレームワークです。個人的に使う予定は無いんですけど、一応備忘録的に。 見た目はjQuery Mobileな感じです。 こんなエフェクトもありました。 シミュレーターが付属してました。iPhone、iPadとそれぞれの縦横の表示を確認出来るみたいです。 時間が取れず、あんまり見てませんので情報少なくてすみません。ダウンロードは以下でどうぞ。 Moobile
ベーシック且つシンプルなレスポンシブWebデザイン対応CSSフレームワーク・Exegesis-Framework - かちびと.net
シンプルでベーシックなレスポンシブ Webデザイン対応のCSSフレームワーク をご紹介。シンプルなのでフレーム ワークとしてとても使いやすいイメージ でした。これはこれで覚えておくと いいかも。 シンプルなレスポンシブWebデザイン対応のCSSフレームワークです。 2～4カラムのグリッドや、2カラム構成のベーシックなレイアウトで、メインカラム内での4カラムにも対応しています。 CSSはリセットが1KB、Media Queriesと一般レイアウト用CSSの3KB。ブレークポイントは480pxと940pxが用意されています。 スクリーンショット iPhoneでのスクショです。 ChromeエクステンションのIETabでIE7の表示を確認しましたが問題はありませんでした。 とにかくシンプルなのが気に入りました。多少の手入れは必要ですが、細かい部分は個人によって好みが分かれますのでフレームワークと
複数選択できるselect要素で選択した項目を分かりやすく表示するjQueryプラグイン・bsmSelect - かちびと.net
フォームのselect要素で複数選択 可能なフォームをユーザーが利用 しやすくする為のプラグインです。 現在選択中の項目を分かりやすく 表示してくれます。 multiple属性を使った複数選択可能なselect要素はとても便利ですが、ユーザーが使いにくく、利便性向上は課題の一つです。その利便性を向上させてくれるのがbsmSelectです。 複数選択すると下部に選択中の項目が表示されます。削除も可能。IE7などでも動作しました。 動作サンプルです。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="jquery.bsmselect.js"></
スクロールした位置に付いてくるサイドバーを実装するjQueryプラグイン・Contained Sticky Scroll - かちびと.net
気になったので備忘録。スクロール した位置に付いてくるサイドバーを 実装してくれるjQueryプラグイン・ Contained Sticky Scrollです。細 かいオプションも設定できて、IE6や IE7でも動作してくれるので覚えて おこうと思って記事にします。 Web Designer Wallがリニューアルしてサイドバーを固定していました。これはcssで実装してるみたいですが、IE6利用率が10％を超える日本では、まだ捨てるわけにもいかないのが現状ですね。（個人的には徐々に捨て始めてますがｗ） 基本的にはアニメーションで付いてきますが、ノンアニメーションも可能です。 使い方 いつもどおりjQueryとプラグインのパスを書きます。 <script type="text/javascript" src="jquery.min.js"></script> <script type="te
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる - かちびと.net
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる - かちびと.net
暫く空いてしまいましたが、jQueryを コピペに頼らず自分で書いてみよう、 という記事。第三回目です。僕よりも 全然詳しい人のほうが多いんですが、 最近何度かデベロッパーさんの憤り の発言を目にするので多少でも貢献 出来ればと思います。 というわけで第三回目はよく見るタブメニューを書いてみましょう、というもの。 「jQueryを使ったスムースなタブメニュー – ウェビメモ」という記事をお見かけしたのですが、簡単なタブメニューですのでコピペにもプラグインにも頼らず自分で作ってみようじゃないかと、そういう趣向です。 内容は完璧に良いコードとかではなく、あくまで脱ビギナーという内容となります。ビギナーの僕が何様だみたいな話は置いといて。 分かりやすさをメインにしていますので厳密には説明が少し違う点もあるかもしれません。誤解招きそうな記述ありましたらご指摘下さい。 ゴールの確認 まず完成形を見て
穴埋め問題を解くような形式でPHPを学べる勉強サイト・(un)classroom
プログラミングを学べる、みたいなサイト が凄く増えている印象ですが、また似たよ うなサイトを見かけましたのでご紹介です。 実践しながら学べるサイト・(un)classroom。 実践といっても、穴埋め問題っぽい感じで、 手を動かして学べるようになってるだけで すが。 こういうサイト、日本でも増えていく気もします。需要が高い事は明白ですし、このように前例が出来ればインスパイアされるものですのでいずれ増えてくるんじゃないでしょうかね・・ まだ出来たばかりでPHPの基礎とFacebookアプリの作り方しか教室が無いんですが、今後に期待という事で・・ 最初の授業です。「PHPは<?phpで始まって?>で終わらせます」とあります。基礎のキですね。で、右側のsubmitで実行してみましょう、といった流れで進んでいきます。 で、2ページ目でレッチチャレンジ、という感じで穴埋めし、先ほどと同じようにsub
CSS3による様々なエフェクトが選択可能なレスポンシブWebデザイン対応イメージスライダーを実装するjQueryプラグイン・REFINESLIDE
3Dやスライスなど、様々なアニメーション エフェクトを使用できて、且つレスポンシブ Webデザインにも対応可能なイメージスライ ダーを実装できるjQueryプラグインのご 紹介。REFINESLIDEというプラグインです。 覚えておいて損は無いのでは。 IEではフェードエフェクトのみになってしまいますが、iPhoneやiPadなどではcss3による様々なエフェクトを利用できます。スマフォ用として利用するっていうのも手ですね。 スマフォとかにも対応できるCSS3+jQueryなイメージスライダーです。3Dな感じのとかスライスしたエフェクトの素敵なもありますのでインパクトは与えられそうですね。 実機で問題なく動作しました。 Sample 上記はIE7でサンプルにアクセスした際の状態です。赤いラベルはそのブラウザでは非対応、という意味です。 以下、そのサンプルページになります。Chromeなら全
画像の任意の箇所にツールチップを配置出来る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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
