たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」:phpspot開発日誌
Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 pina 関数の第一引数の値で角丸のradiusサイズを指定できます。 関連エントリ CSSで角丸テクニック２５ IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル
最強プレゼンテーションの10のコツ » SEO Japan
QuickSproutからプレゼンを成功させるためのコツを10紹介。今回は中々具体的ですね。。。プレゼンは腐るほどしてきたSEO Japanですが、改めて参考になる話が多しでした！ — SEO Japan プレゼンテーションは、私たちみんなに馴染みのあることだ。あなたがプレゼンテーションを見る側であるにしろする側であるにしろ、どんなものが最悪でどんなものがそうではないかたぶん知っているだろう。しかし、最悪なプレゼンとそうでないプレゼンの区別ができない人のために、今日はここで確実に良いプレゼンテーションをするのに役に立つコツを10個教えよう。 視覚教材を誤用しない – 通常、あなたが使用する視覚教材はポスターやチャートだったり、パワーポイントによるプレゼンテーションのこともあるだろう。どんな視覚教材を使うにしろ、シンプルにまとめ、文字を多く使い過ぎないようにすることだ。聴衆はあなたのスライド
顧客サポートサイトの解析レポート作り方マニュアル [アクセス解析tips] | 衣袋宏美のデータハックス
前回に続いて、アクセス解析から出てくる数字を、定期的にどのようなレポートにして見ていったらよいかをサイトタイプ別に解説していく。 これまで、 ECサイトメディアサイトB2Bリード獲得サイトを取り上げたが、今回は顧客サポートサイトのケースだ。まずはどのような指標を見ていくべきかという指標の選択方法についてお話しした上で、これまで同様、 マネジメント層向けレポート現場向けレポートの2つのパターンで考えてみたい。 顧客サポートサイトの目的から分解「顧客サポートサイト」とは、自社の商品やサービスを利用してくれる顧客に対するサポートを行うサイトのことである。商品・サービスに関する情報や、関連するコンテンツ、問い合わせ先、FAQなどを掲載し、顧客の問題解決をサポートするのが目的だ。 しかし、「顧客サポートができているかどうか？」を検証するという目的で、アクセス解析のレポートに必要な指標をピックアップし
![顧客サポートサイトの解析レポート作り方マニュアル [アクセス解析tips] | 衣袋宏美のデータハックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c7da2e9041cd0eab265a2c698386bec563d2a30/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2009%2Fdatahack%2Fdatahack_icon.gif%3Fitok%3DHzcXGYqr){kind=icon}
8億円の売上アップをもたらした、ECサイトでコンテンツを増やす9＋1個の方法 at PubCon
Googleのスパム対策強化やブランドリンク重視そしてその他もろもろを先日参加したPubCon Las Vegas 2010のレポートとして、お伝えしてきました。 今日はレポートをもう1つ追加します。 ECサイトを運営するサイト管理者、特に「ECサイトではオリジナルのコンテンツを作るのは無理」と“あきらめモード”に逃げているネットショップの運営者（そう、あなたのことです！）の参考になるはずです。 （たった数秒といえど）言い訳を探すのに費やすムダな時間と思考回路をこれからリストアップするコンテンツ増強のアイディアを探すことに向けてください。ｗ モデルとなるのは、“狩猟犬アイテム”をオンラインで販売するGUN DOG SUPPLYというECサイトです。 このサイトが、当初の売上見込額の3倍の1,000万ドル（日本円で8億数千万円）を6年間で増やすことに成功した施策の1つがサイトのコンテンツを増
サムネイル付きで関連ポストを実装してくれるWordPressプラグイン・Wp-Thumbie - かちびと.net
なかなか便利なプラグインでしたので ご紹介します。サムネイル付きで関連 記事を実装してくれるプラグインです。 方法はいくらでもあるのですが、カスタ マイズ出来ない、という方も多いと思い ますので、プラグインで実装出来れば 楽ですよね。 おそらく、精度を重視するか、ビジュアルを重視するか運営者によってニーズは変わると思います。このプラグインは後者向けとなりそうです。精度を重視するのであれば、YARPPやWordPress Related Post for Japaneseが良さそうです。両者ともカスタマイズや他プラグインとの組み合わせでサムネイルを実装することも可能です。 こちらは導入すれば自動でサムネ付きの関連ポストを実装してくれる手軽なプラグインです。方法を調べたり、カスタマイズしたりする必要もありませんが、レイアウトの調整が必要なら、cssを加える事になります。 オプションもそれなりに
[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
cssの未使用セレクタをその場で複数ページ一括調査するブックマークレット・cssess
中小規模サイトの構築時に役立ちそうな ブックマークレットがあったのでご紹介します。 閲覧しているWebサイトで使用しているcss の未使用セレクタを教えてくれるブックマーク レットです。こういったWebサービスはあります が、その場でサクッと調べられるのは面倒が 無くて良いですね。 使いどころはやや限られますが、複数ページを一括で調査し、それぞれのページの未使用セレクタを知らせてくれますのでなかなか便利だなぁと感じました。 おそらくブックマークレットを使ったページからリンクされている同一ドメインページを読み込んでるっぽいのです。zipや#の付いたURLも含まれているのはそのためでしょうかね。こういうリンクがある場合はチェックをはずしてください。 ページごとに使っていないセレクタを教えてくれます。 ブックマークレットを使うと上記のような半透明のボックスが出ますので調べないページのチェックを外
ヒアリングシートの作成
ヒアリングシートとは、クライアント企業の希望に沿ったWebサイトを制作するために、要望を正確に聞き出す目的で作成する質問リストのことです。ヒアリング時の質問内容を事前に用意しておくことで聞き洩らしを防ぐとともに、プロジェクトに対する意気込みをクライアントに伝えられます。 ヒアリングシートは、ミーティング時に全員に配布するアジェンダとは異なり、基本的には制作サイドでクライアントに確認しながらその場で記入します。作成後は、聞き出した要望を制作スタッフと共有するための内部資料として使用します。 ヒアリングシートの具体的な使い方 ヒアリング当日は、クライアントが理解しやすい言葉を使って、事前に用意しておいた質問を1つずつ聞いていきます。制作会社では当たり前に使っている用語が、クライアントの担当者にとっては難しい言葉であることはよくあります。また、会話の中で互いに使っている用語が違う意味を指している
UX とユーザビリティ のお話 【基礎編】 : LINE Corporation ディレクターブログ
こんにちは。10月からブロググループのディレクターをしている真田 (さなだ) です。 これまで私はマークアップエンジニアをしていましたが、コンテンツの設計段階から参加できることは多くありませんでした。ディレクターとなったからには、根本からHCD (人間中心デザイン) を意識したコンテンツ作りをしていきたいと思っています。 そこで今回はまず、ユーザーエクスペリエンス (以後UX) とユーザビリティの基礎についてまとめてみたいと思います。 UXってなに？ なかなか明確に定義することが難しく、さまざまな解釈がなされているUXという言葉。 直訳すると「ユーザー体験」となりますが、国際規格のISO 9241-210の中では、「製品やシステム、サービスを使用、あるいは使用を予想した時の、人の知覚と反応」とされています。 それを利用したときに感じるあらゆる感情、また「使用を予想した時の」とあるように、製
商用利用も無料、エレガントな花柄や金ピカのPhotoshopのレイヤースタイル
エレガントなフラワーをあしらったPhotoshopのレイヤースタイルを紹介します。 Elegant Flower Photoshop Styles for free レイヤースタイルなので、上記のテキ
[JS]ページをめくるアニメーションが楽しい、本のように表示するスクリプト -Viewbook
div要素で配置したコンテンツ（パネル）を自動で重ねて、本のようにページをめくるアニメーションで次々にコンテンツを表示するスクリプトを紹介します。 Viewbook - jQuery Plugin デモ [ad#ad-2] 次のページをめくるには三通りの方法が用意されています。 「Next」「Previous」で、次・前へ ページのナンバリング ※違和感がありますが キーボードの矢印キー 中でも、キーボードでの操作が楽でいいですね。 Viewbookの実装 各パネル（ページ）はdiv要素のため、画像やテキストなどさまざまな要素が配置できます。 HTML コンテンツはdiv要素の入れ子で構成されています。 idのmybookは自由に変更できます。 <div id="mybook"> <div class="vb-load"> <div>Page 1</div> <div>Page 2</di
背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウィジェットベイトとは？ - ブラックハットSEO大全#10 | ブラックハットSEO大全
css-lecture.com
新着記事