リンク投稿のサムネイル表示サイズの変更はもうチェックしましたか？反応率に関わる投稿時の画像サイズを確認！Facebookページの担当になった新人マーケターのあゆみちゃんと「画像サイズ」について一緒におさらいしましょう♪ ※※※※※※※※※※※※※2014年6月追記※※※※※※※※※※※※※※※※※※※ Facebookページ投稿画像のニュースフィード上での表示が画一的ではなくなっています。 詳しくはこちら↓をご参照ください！ 「モバイル表示を要チェック！Facebookページ投稿画像ニュースフィードでの見え方の違いまとめ」 ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ エンゲージメントを左右する画像
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。 PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリ WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
仕事上で使用する画像はウェブ上で見つけにくく、いい画像だな、と思っても商用利用ができなかったりクレジット表記が必要だったりする場合もあります。そんな時に便利なのが横断検索サイト「タダピク」で、海外や日本の計24の画像検索サイトから商用利用OK・クレジット表示不要の画像素材を横断検索することが可能です。 タダピク（tadapic） - 商用利用OK・クレジット表示も不要の画像素材検索エンジン http://www.tadapic.com/ トップページの検索欄にキーワード「子猫」を記入し、検索ボタンを押すと…… こんな感じで子猫の画像が表示されます。 気になる画像をクリック。 すると、画像元のサイトに飛びます。 なお、検索対象は「画像」なので、写真だけでなくイラストも一緒に検索されます。 検索時にはイラストやアマチュアカメラマンによる写真素材サイト足成の写真を除外したり、日本のサイトに絞り込
家中に水辺の心地良さを。水路を小舟で移動するデザイナーズハウス2012.08.08 22:006,233 一日中ゆるゆる過ごしているだけで、心が満たされそうです。 こちらはバングラディシュのダッカにある、モダンなコンクリート造の家。シャトット・アーキテクツ（Shatotto Architects）によるデザインです。外界の喧騒から離れ、そこにあるのは穏やかな時間。家の中にこんなリゾート空間があったら、なかなか外に出たくなくなりそうですね。 ちなみにこの家、単なるリゾート空間ではありません。中央のプールには熱気を逃して家の中を涼やかに保つ効果もあり、バングラディシュで快適に過ごすための機能美も兼ね備えているんです。また吹き抜けの天井は常に新鮮な空気と自然光を取り込み、中庭から各部屋にはりめぐらされた水路をつたって小舟で移動することもできるんだとか。 キッチンで冷蔵庫からフルーツを取って小舟に
伸び縮みするアコーディオンと回転木馬のようにスライドするカルーセルを合体させたスライダーを実装するjQueryのプラグインを紹介します。 jQuery Accordion with Carousel – Accarousel [ad#ad-2] Accarouselのデモ Accarouselの使い方 Accarouselのデモ デモはFirefox, Chrome, Safari, Opera, IE7+でご覧ください。 デモページ：4枚目をアコーディオン カルーセルは右下のナビゲーションでサムネイル画像をスライドさせます。 起点と終点があるのがちょっと残念。 [ad#ad-2] Accarouselの使い方 実装は簡単で、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 ※スタイルシートはLESS版も用
「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 Creating CSS3 Image Ribbon Tags [ad#ad-2] デモ 実装 デモ 元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。 まずは、img要素の画像から。 デモページ：div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> CSS:img要素版 このエフェクトの要点はラッパーの「overflow: hidd
Thank you for being patient. We are doing some work on the site and will be back shortly.
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」 2011年06月23日- A jQuery plug-in for Lens Effect Image Zooming ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」。 次のように、画像の特定部分の円形のみをズームするようなUIが簡単に作れちゃいます。 ECサイトなどで商品を拡大するように実装されていたらお客さんに喜んでもらえるかも。 レンズの大きさもピクセル指定で自由自在です。 白黒写真がレンズを入れることでカラーになるみたいな効果も。 レンズの色やサイズも選べます。 実装の容易さも素晴らしくて、.imageLensで初期化するだけです。 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」
高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」 2010年08月11日- Zoom.it 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」。 こういうものを実現するライブラリ等はありましたが、Zoom.itはサイトにURLを貼りつけて送信するだけで、インスタントに実現でき、更に自サイトに埋めこむことだって出来ます。 大きなサイズの画像をうまく指定のサイズに収めつつ、拡大もさせたいという場合にかなり使えそうです。 コントロールボタンが右下に表示されるのでここで拡大・縮小が可能 めいっぱい拡大してこんな感じ。本来の美しさは損なわれません。 使い方によっては非常に便利に使えそうですね。 以下に実際に埋め込んでみました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
