jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験｜BLACKFLAG
TwitterやFacebookなどで使われている コンテンツ要素をある一定の数表示（読み込み）しておいて 続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで 要素を順々に読み込んでいくUI。 このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、 同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。 今回の実験では＜a＞リンクを張った＜img＞画像タグを ＜span＞タグで囲った構成のまとまり ———————————————————- ＜span＞＜a＞＜img＞＜/a＞＜/span＞ ———————————————————- 上記のセットを順々に追加していく構成になっています。 併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。 ———————————————————-
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
[携帯]inputタグの文字色が外側のフォントカラー指定に影響される │ これからゆっくり考L +α
携帯サイトで、背景色を濃い色に、文字色を白（もしくは白に近い色）に指定している箇所に入力フォームを設置する場合、inputタグ（テキストボックスやsubmitボタン）の文字色に注意しましょーというお話です。 サンプルページ QRコード →サンプルページを見る <div style="background:#333333;color:#ffffff;"> ﾒｰﾙｱﾄﾞﾚｽ<br /> <input type="text" value="hogehoge@hoge.jp" name="mail" size="27" style="width:95%" /><br /> <input type="submit" value="送信する" /><br /> </div> 各キャリアでの表示 docomo（F-06B） テキストボックス内の文字色も、submitボタンの文字色も「黒」。 外側のフォン
mixiチェックのチェックボタンを設置
mixiチェックのチェックボタンを設置 mixiチェックのチェックボタンを設置してみました。（参考:mixiチェックとは？）FacebookのLike Button(いいねボタン)のmixi版のような感じです。 設置方法 mixi Developer Centerのmixiチェックに設置方法が書かれていますが、設置には「mixi チェックキー」が必要のようです。 mixi チェックキーの取得 チェックキーの取得にはデベロッパー登録が必要で、mixi Developer Centerでデベロッパー登録ができます。 個人の場合はmixiアカウントとメール認証が出来る携帯電話が必要です。 デベロッパー登録が終了したら、mixi Developer Centerの右上のログインリンクからダッシュボードに移動し、mixi プラグインに新規登録からチェックボタンを設置するサイトを登録します。URL許可
技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)
mixiチェックボタンの設置方法は簡単です。数行の HTML を追加するだけです。 チェックボタン用HTML発行フォームをお使いください。 ただし、効果的に設置するためにはいくつかのポイントがあります。 設置のポイントに関しては、「mixi Plugin 実装のポイント」をご確認ください。 mixiチェックボタンの設置（PC 向け） mixiチェックボタンの設置（PC 向け） <a href="https://mixi.jp/share.pl" class="mixi-check-button" data-key="...">mixiチェック</a> <script type="text/javascript" src="https://static.mixi.jp/js/share.js"></script> a 要素と script 要素には、それぞれ以下の属性を指定できます。 a 要
tips! | 続・Tumblrにソーシャルボタンを追加 - Facebookシェアボタン編
以前記事にした「いいね！」(Like)ボタン設置＆カスタマイズ方法の派生です。 過去記事：Tumblrにソーシャルボタンを追加 - その2. Facebook いいね！(Like)ボタン編 ↑のようにアイコンを変更した(公式iconタイプと似てますが別物です)シェアボタンを設置してたんですが、 結局すぐに外してしまったのでそっちも忘れないうちに記録してみようということで。 シェアボタンの現状といいね！ボタンの違いについては以下のサイトさんを参考にしてみてください。 Facebook、「Like」ボタンの機能を強化—「Share」ボタンの機能を統合 - CNET JapanわかっているようでわかってないFacebookの「いいね！」「シェア」を徹底解剖！:ガイアックスソーシャルメディア ラボ／Facebook・twitterの企業利用法についての研究機関 それではFacebookシェアボタン
フィードダイアログ - シェア機能 - ドキュメンテーション - Meta for Developers
フィードダイアログをアプリに追加することにより、人々がそれぞれのストーリーにコメントを付けてタイムラインに公開できるようにすることができます。 フィードダイアログでストーリーをシェアするためにアクセス許可の拡張を依頼する必要はありません。 統合このダイアログは、Facebook SDK for Javascript/iOS/Androidで、URLへの完全リダイレクトを実行することによって使用できます。このダイアログをトリガーするために使用できるサンプルコードスニペットを以下に示します。 JavaScriptフィードダイアログをトリガーするには、FB.ui関数を呼び出します。その際に、methodパラメーターの値としてfeedを使用します。 FB.ui({ method: 'feed', link: 'https://developers.facebook.com/docs/' }, fu
「いいね！」ボタンを設置しよう │ facebook-japan
Tweet 「いいね！」ボタンを設置しよう 「いいね！」ボタンをフェイスブック外部のホームページやブログに設置することで、よりたくさんのつながりをもつことができます。 これはソーシャル・プラグインと呼ばれる仕組みです。 Facebookが「いいね！」ボタンのソーシャルプラグインを 2010年4月に公開した直後、24時間以内に10億回以上もクリックされたといわれています。 たとえば、あなたのブログに「いいね！」ボタンを設置し、それを見た人がクリックした場合、ブログとFacebook内の両方で「○○さんがいいね！と言っています」と表示されましす たくさんの人にクリックしてもらえれば、それがきっかけであなたのブログへのアクセスが爆発的に増える可能性もあります。 「いいね！」ボタンがクリックされると、その都度そのWEBサイトへのリンクが張られます。 つまり、みんなが「いいね！」といってい
CSS3のtransitionプロパティでアニメーションを試してみた
このブログでもひっそりと使っているCSSでのanimation。結構今更ですが、これも毎回調べたりしつつ使っているので、勉強したことを書きだしておきます。 今回はその中でもtransitionを使ってアニメーションをみてみようと思います。 webkitとOpera、Firefox4で動作 2011年1月現在、CSS3のアニメーションが動作するのはwebkitのSafariとChrome、それとOperaとFirefox4で動作します（IE未確認）。ただし、それぞれのブラウザでベンダープレフィックス（接頭語）がないと動作しません。 まずはデモを まずは簡単に、ブロックが大きくなるデモから。 ■CSS .demo div{ background-color:#0000ff; width:100px; height:100px; color:#ffffff; /*以下アニメーションの設定（○○は
新しくなった公式Twitterボタン（ツイートボタン）のデザインを修正する
Twitterのリニューアルに伴い、公式Twitterボタン（旧ツイートボタン）の機能とデザインが変更されたようです。Twitterボタン作成ページもリニューアルされています。 新しい作成ページでは、これまでの「リンクを共有する」ボタンの他に「ハッシュタグ」「フォロー」「@ツイート」が作れるようになりました。 Twitterボタン これにより、これまでブログに設置していた公式Twitterボタンのデザインも変わっています。 本エントリーではデザインを修正する方法をいくつか紹介します。レイアウトの崩れ具合によっては他の修正が必要かもしれませんので予めご了承ください。 １．ボックスタイプの幅を修正する（その1） リニューアル前からブログなどに設定しているボックスタイプ（垂直タイプ）はリニューアル後に次のような表示になっています。 これを次のようにコンパクトなサイズに修正します。 修正するには次
Facebookのshare(シェア)ボタンをサイトやブログに設置する方法
このブログでもFacebookの「いいね！（like）」ボタンを設置する方法は書いたことがあるし、同じように「いいね！」の解説ページは他にもたくさんあるんだけど、各種「share（シェア）」ボタンのオプション設定の解説を日本語で書いてるページはあまり見あたらない。（現在はいいね！数をカウントしている「share+カウント数ボタン」の解説ページはある。） しかも「facebook share」でGoogle検索するとトップにでてくるShare on FacebookにアクセスするとなぜかLike Buttonの方にページ移動させられて、shareボタンのヘルプページが見つかりにくいという問題もある模様。というわけで「shareボタンの設定と設置方法」を書いてみた。ブログやサイトに設置するときに参考にどうぞ。 各種sahreボタンの解説 shareボタンも「いいね！」ボタンと同じようにヘルプペ
「いいね！」ボタン設置方法 - Facebook開発者
欧州地域でのソーシャルプラグインに対する変更欧州地域でFacebook製品を使用しているユーザーに関しては、Cookie同意プロンプトが更新されたため、ソーシャルプラグインに何らかの影響が現れる可能性があります。欧州地域のユーザーは、1)Facebookアカウントにログインしている、2) 「アプリとウェブサイトのCookie管理」に同意している、のいずれかの条件を満たさない限り、「いいね！」と「コメント」のソーシャルプラグインのサポートを終了します。この二つの要件が満たされていれば、ユーザーは「いいね」や「コメント」ボタンなどのプラグインを見たり、操作したりすることができます。上記のいずれかの条件を満たさない場合、ユーザーはプラグインを見ることができません。 欧州地域には、以下の国が含まれます。 欧州連合 (EU): オーストリア、ベルギー、ブルガリア、クロアチア、キプロス共和国、チェコ共
Available on the Available on the Available on the X X X X X アプリケーションのマーケティングと アイデンティティ デベロッパ向けガイドライン 概要 iOSデベロッパプログラムのメンバーは、ウェブサイ
Available on the Available on the Available on the X X X X X アプリケーションのマーケティングと アイデンティティ デベロッパ向けガイドライン 概要 iOSデベロッパプログラムのメンバーは、ウェブサイト、広告、その他のマーケティングコミュニケーション においてApp Storeで配信をしているアプリケーションを宣伝する際に、以下のガイドラインに従う 必要があります。 バッジおよびiPad、iPhone、iPod touchの画像の使用条件 本ガイドラインに掲載されている「Available on the App Store」バッジとiPad、iPhone、iPod touch の画像は、App Marketing Artwork License Agreementに同意したiOSデベロッパプログラムの メンバーのみが使用を許可さ
ストップウォッチ｜ブラウザ・スマホですぐ使えるWEBアプリ
アドレス変更のお知らせ サイト引っ越しに伴いアドレスが以下に変更になります。ブックマークなどの変更をお願いします。 https://garakuta.app/timer/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーをデザインする | DesignWalker
http://indigonote.com/2011/09/14/original-like-button/
【最新】facebook いいねボタン設置時のOGP対応方法♪
ツイートボタンの設置＆カスタマイズ方法まとめ
Twitter / Twitter buttons
サービス終了のお知らせ