タグ

ブックマーク / kachibito.net (16)

  • コンテンツにエフェクトを掛けるjQueryプラグイン10個

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

    コンテンツにエフェクトを掛けるjQueryプラグイン10個
  • 画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net

    画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル

    画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
  • WordPressのオリジナルテーマ作成フロー・基本マニュアル

    初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基中の基で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに作成するWebサイトの目的と構造テーマ作成前に用意するものと環境テーマの構造を(触り程度だけでも)理解するHTMLからテー

    WordPressのオリジナルテーマ作成フロー・基本マニュアル
  • USBメモリ内にWordPress用のローカル環境を5分で構築、持ち運び可能なフリーのソフトウェア・Instant WordPressが超便利っぽい

    昨日初めて知ったんですが、今まで知らずに損してた、みたいな気持ちになったので、同じ思いをする人が一人でも減るようにと思ってご紹介。ソフトを解凍するだけで、WordPressのローカル環境を構築できる、というソフトウェア。USBで持ち運びも可能。 今まで知らずに損してましたwこれ、有名なのかな・・・ Instant WordPressUSBメモリやポータブルHDDなどにダウンロードして、自動セットアップするだけで、WordPressをローカル環境を構築、その環境ごとUSBフラッシュメモリで持ち運びも出来てしまいます。構築まで5分くらいで出来ましたよ。これは便利だなーって思いました。 WordPressを環境ごと持ち運び出来ます。覚えておくとかなり役に立つ気がします。 出先でクライアントさんと打ち合わせ中にWebに繋げなくても直接見せて動作確認することも出来るし、自宅のデスクトップでいつも作

    USBメモリ内にWordPress用のローカル環境を5分で構築、持ち運び可能なフリーのソフトウェア・Instant WordPressが超便利っぽい
  • 白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ

    最近、白黒カラーベースのサイトを 作成したのですが、その際に色々と 参考にしたアイコンやバナーなど のWeb素材やインスピレーション 向上の為のWebデザイン例に なりそうなサイトをまとめておきます。 結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ&シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。 アイコン白黒やグレーのアイコンいろいろ。 40 greyscale icons グレースケールアイコンパック。 40 greyscale icons twotiny 白黒のミニアイコンが沢山。 twotiny 165 vector icons 165のうち、66が白黒のアイコン。 165 vector icons bwpx.icns かなりの数の白抜きミニアイコンが揃っています。 bw

    白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ
  • 無料で手に入るECサイト向けのWordPressテーマいろいろ - かちびと.net

    ご質問頂いたので記事にしてみます。ECサイト をWordPressで構築したいけど良いテーマや、 参考になるテーマはないだろうか、との事でした ので、無料で手に入るECサイト向けのWordPress テーマをいくつかご紹介します。ソースコードや デザイン、レイアウトなどを参考にしてみては いかがでしょうか。 というわけで無料で手に入るECサイト向けのWPテーマです。さほど数は無いですけど・・ECサイト構築用のプラグイン(WP e-Commerceなど)に依存したテーマなどもあります。 でもまぁ大半はtokokoo.comで配布されているテーマです。多くのテーマは有料ですが、一部の機能を削ってフリー配布してくれています。ダウンロードにはユーザー登録(無料)が必要です。 BuySell Theme 綺麗でシンプルですね。個人的には一番好きでした。キャプチャは商品ページです。要WP e-comm

    無料で手に入るECサイト向けのWordPressテーマいろいろ - かちびと.net
  • Twitterのつぶやきを、3行のコードでWebサイトやブログに表示させる

    お問い合わせを頂いたのでついでに ご紹介。Twitterのウィジェットのような ものをお探しだったようですが、現在の 公式のウィジェットではなく、色々とcss でカスタマイズ出来るようにしたいとい うご希望でした。Twitterの投稿を表示す るだけなら3行もあれば実装出来ます。 タイトルはやや釣りに近いです。知らない方向け。 Webクリエイターボックスさんで表示されてるような感じにしたい、というご希望でした。なぜ僕に質問して頂いたかは謎ですがお答えさせて頂きます。 ウィジェットやjQuery、RSSを使って~等、色々と方法はありますが、自分で表示もデザインしたい、シンプルでいいというのであれば3行もあれば表示させる事が出来ます。 APIキーを取得して~等の面倒な手順も要りません。 [note]statuses/user_timeline/ユーザーのアカウントID.jsonの形式のjson

    Twitterのつぶやきを、3行のコードでWebサイトやブログに表示させる
  • WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α

    以前書いたWordPressWeb制作する際 の手順リストが少し古い情報込みだったり するので改正版を書きます。先日、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は避ける)作成したユーザー名でログインダッシュボードの

    WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α
  • 商用OK・無料でクレジット表記もリンクも不要!日本人の人物写真素材サイト・モデルピース

    これはかなり重宝するのではないでしょうか。 日の人物写真素材が無料で商用OK,更に クレジット表記やリンクも不要のサイト・モデル ピース。人物写真は基的にどれも有料か、 あっても日人ではなかったりですが、こちら は無料ですし、国産のサービスなのでモデル さんはみんな日人です。 お友達のまさとさん(@makavelicom)に教えてもらいました。ご紹介するモデルピース以外にもいろいろまとめられてるのでチェックしてみてください [note]激安で日的な写真素材、レンポジサイト一覧[/note] 無料・商用OK・リンクもクレジット表記も不要で解像度も高いです。こんないいサイトがあったとは知りませんでした。足成とは別の選択肢としてかなり重宝しそうです。 日人の人物写真を専門に扱っていて、無料ながら商用OK、リンクもクレジットも不要とのこと。ありがたい。 数もかなり豊富 数が少ないかと思

    商用OK・無料でクレジット表記もリンクも不要!日本人の人物写真素材サイト・モデルピース
  • HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい

    結構便利だったのでシェア。Web制作 に関する日語スライドを集約している フォロワーさん作のWebサービスです。 話題のHTML5やCSSiPhoneの事や jQueryからPHPRubyと幅広くサポート してあります。 人気のスライド共有サイト、SlideShareで日語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドエンジニア向け「第2回 開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。 カテゴリもHTML5やjQuery、PHPiPhoneWordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。 日語のスライドのみを集約 集められたスライドは全

    HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい
  • 「Webデザイン用のフリー素材をシェアしよう」がコンセプトのWebデザイナー専用コミュニティ・Designmoo

    無料でハイクオリティなPSD素材や フォント、テクスチャなどWebデザイン に欠かせないリソースを無料でDL 出来るコミュニティサイト・Designmoo のご紹介。コミュニティに参加せずとも 使わせてもらえますのでリソースサイト として覚えておくといいかもしれません。 「あなたの役に立つか分からないけど、よかったらリソースをシェアしよう」とのこと。フォントやテクスチャ、PSD素材やブラシなど多くのWebデザイン向け素材が無料で手に入ります。メンバー登録も不要ですよ。 メンバーになるには招待が必要みたいですが、素材のダウンロードは誰でも登録不要で出来るみたいです。 いくつかピックアップ Dyslexia 可愛らしいビットマップフォント Dyslexia 4 minimalistic notice styles ポップアップを優しい色合いに。 4 minimalistic notice st

    「Webデザイン用のフリー素材をシェアしよう」がコンセプトのWebデザイナー専用コミュニティ・Designmoo
  • より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net

    cssやプログラミングマークアップをより早く Web制作を少しでも効率化しよう と思って(今更)いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 Web制作を少しでも効率化しよう と思って(今更)いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding(家)HTMLコーディングが3倍速くなる?「Zen-Coding」秀丸Zen- Codingマクロコーディングの効率化を図

    より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
  • 配布する全てのフリーフォントがクリエイティブ・コモンズの「FREE FONTS」

    配布しているフォントが全てフリーで ライセンスがクリエイティブ・コモンズ ライセンスのFREE FONTSをご紹介 致します。数が大量では有りませんが、 全部CCライセンスなのはありがたい。 FREE FONTSでは配布しているフォントは全てクリエイティブ・コモンズライセンスで提供されています。 計60ものフォントがCCライセンスで無料で手に入ります。配布されているフォントもクオリティ高め。 汎用性も高そうです。 クリエイティブ・コモンズに関してはフッターに明記されています。↓ フォントは著作権に困る事が多いので助かりますね。以前GPLライセンスのフォントの記事も書きましたので宜しければ合わせてご覧下さい。 FREE FONTS コメントやTwitterで有料のフォントが含まれていると教えていただきました。真相を件のサイト管理者に問いますのでご利用はお控え下さいます様お願いいたします。大変

    配布する全てのフリーフォントがクリエイティブ・コモンズの「FREE FONTS」
  • 名刺を自作したい方の為のフリーの名刺テンプレートやツールいろいろ

    誰ともあまり会わないような職種 もネットビジネス界には多数存在 するでしょうが、名刺はあるとイザ という時に重宝します。ですが、 普通に発注すると最低枚数が あったりして余計なお金がかかります。 数を必要としない方は自作で済ませたい所。 そんな方にインク代、用紙代以外は 無料で名刺を作れるツールやテンプレートを ご紹介します。 テンプレの多くはPDFですが、Wordなどもあります。フリーソフトやオンラインツールなどなど。 A Business Card Template Pack かっこいいテンプレート。 A Business Card Template Pack 5 Business Card Template Packs フリーの名刺テンプレートパック。 5 Business Card Template Packs Businesscardland オンラインで名刺を作成。テンプレを選

    名刺を自作したい方の為のフリーの名刺テンプレートやツールいろいろ
  • 【全部無料】 Web制作に役立つオンラインサービスやツール300+ - かちびと.net

    Web制作に使えるWebサービスやツールなどが様々なサイトでかなり 紹介されています。便利なものですが、多すぎて混乱するので、 備忘録的にローカルサーバーに入れたWPでリンク集を作っていました。 そろそろ数が落ち着いて来たので多くの方とシェアしたいと思い、公開してみます。 現在330ありますが、追加していく可能性があります。 リンク集は全て無料で使える事を条件に集めていました。英語が苦手な方もいらっしゃいますのでTwitterサービスのまとめ同様、日語で使い方などを説明してくれているサイトにリンクしています。無い場合は海外サイトにリンクしていますが、その場合はアメリカの国旗をつけてあります。サイトがアメリカのものかは知りませぬ。分かりゃいいんだ、分かりゃ。 無料といえどもライセンスの縛りもありますので自己責任でご利用下さい。 使えるかどうかは個人差が生じますので何とも言えませんが、お役に

    【全部無料】 Web制作に役立つオンラインサービスやツール300+ - かちびと.net
  • 個人店等がWebサイトを使って収益を上げる為に行うブランディングTips

    地域の小さなお店や経営者がWebサイトを使って集客を行う際に する事、Tipsを挙げてみます。あくまで一例ですが、Webサイトの 露出から集客(コンバージョン)に至る為の施行をリストにしてみました。 今日の記事はターゲットが地域依存性の高い業種にしています。 普段から良く書くSEOの記事ではなく、個人が行うブランディングのヒントです。 内容はかなり泥臭い方法になっていますので、クール且つスマートに仕事したいモテモテな貴方は今すぐ立ち去るがいい。 SEO効果は付加価値として付いてくるでしょう。 1・サイトマップ送信xml形式のサイトマップをGoogleYahoo!に送信し、より確実にクロールをして貰います。これはWebマスターの基です。個人的にはxml-sitemaps.comが最も使いやすい印象です。sitemapの記述法に関してはGoogleのヘルプをご覧下さい。 いきなりブランディ

    個人店等がWebサイトを使って収益を上げる為に行うブランディングTips
  • 1