サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
問題 Firefoxって、imgタグなどの画像がないとき、何も表示しないですよね。 Firefoxで画像がない時(404など)の表示を分かりやすくすることはできる？ 答え Firefoxでは<img>の画像が404の時、ALTを代替として表示する設定になっていますが、ALTが設定されていない場合、何も表示されません。 すると、webサイト制作中にfirefoxで動作確認しているとデザインが破綻しない限り見つからず、IE等でのチェックの段階で見つかることになり、ちょっとした手間となります。 そこで、firefoxに手を加えてIEのように表示されるようにしましょう。 どうするの？ 表示するためには、userContent.cssを使います。 ユーザースタイルシートと呼ばれる、全てのサイトに適用される個人用のCSSです。 詳しい設置方法は下記URLを参照してください。 http://firefo
知人にエイプリルフールネタを言った所、一切のツッコミもなく終わってしまった可哀想な私、Latinです。 さて今回ですが、WordPressのカスタマイズ要件でもよくあるサムネイル周りの取り扱いについて。 オリジナルのサムネイルサイズを定義する事自体は割と簡単なんですが、 カスタムフィールド絡んで来ると結構、「訳わからん･･･」みたいな状態になったりします。 え？私だけ？ とりあえず、フロントエンドで表示する所までをまとめてみようかと思います。 元々WordPressでは、画像フィールドに画像を入れ込むと、 管理画面の「メディア設定」で設定したサイズを元にサムネイルが自動生成されますが、 これらの設定とは別に、オリジナルのサイズを定義したいケースがあるかと思います。 例えば、既にこれらの設定を使用している状態で、さらに別のサイズのサムネイルを作成・表示させたい場合などです。 function
![[WordPress]カスタムフィールド画像からオリジナルサムネイルを生成して表示させる | バシャログ。](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fb53dec6a802a8894496962b618bea8a7e8829438%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fbashalog.c-brains.jp%252Fimages%252Fcat_wordpress.png&f=jpg&w=240)
質問させてください。 プラグイン「Custom FieldGui Utility」を使って、投稿にカスタムフィールドを設置しました。 画像をアップロードできるところを作成したのですが、 カスタムフィールド上の「アップロード・挿入」から画像をアップし、 「カスタムフィールドに挿入」をすると、 挿入された画像のURLの頭に［123］といったような数字入りのカッコがついてしまい、 そのまま保存すると、実際表示されるページ上では画像がリンク切れとなってしまいます。 カスタムフィールドへの画像アップで数字が入らないようにするには どのように対処したら良いでしょうか。 お知恵をいただければ幸いです。 よろしくお願いいたします。
Tip: High qualityCSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode:bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
まずは「元写真の横幅、縦幅」の項目に、元になる写真の横幅と縦幅を入力します。後は、「変更後の横幅、縦幅」の項目で横幅を入力すれば、縦幅と倍率が計算され、縦幅を入力すれば、横幅と倍率が計算されます。または倍率を入力すれば、横幅と縦幅が計算されます。 また下の表では、上の表の「元写真の横幅、縦幅」の項目に写真のサイズ入力すると、「写真のアスペクト比（横と縦の比率）」が自動で計算されます。そして「倍率」の項目に好きな数字を入れることで、アスペクト比を基に写真の拡大縮小が計算出来ます。 項目
チャットモンチーの新作早く聴きたーい！みなさん、こんにちは nakamura です。 よくウェブカタログ等で画像の拡大表示機能を見掛けますが、とあるプロジェクトで似たような要件を満たす必要がありました。ただし FLASH は NG。ということで JS ベースのものを探していた所、中々シンプルで使いやすいプラグインがあったので今回紹介してみたいと思います。 jQuery Zoomプロジェクトページはこちら。Jack Moore さんって Colorbox とかも作ってる人なんですね～。いつもお世話になってます！ 使い方 とりあえずダウンロードして適当な場所に展開しましょう。ソースコードはGithub で公開されているので、以下からどうぞ。 jackmoore/zoom 一緒にくっついてくる demo.html やプロジェクトページを見ればだいたいの使い方は分かると思いますが、最低限必要な
あけましておめでとうございます。hakoishiです。本年もよろしくお願いいたします。 正月休みはコタツと闘っては連日連敗を喫しておりました。 眠りへの誘惑危険すぎる。 さて、本日はDreamweaverの画像サイズのリセットが一気にできちゃうコマンドと、半分にリサイズするコマンドのご紹介を。 画像サイズをリセットするDreamweaverコマンド Dreamweaver 画像の幅と高さをリセットするコマンド « きんくまデザイン http://www.kuma-de.com/blog/2009-01-27/298 既存のソースを使いまわしてコーディングする時や、修正を重ねるうち微妙にサイズの違った画像が多発した時。 1つずつクリックして修正していくのは手間ですね。 と、そんな時にこのコマンド。 ソースを全選択した状態で、「コマンド」メニュー⇒「画像サイズをリセット」を適用すると、ページ
HOME > 人気 > コブスニュース > 画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) 画像にエフェクトをかけて拡大表示 したり、スライドを作ったり、ツール チップで表示したり、というような 画像を使用したjQueryプラグイン が沢山あるのと、探してる方が直ぐ に見つけられるように、という事で リンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さ
iPhoneでLightboxが動作しなかったので、 代替のパッケージを調査してみた 発生する問題調べてみたところ、次の3つの問題がある事が分かった。 表示位置がずれる本来タップした位置ではなく、かなり上の方に表示される。 画面の暗転が起きるので動作しているのは分かるのだけれど、画像が表示されるように見えない。 ダウンロードが出来ない画像の表示は上手くいってもiPhoneでは画像をプレスすると「画像を保存」と「コピー」が表示されるのが、リンクとして認識され「開く」と「新規ページで開く」、「コピー」が表示されダウンロードできない。 これだと、壁紙画像とか作っても使えないので困る 動作が重いスマートフォンでも使うからこそ動作速度、容量ともに軽量なものが望ましい 調査したパッケージ元祖Lightbox 表示位置 × ダウンロード ○ 軽さ ○ Firespeedでも長く使用していたLightbo
DownloadVersion 1.5.1Mac OS X 10.8-11 Not using aMac? Check out Color Quantizer (Windows), pngquant (Unix) and TinyPNG (on-line). Snow Leopard (10.6) versionChangelogBugsDonateSource code This application is no longer supported.It was written inPython 2, andPython 2 has been deprecated and removed frommacOS. Alternatives: lossy option in ImageOptim, pngquant, or squoosh.app. ImageAlpha great
ImageOptim makes images load faster Removesbloated metadata. Saves disk space & bandwidth by compressing images without losing quality. Faster web pages and apps Reduces image file sizes — so they take up less disk space and download faster — by applying advanced compression that preserves quality. Image files scrubbed clean Removes invisible junk: private EXIF metadata from digital cameras,em
ツイート どんどん宣伝してね！ このコンテンツを表示するにはFlashPlayerが必要です。 作った人：えいちぜろな（h071019）はてなハイク： Twitter： こちらの箱ドットジェネレータもよろしく。 *「箱ドット」はデザイン集団「NC帝國」がデザインしたペーパークラフト「グラフィグ」を元にした二次創作です。 ＜使い方＞ プルダウンメニューから各パーツを選択 ↓ 色を自由に変えられるパーツはメニューの右側にカラーピッカー（）が出るので、それをクリックして色を変更 （RGBの数値入力でも色を変更できます） ↓ 完成したら「画像を保存」ボタンを押して画像を保存 *16×16ピクセル、48×48ピクセル（3倍拡大）、64×64ピクセル（4倍拡大）の3種類のサイズで保存できます。 48×48ピクセルはTwitterアイコン、 64×64ピクセルははてなのアイコンとしてちょうどいいサイズ
お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。 切り抜き・マスク作業で、もうイライラしない！ 誰でも、切り抜き30秒・調整30秒で完成できる方法。 WEBサイトやLPのキービジュアルでは画像を使うことが多い。 しかし、お客様から素晴らしい画像の支給があるとは限らない。 「これ、マスクしないといけないじゃないか！」 昔からマスク専用のアプリケーションがあるほど、マスク作業・切り抜き作業というのは 利益にならないのに、手を抜けない根気が必要な作業。 しかし、今なら誰でも簡単に、1分あればできる。 今更だが、やっとAdobeのCS5シリーズをまともに使い始めたので ここで、Photoshop CS5を使った、超簡単マスク術を紹介したい。 お題の写真 こちらが今回のお
短いサンプルを作成しjQueryを「使ってみます」。実際に動くサンプルとそのコードを この記事上に載せています。 要素選択とcss変更： テーブル色を１行おきに変える イベントとエフェクト： 画像をクロスフェードで切り替える イベントとエフェクト： 画像をフェードインで切り替える（当初の版） 画像のフェードなどの画面効果も面白いものですが、jQueryの一番の特色は、複数要素に対する 処理を「繰り返し手続き」を用いず記述できる点です。これを使って テーブルの各行の色を変えるサンプルを作りました。 2011/06/10：HTML5/CSS3を使ってテーブルの色を一行おきに変える 記事をHTML5/CSS3でtableを色を一行毎に変えるに置きました。 jQueryのもう一つの重要な機能であるAjaxアクセスに関してはいずれ別メモ記事に載せます。 イベントハンドリングとエフェクト例（クロスフェ
iPhone 4はiPhone 3GSと同じ画面サイズのまま、2倍の解像度となった。Androidでは機種により異なるが、1.5倍のものが多い。 同じ画面サイズで表示できるピクセル数が増えたため、細かい文字もくっきりとして読みやすくなった。 しかし、コンテンツの1pxをデバイス上の1pxとしてそのまま表示すると、全体的に小さく表示されてしまうことになる。 そこで、WebKitをベースとしたブラウザには「devicePixelRatio」というプロパティが用意されている【1】。 devicePixelRatioとは、直訳すると「デバイスのピクセル比率」で、コンテンツの1pxを実際のデバイス上で何pxとして描画するかを示すものである。 【1】スマートフォンのdevicePixelRatioと解像度の一例
画像の貼り付け方を指定します。 設定値はcrop、image、scaleとなります。デフォルト値はimageとなります。 ・cropはそのまま貼り付けます。 ・imageは要素のwidth、heightの値に関係なく要素を画像の大きさに合わせます。 ・scaleは要素の大きさに合わせて画像を拡大縮小。要素の大きさが画像のサイズ以下ならば指定したwidth、heightに合わせますが、要素サイズの方が大きい場合には、拡張して表示します。
上手いタイトルが思いつかない…(^^;。「最新のサムネイル画像と合わせて記事リストを表示したい。画像のない記事にはNo Imagesのような決められた画像を表示したい」というご質問をいただきました。これはプラグインやキーワード欄を利用する方法でも実装できますが、MT4ならではのMTタグのみで実装する方法を考えてみました。 ブログ記事リストにサムネイルも表示させるだけなら簡単に出来ます。以下のようにすればＯＫです。画像の大きさはお好みで。 <ul> <MTEntries lastn="10"> <li> <$MTEntryTitle$> <MTEntryAssets type="image" lastn="1"> <img src="<$MTAssetThumbnailURL height="50"$>" alt="<$MTEntryTitle$>" /> </MTEntryAssets>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
