あのサイトのロゴに使われているフォントいろいろ
有名サイトに使われている フォントを30個紹介している エントリーがBuild Internet! に有ったのでご紹介します。 どれも日本でも有名なサイト でちょっとしたパロディサイト を作るときに利用できそうです。 Twitter Pico Alphabet Digg FFF Forward Vimeo Black Rose Tuts+ Lubalin Graph Technorati Neo Sans Medium Flickr Frutiger Black Youtube Alternate Gothic No. 2 Facebook Klavika Google Catull BQ Skype Helvetica Rounded Bold 面白いｗ残りは以下よりどうぞ～。 Fonts Used In Logos of Popular Websites
Webサイトの表示速度を計測できる・「Pingdom」
Pingdomは、公開されているWebサイトの表示速度を計測し、速度を遅くしている要因を教えてくれるツール。URLを入力するだけで計測してくれます。 Pingdom
ページ内の目次を自動作成するWordPressプラグイン・Table of Contents Plus
Wikipediaのように、ページ内の目次を自動で作成するWordPressのプラグイン・Table of Contents Plusのご紹介です。長いコンテンツが多いサイトでは結構便利なんじゃないかなと思います。セッティングも色々と出来ますよ。 Wikipediaライクなページ内の目次を作成するWPプラグイン。自動で見出しを探して目次を作ります。小見出し>孫見出しもネストしてくれます。 ↑ ページ内に見出しを自動生成します。投稿やカスタムポストタイプなどにも作れます。 ↑ セッティング項目はいろいろ。目次を表示/隠すでスイッチできたり、デザインをスタイルしたり。見れば大体分かると思います。 ↑ 何もレイアウト設定してないのでアレですが、このように自動作成されます。作成したくないページではショートコードで非表示にする事も出来ます。 ご利用は以下よりどうぞ。 Table of Content
WordPressの投稿フォーマットの選択項目を分かりやすく表示するプラグイン・wp-post-formats
投稿フォーマットの選択項目を、分かりやすく表示する、というプラグイン、wp-post-formatsのご紹介です。ラジオボタンをタブにするだけですが、Tumblrっぽくなるので使いやすい気はしました。投稿フォーマット自体あまり使われてない感じもしますけど・・ Tumblrライクに投稿フォーマットの選択項目を表示する、というもの。 こんな感じでタブで選択、URLや画像のアップロードが必要な項目は、タブを切り替える事で表示されます。 ↑ 引用項目ならこのようにソース先を入力する 投稿フォーマット、便利だけどあまり使われない印象ですねー・・仕方ないといえば仕方ないですけど、こういったプラグインもあるので宜しければご利用になってみてください wp-post-formats
タブやアコーディオン、パララックスなどを実装出来るjQueryベースのUIツールキット・jKit
jQueryベースのUIツールキット・jKit のご紹介です。タブやアコーディオン などの良く使われるものから、簡易的 なパララックスやバリデーション、ズ ーマーなどなど多機能なUIキットとな っています。 2013年になりました。喪中により新年の御挨拶を控えさせて戴きます。皆様に取って本年が充実した年でありますようお祈りいたします。 さて、今日はUIキットのご紹介。jQueryベースとなっています。 jQuery UIでいいじゃんと思う方も多そうですけど、選択肢があるに越した事はありません。 ずらっと並んでいます。機能は42種とかなりの数です。 使い方は基本的には他のプラグインと変わりありません。コアとjKitを読み込んでセッティングします。 DOM要素にrel属性を与える形で実装します。 <div id="foo" rel="jKit[accordion]">例えばアコーディオンなら上
特定のテキストを絵文字に変換するスクリプト・emojify.js
予め決められた特定のテキ ストを絵文字に変換する、 というスクリプトのご紹介。 WordPressなどのCMSでも一部 で導入されていますね。需要 は高いほうじゃないかと。 絵文字変換スクリプトです。絵文字はdata URI schemeを使用します。スクリプト自体は非依存型なのでそのままJSとCSSを読み込めば利用可能です。 絵文字はGithubなどでも採用されているものと同様です。なので、置換テキストはEMOJI CHEAT SHEETで確認できます。 例えば :sunny: と書くと 上記のアイコンがリサイズされて置換表示されます。 特定のキーワードを分析して特定のclassを持つDOMに置換するっぽい。 冒頭にも書きましたが、絵文字はdata URI schemeを使用します。よって、LESS等を使うかCSSをコンパイルする必要があります。便利だけど個人的には少し躊躇しますね・・絵
WordPressやJavaScript、CSSなどのスニペットを収集しているサイト・wp-mix
スニペットコードを収集している Webサイト・wp-mixのご紹介です。 wpとありますが、WordPressに留ま らず、PHPやJavaScript、CSSなど のスニペットも集めているみたい。 まだ増えるそうです。 スニペット紹介サイトです。この手のサービスは何個あっても困らないですね。被るのが難点ではありますが・・
Web制作時に色（カラー選定）で困った際に役立ちそうな13のツールやサービス
Webサイトの制作時にいつも 時間がかかるのがカラー選定 で、少し困っているのでもう少し 時間を短縮したいと思い、使って いるツールも含めていろいろご紹介。 いろいろ有りすぎるので使いやすいと思ったサービスに厳選しています。順不同。使いやすさとか好みもあると思うので参考程度に。。。ネタ帳さんのwebサイト作成時にサイトカラーを決められない人の為のwebサービスいくつかという記事も凄く参考になりますよ。 原色大辞典 色のリファレンス国内サイト。国内にも同じようなサイトは沢山ありますが個人的にここが一番見やすくて使いやすいです。 原色大辞典 colr.org 写真からスキームを作成してくれます。手持ちの画像をアップロードしてスキーム作成も可能ですが、flickrからランダムで呼び出したり、ピッカー機能があったり、タグ付け出来たりと多機能ですが、UIがシンプルで使いやすい。動作も軽いので重宝しま
商用でもフリーの日本語フォント・こども丸ゴシックに細字タイプが追加
制作者さんよりご連絡頂いたので ご紹介。いつも有難う御座います！ 以前ご紹介した、商用でも無料で 利用可能、クレジット表記も不要 の日本語フォント、こども丸ゴシ ックに細字タイプが追加されたと の事です。 手書き風の日本語フォント。商用でも無料で利用可能です。漢字は小学校1~3年で習う漢字が入っているとのこと。 こども丸ゴシック細め 公式のキャプチャ。かわいいです。 試しに思いつきで作って見ました。 ※この委員会が存在するかは知りません。子供の画像から思いつきで書いただけですので誤解無きよう。 フォントは何もデザイナーさんだけが必要としているものでは無いので商用で利用出来る日本語フォント、というだけでも多くの方にとって価値の高いものかなと思います。 ダウンロードは以下よりどうぞ。 Typing Art
HTML5のvideoタグを使って背景に動画を設定するjQueryプラグイン・videoBG
HTML5から使えるvideoタグで背景への動画設定を簡単に行えるというスクリプトです。対応していないブラウザには静画が表示されるようになっているみたい。 動画を背景に、というスクリプト。 動画のパスを指定して表示するみたいです。楽でいいかも。尚、HTML5未対応のブラウザには普通の画像を別途用意して指定しておくことで表示を切り替えるみたいです。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.videoBG.js"></script>コアとプラグインを読み込み。 $('.foo').videoBG({ position:"fi
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
WordPressで作っておくと便利なショートコード何個か - かちびと.net
WordPressではショートコードを自作して 好きなときに使う事が出来ます。ショート コードを利用すると、通常記事内では出来 ない事もできる様になったり、面倒なマーク アップを簡略化できたりと、とても便利 ですので、ぜひ覚えてみてください。 という訳で、WordPressで作っておくと便利なショートコードをいくつかご紹介します。 その前に宣伝。 WordPressのスニペットを集めてシェアする事にしましたご存知のように、WordPressで使える便利なコードは日々世界中で公開、シェアされています。その背景にWordPressがOSSであることが理由の一つとしてあげられるかと思います。 WordPressはGPLですので、極論を言えば有料のプラグインも無料で配布可能です。このあたりがGPLが一部の方に嫌われる原因でもありますが、沢山のコードを割と自由に使う事が出来るのも利点の一つです。 そ
WordPressをクライアントワークで使用する際に覚えておくと良さそうな管理画面のカスタマイズ用コードいろいろ
今日もWordPressの記事です。今日は、クライアントワークで、納品物としてWordPressを使うときに覚えておくと便利な管理画面をカスタマイズ出来るコードのまとめです。ほとんど地味な施工ですけど。 今日はクライアントワーク向けの管理画面カスタマイズコードをいろいろご紹介します。こちらも、昨日お知らせしたWordPressスニペットに掲載しますのでそちらでもご確認頂けます。と言うわけで宣伝でした。 WordPressスニペット まだ未完成ですけど暇を見て使いやすく出来たらなぁと思います。 更新をWebに疎いクライアントさん側で行うのであれば、管理画面の利便性の向上は更新モチベーションに繋がりますし、工数分の売り上げ増加にも繋げられます。地味だけど、覚えて置いて損はありません。 では、コードいろいろです。コピペはあまり良く無いですけど、今日はまとめ記事なのでコードの解説は割愛させてくださ
商用利用もWebフォントも無料で利用出来るサンセリフ系フォント・Subtle Sans
英字フォントですが、なかなか良さそう だったのでシェア。商用利用もWebフォント も無料でリンクなども不要と、結構自由 に使えるのと、個人的にサンセリフの 利用頻度が高いので即DLしてみましたよ。 太さも3種用意されています。 配布しているのは、汎用性の高いテクスチャパターンを大量に配布しているSubtle Patternsです。このフォントも似たようなプロジェクトの一貫だと嬉しいな、という期待を込めてご紹介。 中には、OTF、TTF、EOT、WOFFのフォーマットがそれぞれ用意されています。Webフォントに関しては以前まとめましたので合わせてご覧下さい。 Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ ライセンスも You can use this font in any way you like, both commercial and noncomme
WordPressのプラグイン・Contact Form 7で使える「特別なメールタグ」の普及に貢献してみる
今まで機会が無かったんですが、最近必要になって改めて便利だったので今更ながらご紹介です。WordPressでコンタクトフォームと言えば、Contact Form 7が定番になっていますが、このCF7にある機能に「特別なメールタグ」っていうのがあります。 フォーラムによく顔を出すような方はご存知の方も多いですが、ググってみると案外紹介されていなかったので普及活動してみます。 まずはContact Form 7のご紹介。WPユーザーなら大抵はご存知ですよね。柔軟性と操作性に優れたコンタクトフォーム用プラグイン。日本製ですが、世界中で愛用されています。 CF7は管理画面内でフォームを作成し、ショートコードで実装します。そのフォーム作成もショートコードを発行する形ですので、HTMLの知識は無くとも作成する事が出来ますが、PHPであるテンプレートタグなどは直接使用できません。 ただ、場合によっては、
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src
WordPressの管理バーに好みのソーシャルサイトのリンク集を含める
WordPress3.1から管理バーが少し変わ ったのですが、デフォルトではあまり コンテンツが無く、ちょっと勿体無い のでここに好きなリンク集を作って あげると喜ばれるかもしれない、って いう記事です。 管理画面の利便性を高めてあげるとクライアントさんも使いたくなるし、それでWebサイトも育ててくれて結果的に収益アップしてくれたら嬉しいなウヘヘ、という夢をみつつ、今日もチマチマとカスタマイズに励んでみます。 試しにソーシャルサイトのリンク集を含めてみる ↑ 特に目新しい事では無いんですが、こういう風にしてあげようじゃないか、という内容です。jsfiddleってソーシャルだっけ？って疑問はさておき。 こんな事言うと記事タイトルが破綻してしまいますが、別にソーシャルじゃなくてもいいと思います。管理画面でよく使う場所をまとめるとかもいいですね。 コードコードです。functions.phpに以
WordPressの投稿画面で、記事のカテゴリーを1つしか選べないようにする
少々気になった記事があったので備忘録。WordPressの投稿画面でカテゴリーを選択出来る部分があって、そこはチェックボックスになっています。当然複数選べるようになっているわけですが、仕様上、1つしか選べないようにしたい、という場合のTipsです。 少し前にWptuts+で「ラジオボタン化して1つしか選択できない様にする」という記事がありました。 (How to Use Radio Buttons With Taxonomies) おおーちょっといいかも、と思ったんですけど、若干面倒くさそうだったのでもう一つの選択肢としてjQueryの方法を書いておこうと思います。 実装 単純に1つしか選択できないようにすればいいならチェックボックスにチェック出来る数を制限すればいいです。上図は、1つ選択すると他はdisabledになるようにしています。 尚、チェックボックスの動作は以下のような感じです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Twitter BootstrapをベースとしたフラットなデザインのUIキット・Flat UI
フォームやボタンなど、良く使われるエレメントのスタイルも揃ったCSS3+HTML5フレームワーク・Workless
