background-attachment: fixed がスマホで効かない問題は ::before で解決！
background-attachment: fixed がスマホで効かない問題は ::before で解決！ Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおりに表示するのに、iOS Safari ではウマくいかない事態になりました。 調べてみると、iOS Safari では、「background-size: cover」を使ってるとき「background-attachment:fixed」が効かないらしいんです。 出典：Can I use これを解決するためには、擬似要素「::before」で <body> の前に擬似ブロックレベル要素を作り、そこに背景画像を貼るのがイイみたい。自分なりに改良したソースコードをメモります。 height:100vh がベターか
AIを使用した無料の画像リサイズの拡大ソフトが凄い！解像度を最大16倍に！ | デジタル＠備忘録
2017年10月21日に公開され世界中で話題になった画像拡大ソフト（Webアプリケーション）Let’s Enhanceがリメイクされましたのでご紹介します。 Photoshopよりも凄い無料の画像拡大ソフト 2022年現在は５枚まで無料で使用できます。数年前までは２５枚まで無料で処理できたのですが、トライアル出来る枚数が減ってしまったようです。そこは少し残念。 とりあえず５枚は無料で試せますから気に入ったら、追加処理分を購入して処理することが可能です。 Let’s Enhanceはニューラルネットワークを使用して画像拡大をするWebソフトです。 マジックフィルターと書かれているものがLet’s Enhanceを使用して拡大したもの。 通常のソフトで行われている画像拡大と手法が異なり、最初にポートレートや風景、食品など画像種類やタイプを認識。その上でネットワークを使用し画像タイプごとに自然な
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
Facebook ページのカバー写真を劣化させない！モアレを抑えて綺麗に！
Facebook な内容がつづきまーす！ Facebook ページのカバー写真を綺麗に！ 前回 Facebook ページのカバー写真を作ってみました！ で、画像をアップロードすると劣化がひどいってお話を書きました。最後に「あまり神経質にならない方が良い」とか書いておきながらやっぱり気になってしまうので調べてみました。 企業のページはどうだろう？ ヴィジュアルにこだわる企業にとってカバー写真が汚いのは、ブランドイメージの落とすのでもしかしたら綺麗なカバー写真を使っているかもしれない！と思ったので調べてみました！（内心は大手だけ特別に綺麗にアップロードする方法教えてたりするんじゃないの？とか思いながら…ｗ） Facebook ページでまず思いついたのがコーラ！たまに飲みたくなりますよね〜ｗ ということでチェック！ コカ・コーラ パーク ファンページ Coca-Cola Park Fan Pag
【CSS】「max-width」を使えばスマホ用とPC用に自動で画像のサイズを合わせられます。
多くの場合、PC用とスマホ用のテーマでは記事部分の大きさが違います。 なので、PC用のテーマに合わせて画像のサイズを設定するとスマホ用テーマでは記事からはみ出してしまいます。これは(・A・)ｲｸﾅｲ!! という訳で方法を調べ、実際に最適化した状態がこちらです。 しっかり画像が記事の中に収まっていますね。 結構これのやり方がお手軽簡単だったので軽く解説を。 「max-width」を使えば一発！ 最初これをやろうとした時、 「テーマに合わせて画像のサイズを変えるのか…きっとjQueryとか使ってメンドクサイんだろうな…」 と思いましたが、調べてみたら超簡単！ なんとCSSのプロパティに「max-width」を加えるだけ！ img { max-width: 100%; height:auto; } このように「max-width」を100%に設定することによって画像のサイズを囲んでいる要素のいっ
WordPressでの画像アップロードサイズを2MBから上げる方法
WordPress大好き！ @georgek5555 です。 このブログもWordPressで作っているのですが、 基本的にはあまりサーバーを圧迫したくないっていうのもあって、 WordPressを入れたら基本的にアップロードサイズが2MBになっているのを そのままデフォルトで使っていました。 ところがiPhone5で撮った写真は基本的に2MB越えるっていうのもあって、 KLOGでは基本的に一度写真調整しているので問題はないのですが、ちゃんと調べなおしてみました。 設定は方法は複数あります。 （筆者は全て試したわけではないので、自己責任でお願いいたします。） 「.htaccess」で設定する。 うまくいく方はこれでかんたんに上手くいくようです。 ルートディレクトリ、つまり一番最初のフォルダ（www直下、当サイトならpost直下）に .htaccessを作る、もしくは既にあるファイルなら追加
wordpressのgallery機能のデフォルトオプション変更 | PLIME - tech
wordpressのgallery機能では様々なオプション指定ができるが、そのオプション指定のデフォルト値を変えて、常にサムネイル画像のリンク先を画像ファイルに変更したり、galleryで表示する画像の一覧の列数を３から４カラムに変更したりした。 方法としては、[wordpress配置ディレクトリ]/wp-includes/media.php の gallery_shortcode() 関数の中身を書き換えることになる。（756行目～869行目あたり） サムネイル画像のリンク先を画像ファイルに変更 具体的なこの意味は、記事編集画面の「アップロード/挿入」→「ギャラリータブ」→「サムネイルのリンク先」において 『画像ファイル』 がデフォルト設定となるように変更とするということ。添付ファイルのページではなく、画像ファイルにする場合には通常 file=”link” のオプション指定が必要となるた
【Wordpress】サムネイルやアイキャッチ画像をいろいろなサイズを設定する方法 【グレート・ビーンズ】 福岡
こんばんわ！ 先日バスが急ブレーキで停車しましてね 朝でぼっとしていた私は 思わずころんでしまいましてね そこに更に、OLさんにヒールで踏まれてしまって 今までにない新しい世界を開眼しかけたクワです。 さてｗ 今日はですね、wordpressでサムネイルやアイキャッチのサイズを設定して取得する方法です。 主に２つのやり方があります。 1.functions.phpに記述する方法 2.pluginを使う方法 どちらでも構いませんが、私はfunctions.phpにどかっと登録しておきたいのでfunctions.phpに書いてます。 まず、アイキャッチを有効にしてサイズを指定します。 add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size(幅,高さ,true); trueは指定した値で画像の中心から切り抜く設定です。 f
マウスオーバーで画像にキャプションを追加するjQueryプラグイン「Mosaic」を使ってみた
画像の情報なんかをスライドやフェードでかっこ良く表示させたい時に最適なjQueryプラグインです。 いつものようにデモページを拵えたので見てください。公式のデモとたいして違いはないんですけど。 Demo Mosaicの実装例 デモページの5番目（上からスルッと出てくるヤツ）について解説します。 スクリプトを読み込む <script src="js/jquery.js"></script> <script src="js/mosaic.1.0.1.min.js"></script> jQuery(function($){ $('.bar3').mosaic({ animation : 'slide', //slideかfadeが選べる anchor_y : 'top' //キャプションを表示させる位置 }); }); 上記以外にも色々なアニメーションを指定できます。 animation :
iPhone風Icon 作成 for GIMP / NEXTi4HACK.com
今更かもしれませんがGIMPを使用したiPhone風Iconを 一から作成する方法を紹介します 過去記事 GIMP for Windowsで紹介したように GIMPは画像編集ソフトで有名なフリーソフトです PhotoShopなどは高価なものなので今回は一般的なGIMPでの 作成方法を書きます GIMPを起動(Linux用のためWindowsやMacでは不具合がよく起きます) アイコンのサイズは大きすぎるのも何なので512×512px 背景は透明で作成します 1.マスクの作成 選択->すべてを選択から背景すべてを選択した状態にします 選択->角を丸めるから選択範囲の角を丸めます 値は35がちょうどだと思います ポイント1 レイヤー->レイヤーマスク->レイヤーマスクの追加 “選択範囲“にして”追加” 画像を切り取るのではなく、マスクを使用し”切り抜く”ことで 編集がしやすくなります ポイント
jQueryMobileで、aタグのリンク先が画像だったらAjaxを無効化する : Serverレッスン
9月11 jQueryMobileで、aタグのリンク先が画像だったらAjaxを無効化する カテゴリ:jQuery jQueryMobileのページ遷移はAjaxだから速くていいね！とか思っていたんですが、リンク先が画像だった場合にundefinedになってしまいます。 こちらを参考にさせていただきました。 jQueryでセレクタで指定するのとfilter()で絞るの、どっちがいいか。 解決したコードはこちら jQuery(document).on('pageinit', function(e){ var $ = jQuery; //画像などファイルへのリンクの場合はajaxを無効化 $('a').filter(function(){ return /\.(jpe?g|png|gif|pdf)$/i.test(this.href); }).at
Automatic Image Montage with jQuery
Minimum width of images with alternating heights of rows and large margin, last image will fill the last row. Click "load more" (end of page) in order to see how more images can be added. View the options for this example minw : 100, alternateHeight : true, alternateHeightRange : { min : 50, max : 350 }, margin : 8, fillLastRow : true
jQuery illuminate
Posted in Tutorials on May 30, 2011 | 1156 Views earnings $0.97 jQuery Illuminate is a plug-in that will allow you to add an Illuminate effect on any element on your webpage, this particularly works well with buttons. Be sure to check out how to use this plug-in below. Additionally, you can check out the github repo for this project here: https://github.com/tnylea/jquery-illuminate How to use Incl
- このブログは非公開に設定されています。
ブログ このブログは非公開に設定されています。 (Access forbidden) 他のブログを探す ブログランキング（共通のジャンル） 1 ちゃんねるZ 2 放送事故★お宝エロ画像村まとめ 3 マブい女画像集 女優・モデル・アイドル 4 AV女優2chまとめ 5 エロ画像すももちゃんねる ヘルプ インフォメーション リクエスト 利用規約 障害情報 FC2ブログについて FC２の豊富な機能 スマホからもブログ投稿 有料プラン アルバム機能 おすすめブログ テンプレート一覧 マガブロ マガブロとは？ マガブロランキング マガブロの書き方 マガブロアフィリエイト サポート ヘルプ インフォメーション リクエスト 利用規約 障害情報 アプリでもブログ投稿 FC2トップ お問い合わせ 会社概要 プライバシーポリシー 著作権ガイドライン 広告掲載 Copyright(c)1999 FC2, Inc
画像の内側にボーダーを付ける方法！CSSだけ！ | Web活メモ帳
CSSでボーダーを画像の内側につける マウスオーバーした際に、ボーダー処理をCSSでつける作業をしていた所、 画像の内側にもボーダーをつけたいと言われてやり方を調べました。 誰かの参考なれば幸いです。 ↑このような状態が理想です。 結論を言うと、画像にネガティブマージンを適用すればOKのようです。 以下のようなコードで実装できました。 a { overflow: hidden; float: left; } a:hover { border: 5px solid #000000; } a:hover img { margin: -5px; } 以下のサイトを参考にさせて頂きました。感謝。 Image Rollover Borders That Do Not Change Layout
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これを無断使用しちゃっていいの？ブログのアイキャッチ探しがはかどる高クオリティーCC0写真サイトまとめ
Wunderstock - Free stock images
HugeDomains.com
遂に見つけた！使いやすいmac用画像一括リサイズ フリーソフトTh-MakerX : AFROG
