JSや画像を使わず、cssとHTMLオンリー でマウスオーバー時に噴出し状のツール チップの実装が可能なナビゲーション KntL Pagerをご紹介します。これは結構 便利そう。ありがたい事にIE6にも対応、 cssも無料でダウンロードも可能です。 jsや画像を使用せず以下のようなページネーションを実装可能です。 KntL Pager うーん、凄い。これでcssオンリーとは驚きでした。一応ページネーション（ページ送り）のcssとして紹介されていますが、普通にユーザビリティを意識したナビゲーションとして使えそうですね。 対応ブラウザはIE6以上、Firefox1以上、chrome、opera、safariに対応との事。日本語に直してHTMLをアップしてみましたので[sexy-lightbox href=’http://kachibito.net/wp-content/uploads/2010

先週にWordPress2.9の管理画面 の操作マニュアル（Webに疎い お客様に渡す用）を配布しましたが、 直接管理画面で見れたほうがいいかも と思って簡単なプラグインを作成しました。 良かったらご利用下さい。 詳しくは以下より。 操作マニュアルを管理画面で直接確認出来る ↑　上記のようにWebサイトを納品した先のお客様側で管理画面内でマニュアルを確認出来るので、紙に印刷して渡したり、PDFで渡す事でお客様がいちいち開く必要が無いようになります。 必要なくなればプラグインを削除、という感じで。テーマ→functions.phpからでも可能ですが、プラグインの方が削除も楽なのでこっちを選択。 ↑　上記のようにPDFが大きく表示されます。単純にPDFを読み込んでるだけです。モニターの関係上、見にくい場合は別窓で開けるようにリンク付けてあります。 宜しければ編集して下さい作成はしましたが、管理

以前WP2.7と2.8の管理画面 の使い方のマニュアルを配布 していまして、最近になって 2.9がリリースされましたので 遅ればせながらマニュアルも リリースします。 以前配布した際も編集出来る様に元データも同梱しましたので既に2.9用に変更されている方もいらっしゃると思いますがが、一応作成者なのでリリースします。 以前と重複しますが、このマニュアルはWordPressを使ってWebサイトを制作する業者の方がクライアント様にお渡しする管理画面のマニュアルです。御社の作業工程が少しでも早まる事、クライアント様への説明時間等が削れれば幸いです。 著作権は放棄しますので、マニュアルを売却すなり、改変再配布するなり、擬人化するなり、キテレツ、我輩コロッケ食べたいナリ、ご自由にどうぞ。リンク義務などもありません。 折角なのでシェア出来た方が作った甲斐がありますしね。コンセプトは「Web制作の業者さん

豊富なプラグインで手軽に気軽に カスタマイズする事が出来るのも WordPressの魅力ですが、ソース が汚くなったり、重くなったり、など メリットだけでもなかったりします。 また、実現したいけどいいプラグインがないなんて事も有ると思います。そこで、プラグインではなく、テーマファイルなどを直接カスタマイズする方法を日本語で書いてある記事をまとめました。フォーラムは載せていないので探してみてください。結構有ります。 wp-adminをSSLでロック管理画面をセキュアに。https://abc.com/wp-admin/にする方法です。企業サイトなどは特に導入の検討をすると良さそう。1行加えるだけなので手軽に導入できます。 wp-adminをSSLでロック メディアにある画像のサムネイルを表示する[sexy-lightbox href=’http://kachibito.net/wp-cont

小粋の定義は分かりませんが、ちょっと「おっ」と思えるcssのテクニックをいろいろと。以前、記事にさせていただいた、ｃｓｓとHTMLのみで3D効果を実現したテクニックで他にも無いかなと思って同様に驚いたテクニックです。 3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かのヒントになるかも・・と思い、cssplayでちょっと探してみましたのでいくつかのｃｓｓを使った良アイデアや高度なテクニックなど。 ざっとしか見ていませんが、多分jsは使ってないと思います。 Film strip gallery with information text ネガポジ加工された画像にフィルムのような枠をつけてマウスオーバーで写真を表示するギャラリー。 Film strip gallery with information text Super animation – just for the fu

個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。 Opacity to Show Focus / デモ Color Changing Text an

Twitterの背景画像に関するまとめです。 クライアントを使っていれば特に必要性は 感じ無いかもしれませんが、折角変更 出来るのですし、見る人も少なくないので ちょおとかっこよく変えてみるのもいいかも 知れません。 そういう訳で、Twitterの背景画像を作成できるWebサービスや配布サイト、役に立つサイト（ギャラリー等）のまとめです。 作成できるWebサービス Free twitter Designer 背景を選択してシェイプを追加したり、そのシェイプを半透明にしたり影を加えたり、画像をアップロードしたりといろいろ出来ます。OAuth似認証でログイン可。日本語での説明はこちら。 Free twitter Designer twit backs 手軽に背景を作成出来ます。プロフィールやメールアドレス、アカウント名等を左サイドに挿入してくれます。テンプレートが豊富。 twit backs

最近書いた記事でGimpと Inkscapeの使い方のお勧め サイトをいくつかご紹介しましたが、 その際に沢山の反響を頂けたので、 始めよう！というテンションが下がらない うちに１つ、チュートリアルを書いてみます。 Webデザインへの興味の扉になれれば幸い。 記事の内容はチュートリアルと、その下にTips、パターン素材の追加方法、この記事の内容で出来るデザイン例です。画像も多く、長い記事ですが細かくお伝えしているのと、ある程度Gimpの操作法に慣れるようなチュートリアルにしています。以下のような画像を作ります。 影は理由も無く目立たせています。作業の時間は操作に慣れれば殆どかからないのでWebデザインの事始めにぜひお試し下さい。 STEP.1 / Gimpを起動し、新しい画像を用意する Gimpを起動したら、まず １.上部メニューの「ファイル」→「新しい画像」 を選択。基本的にはこれがスタ

これで無料か、と思わせるほど結構 凄いフリーのWordPressのテーマ Magnoliaをご紹介。Magnoliaはか なりカスタマイズされたWordPress のテーマで無料で使うことが可能です。 Magnoliaはファイルをアップロードし、外観で有効化。設定ページも追加されます。以下の7デザインを選択可能です。 スタイルとロゴを設定画面で変更できる ロゴもブラウザ上で変更可能です。設定画面のLogo Image Pathに画像のアドレスを入れれば変更されます。 人気記事、TwitterのPostなどを表示 ウィジェットで色々と管理できます。人気記事、コメント、TwitterのPostを表示するウィジェットの追加も可能になります。お好みで良いと思いますが、Twitterのウィジェットは3にした方が良さそうです。Twitterはウィジェットで編集、アカウント名と表示Post数を設定します

題名の通りですが、これから Webデザインに手を出そう、 という方の為に日本語サイト で説明が凄く分かりやすい サイトと少しチュートリアル記事 の紹介です。 Webデザインを始めたいけどadobeのソフトは高額でなかなか手軽に始められません。まずはほぼ同等の機能を持ち、しかも無料で手に入るGimp（Photoshop代替ソフト）とInkscape（Illustrator代替ソフト）で様子見をしてみてはいかがでしょう。 使い方や実践チュートリアルを丁寧に説明してくれるサイトをご紹介します。「これなら触ってみよう」という気になれるかと思います。沢山あげられると選べずに萎えるので1，2サイトに絞りました。両ソフトのダウンロードもリンク先で出来ます。 プロも使ってるといわれるGimp。Webデザインをこれから始めようと思ってもなかなかとっつき難いかもしれません。ですので扉となってくれそうなサイトを

先日書いた商用サイトでも無料の 国内外のWeb制作に使える素材 サイト総まとめ・2009にも 含めていましたが、このサイトだけ は単体でご紹介したかったので エントリーさせて頂きます。 記事でも書いたようにArs Grafikで配布しているWeb素材は商用サイトでも使うことが可能です。以下は同サイトの利用規約（Terms of Use ）より引用します。 You may use Brushes, Patterns, Fonts, Textures, Icons, and Vector Graphics downloaded from Ars Grafik, for personal or commercial use. You may use Brushes, Patterns, Fonts, Textures, Icons, and Vector Graphics downloaded

私的なメモです。WordPressで個人的にWebサイトを構築したり、受注した際の手順リストをメモ。自分用のチートシートです。いつも何かしら忘れている気がするのでいつもやる事をぱっと見で分かりようにリスト化しておきます。※個人的な主観が入っています。 Todoソフト等はあまり使わないので本当に私的なメモですが、これが誰かのお役に立てたら幸甚です。プラグインなども好みが有ると思いますのでご参考までに。。 [note]情報が古くなったので改正版としてアップデートしました。[/note] インストールDB作成WP最新版をダウンロードwp-config.phpをDBに合わせて変更接頭語も変える（wp_　→　example_）FTPソフトでサーバーにインストールログインして管理者権限のユーザーを作成作成したユーザー名で再ログインadminユーザーを削除ダッシュボードの不要なコンテンツを非表示にパーマ

タイ旅行中に凄くお世話になった Twit Delayの開発者さんのさくらさん が新たにGoogleマップと連動 したTwitter系のサービスTwitroute を開発したのですが、これがめっちゃ 便利なのでご紹介します。 昨日のGoogleマップAPIを使ったサービスの記事の中でIDEAIDEAさんが愛用しているPin in the Mapをご紹介しましたが、それ以上にTwitrouteは便利すぎです。また、こちらは国産なので英語が苦手でPin in the Mapを使っていなかった方にもお勧め。 ルートを自動で表示！ Twitrouteは出発点から行き先までの道順（ルート）を簡単な入力のみで表示、Twitterに投稿出来るWebサービスです。気になるお店を道順付きでTwitterでシェア、なんて事も可能っぽい。 入力して、地図を更新してからルートが出るまでの時間が早い！投稿などにもAj

WordPressのプラグインのContact Form 7というメールフォームプラグイン を利用しているのですが、デザイン カスタマイズのチュートリアル記事的な ものがなかなか見つからなかったので 変更ついでに覚書します。 まずはContact Form 7インストール方法から。ご存知の方はここは飛ばしてください。 Contact Form 7のインストールContact Form 7をダウンロードし、解凍wp-content/wp-plugins/以下にフォルダごとコピーしアップロード管理画面で有効化設定画面でフォーム作成[note]ダウンロードのページに使い方も記載されていますが、ミblogさんの記事が分かりやすいです。[/note] メールフォームのスタイリング僕の方法は多分正しくないと思いますが参考になれば幸いです。Contact Form 7のphpファイルの変更はしていません

WP System Healthは自分の WordPressをインストール しているサーバーの状態を 管理画面で把握する事が可能 なプラグインです。PHPメモリ の使用量やDBの利用状態も 確認する事が可能です。 導入は簡単なのでお使いのWordPressがシステム等が原因で不安定だと感じる方はご利用を検討してみてはいかがでしょうか。 インストールすると画面のようにダッシュボードにウィジェットが追加されます。 表示する項目は サーバー情報とPHPメモリ使用量PHPの設定値等HTTPトランスポートに関する情報データベース情報などで、追加されたウィジェット内で確認する事が可能です。自鯖の方は導入してみるとトラブル時に解決が早くなるかも。 WP System HealthのインストールWP System Healthをダウンロードし、解凍/wp-content/plugins/にフォルダごとコピ

最近、国産のWebサービスも かなり勢いがあるなぁと思ったので ちょっとまとめてみました。よく 紹介されるのは海外製ですが、 それに劣らないMade in Japanの Web制作者が知っておくと便利そうな フリーのWebサービスをご紹介します。 順不同です。日本語が完全に通じる海外Webサービスも今回は省いて純国産のWebサイト制作に一役買ってくれそうなWebサービスをご紹介したいと思います。出来る限り高性能だったり多機能なWebサービスのみにしたつもりですが主観入ってます。 Color of Book 国産サービスで一番多用しています。AmazonAPIを使って雑誌の表紙を抜き出し、その表紙からカラーチャートを生成。アイデアが素晴らしいですね。雑誌は表紙のデザインや色で惹きつけるよう考えられている事が多いのでWeb制作時のカラー選定にかなり参考になるのでは。 Color of Book

僕の周りでもTwitterで 複数アカウントを取得 されたり、botを作って Twitterを楽しんでいる方も 増えてきた印象ですので、 複数アカウントを管理できる TwitterのWebクライアントを 6個ほどあげてみます。 順不同です。個人的な感想なので参考程度に。。 Splitweet シンプルですが、楽なので結構多用しています。複数アカウントでまとめて同じPostをする事が可能。定番でしょうか。 Splitweet hootsuite 企業向け、という事で最近人気も出ました。確かに多機能で優れたマルチユーザーWebクライアントですが、OAuth認証でないのと、Post内のリンクに飛んでも直接そのページに飛べないっぽいのであまり企業向けとは思えませんが、かなり使いやすいクライアントである事は間違いないです。 hootsuite TwitHive 結構高機能です。複数アカウントの管理は

二十歳街道まっしぐらさんの私が Firefox から Chrome に乗り換えた７つの理由という記事に刺激されて食わず嫌い（と言うほどでも無いけど・・）していたGoogle Chromeを使い始めました。 記事通り、リリース当初よりかなり便利になっていますし、Chromeの速度はかなり魅力なのですが、Firefoxの「このアドオンがあるから・・」という理由でやはり完全に移行出来ませんでした。カメきちさんの記事のブコメもいろいろと参考になりますね。一言で済ますと好みですよね。使いやすいもの使ったり併用したり。 僕は今は半々くらい、ややFirefoxよりでテスト利用しています。通常ブラウジングは殆どChromeになりそうです。ついでに「このアドオンがあるから・・」というアドオンをご紹介したいと思います。 「お勧めアドオン」系の記事ってあまり参考にならないことも多いと思いますので「こいつはこんな

みんな大好きFlickrではグループ を作成出来るのですが、その中に WordPressのログイン画面の 入力フォームデザインのグループ があったのでご紹介します。 個人で使う分にはそのままでも良さそうですが、Web制作でWPをクライアントに渡すのにログイン画面がWordPressよりはクライアントのロゴなどでデザインされている方が喜ばれるのでは無いかと思います。言わないと分からないでしょうが＾＾；そんな訳でログイン画面の秀逸なデザインとログイン画面で使用されているｃｓｓファイルの場所を一番下に載せておきます。ソース見れば簡単に分かるんですけど一応。。 まずはギャラリーから。 Universidad San Andres 学校でWP使ってるようですね。敷地内の写真を利用したログイン画面で素敵です。 Universidad San Andres The NewReview › Log In

前回の日本国内でリリースされた 14のTwitter系ツールに 続いて第二回、国産Twitterツールです。 最近リリースされた（と思われる） 国産Twitterサービスを9ツール ＋おまけ1ツールご紹介します。 「最近」というのは前回紹介した日（8月半ばくらい）から、という意味で使っています。 twitvideo 動画を共有できるサービスです。国内では初なんじゃないでしょうか？サイトも綺麗に作られてますね。OAuth認証ではないのが非常に残念。でも人気クライアントのhootsuiteもOAuth認証では無いけど利用者多いですし、サービスの内容次第では気になら無いのかな？今後に期待したいところです。 twitvideo twiz! 投稿を地図上に反映させる事が出来ます。「いまここで何してる？」につぶやく事で美味しいご飯の場所とか近所に住んでるとかを簡単に知らせられそう。 twiz! Twi