レスポンシブでPC向け画像をスマートフォンに対応させるあれこれ
久しぶりにCSSのネタでも更新します。今回は画像をスマートフォンに対応させるテクニックをまとめました。 デモ まずはデモをご覧ください。 画像を画面幅に応じて縮小したり、画像を切り替えたりしてスマートフォンに対応させています。 Demo zipファイルをDownload HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画像をスマートフォンに対応させるあれこれ</title> <link rel="stylesheet" href="css/reset.css" > <link rel="stylesheet" href="css/style.css" > <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script
画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」 – bl6.jp
画像の読み込みを遅らせて表示させることができるjQueryプラグイン「Lazy Load」を使ってみました。たぶん今後使いどころがありそうな感じです。色んなところでよく見かけると思いますが、スクロールをしていくとそれに合わせて画像も表示されていきます。ということで以下、使い方です。 [ads_center] 使い方 jQuery本体とダウンロードしたjquery.lazyload.jsをhead内に読み込みます。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <script type="text/javascript" src="jquery.lazyload.js"></script> 続いてL
Google が Microdata による組織ロゴの意味づけに対応したそうなので
Google ウェブマスター向け公式ブログで紹介されていましたが、Microdata （schema.org） による、組織ロゴの意味づけをサポートし、組織を象徴する画像と Web サイトを関連づけることで、Google 検索結果で使用される組織ロゴの画像を指定できるようになったそうです。 ということで、実際に使用する場合のサンプルソースなど挙げてみようと思います。 組織のロゴの schema.org マークアップのサポートを開始しました ： Google ウェブマスター向け公式ブログ このたび、Google では組織のロゴについての schema.org マークアップのサポートを開始いたしました。このマークアップによって、組織を象徴する画像とサイトを結び付けることができます。ウェブマスターの皆様は、Google 検索結果で組織のロゴとして使用される画像を指定することができます。 組織のロ
Fotolia
{"interception":{"ii":"-1"},"fotolia":{"host_base":"fotolia.com"}}
docomo携帯電話でgoogleマップのpng画像が表示されない−Google Static Maps API v2 - まんぞうブログ
携帯電話でgoogleマップを表示させたかったのだが、ダイレクトにgoogleマップではなく、故あってhtmlページに挿入されたマップにしたかった。が、単純にgoogleマップから得られるiframeタグで埋めこむと携帯電話では軽量化したサイト表示で省かれてしまう。 で見つけたのがこれ Google Japan Blog『Google マップが携帯でも表示できるようになりました』（参照） 従来の Google Maps API と違い、Javascript を必要としませんので、携帯電話向けの Web ページなどに貼り付けることが可能になっていることも大きな特長です。 2008年3月と若干古い情報だけど、マップのグラフィックをimgタグで挿入できる。 紹介されている Static Maps Wizard という簡易ツールを使う。（参照） いざ、webページを作ってみる。 エミュレータ（参照
WEB制作｜デザイン会社｜超簡単! 髪の毛の画像を1分で切り抜く方法まとめ
お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。 切り抜き・マスク作業で、もうイライラしない！ 誰でも、切り抜き30秒・調整30秒で完成できる方法。 WEBサイトやLPのキービジュアルでは画像を使うことが多い。 しかし、お客様から素晴らしい画像の支給があるとは限らない。 「これ、マスクしないといけないじゃないか！」 昔からマスク専用のアプリケーションがあるほど、 マスク作業・切り抜き作業というのは 利益にならないのに、手を抜けない根気が必要な作業。 しかし、今なら誰でも簡単に、1分あればできる。 今更だが、やっとAdobeのCS5シリーズをまともに使い始めたので ここで、Photoshop CS5を使った、超簡単マスク術を紹介したい。 お題の写真 こちらが今回のお
別窓を開かずにその場クリックで拡大画像を表示する4つの方法 [ホームページ作成] All About
別窓を開かずにその場クリックで拡大画像を表示する4つの方法画像のクリック後にページを移動せず、その場で拡大画像を表示できるLightbox系スクリプトのおすすめ4本を紹介。JavaScriptを読み込むタグと短いHTMLを書くだけで簡単に使えます。jQueryを使う定番のLightbox2や、動画のポップアップも可能なColorbox、スマホ対応で全画面表示もできるIntense Imagesなどを紹介。CSSを使えば画像サイズの調整も簡単です。 画像クリックで拡大表示されるJavaScriptが便利 HTML内にたくさんの写真や画像を掲載するアルバムページなどでは、最初にサムネイル画像（縮小画像）だけを並べておき、閲覧者がそれをクリックしたりタップしたりした際にだけ拡大画像を表示するデザインがよく使われています。 ウェブページ上で拡大画像を表示する際には、ポップアップウインドウを出したり
![別窓を開かずにその場クリックで拡大画像を表示する4つの方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ec4b03d1cb7a6f647ea70376bdd657185b7fdae/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F7%2F5%2F201708241603%2Ftopimg_original.png)
jQuery plugin｜Ajax｜PHP & JavaScript Room
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説jQZoom v2.2 〔画像の一部を虫眼鏡みたいに拡大鏡ウィンドウ表示〕 Magnify, a jQuery plugin 〔画像の一部を拡大表示〕 panView 〔マウスドラッグで画像の一部を表示〕 jQPanView based in jQuery 1.1 〔画像の一部を拡大表示〕 サムネイル画像にマウスオーバーした部分の画像を虫眼鏡のように拡大鏡ウィンドウ表示するjQueryライブラリ。 拡大鏡ウィンドウのサイズ、オフセット、位置などの指定も可能です。 設置イメージ 設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht
カスタムフィールドを使用する | CMSプラットフォーム Movable Type ドキュメントサイト
カスタムフィールドを利用することで、独自の入力項目を Movable Type に追加することができます。Movable Type にあらかじめ用意されている、ブログやプロフィール関連の入力項目をカスタマイズして、独自の入力項目を追加します。 カスタムフィールドは以下のような操作を可能にします。 e コマースや、商品カタログなど、ブログ記事以外の入力項目を追加して、様々なデータを保存・表示できるようにする 追加した項目は、ブログ記事の投稿画面に自動で追加表示 入力必須の項目指定とエラー表示 チェックボックス、ラジオボタン、ドロップダウン・メニューなどの様々な入力フォーム形式に対応 デフォルトの入力値の指定 カスタム入力項目を MT タグで指定して、表示記事をフィルターしたり並び替えて表示 カスタムフィールドの設定は、以下の場所でおこないます。 操作メニューの [設定] から [カスタムフィ
エントリー内の画像をリストアップするプラグイン(MT4専用版)
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 「エントリーの画像をリストアップするプラグイン」のMovable Type 4専用版を公開します。 1.インストール まず、以下のリンクをクリックして、ファイルをダウンロードします。 EntryImages_1_11.zip プラグインの継続的な開発やサポートのために、プラグインをご利用された方は、ドネーション（寄付）を行っていただけると幸いです。 ドネーションの方法は、こちらのページをご参照ください。 また、このプラグインの他にも、いくつかのプラグインを配布しています。 配布中のプラグインは、Movable Type Plugin Directoryのページをご参照ください。
画像をピタっと枠内に収めるMovableTypeプラグイン:AssetThumbnailURLLimitSize - エンジニアブログ - スカイアーク
onagataniです。こんばんわ。 連続投稿となります。 AssetThumbnailURLLimitSizeはプラグインは指定されたピクセルサイズに合うようにアスペクト比を変えずに画像を縮小するプラグインです。指定された枠内に画像を収める場合に、「縦(横)を縮小したら横(縦)がサイズオーバーする」ような場合に便利です。 プラグインのダウンロード AssetThumbnailURLLimitSize0.1 ダウンロード プラグインのインストール インストール方法：解凍後の「AssetThumbnailURLLimitSize」ディレクトリをMovable Typeの「plugins」ディレクトリにアップロードします。 プラグインの利用方法 ファンクションタグ <$MTAssetThumbnailURLLimitSize$> 使い方はMT標準のMTAssetThumbnailURLとほとん
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Snapito!
素材写真 | Shutterstock: ロイヤリティフリー素材写真
イラストの定額制ダウンロードなら、商用でも安心のイラスト市場
人人香蕉久久一区二区_婷婷六月免费视频在线观看_av中文官方网址_久久WWW免费人成精品