Ajaxを利用して複数画像をドラッグ＆ドロップで一括アップロード - Qiita
Ajaxを利用して複数画像をドラッグ＆ドロップで一括アップロードするための簡単なメモ。 基本的に画像をPOSTするだけなので、サーバサイドは特別なことをしなくても大丈夫です。 File APIについてはここがわかりやすかったので、是非見てみてください。 http://www.atmarkit.co.jp/ait/articles/1112/16/news135.html また、このライブラリが便利そうなので、時間がある方はこちらを使った方がいいと思います。 https://github.com/blueimp/jQuery-File-Upload サンプル HTML <html> <head> <title>画像をドラッグ＆ドロップで一括アップロード</title> </head> <body> <div id="image_upload_section"> <div id="drop"
WordPressで登録ユーザーだけ画像や資料をダウンロードできる会員制サイトの作り方
WordPressの「これが困った！」 WordPressで困っていることはありませんか？ サーバー移転／エラー解消／カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 ウェブサイトに画像や資料をダウンロードできる機能がほしい。そんな要望がわりとあります。 写真やイラストを目的に合わせてダウンロードできるストックフォトサービス。最近はオーディオやムービーもダウンロードできるところが増えてますね。 そこまでの規模じゃないとしても、ウェブデザインや作曲をしているクリエイター寄りの人で、自分のサイトでPSDファイルやmp3をダウンロード形式で配布してみたいという人はけっこういそうです。 コーポレートサイトでも、取り扱っている製品やサービスの資料をサイト訪問者が簡単にダウンロードできる仕組みがほしいという声をよく聞きます。卸売のようなBtoBサイトの場
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
急性腰痛が治るまでの流れ
これは一見の価値ありです。もし、気に入らなかったとしてもあなたが急性腰痛になった時にはとても役にたつでしょう。始まりは腰を痛めたその時からです。続きをご覧下さい。 急性腰痛とは そう、一目みると急性腰痛の人はわかります。なぜなら発症後は立ち上がれないほどの痛みに襲われて 、あなたを不安が支配するからです。しかし、安心して下さい。急性腰痛は痛みこそ強いものの、合併症や後遺症はほとんど起こりません。しかし、あなたはには１つだけ気をつけるべきリスクがありますのでご説明します。 原因 急性腰痛はある動作がきっかけで腰椎が炎症、椎間板の亀裂、肉離れなどが挙げられます。特に理由もなく朝目覚めたら起き上がれないこともあります。以下が主な急性腰痛のきっかけとなる動作。 転倒やつまずき 重いものを持ち上げる動作 長時間の前かがみ姿勢 咳やくしゃみ 症状 急性の発作は急激に発症する場合と数日かけて徐々に痛みが
遅延ロードした画像をGoogleにインデックスさせる方法 - Qiita
遅延ロードは画像SEOに向かない？ 鈴木 謙一さんのブログによると「Lazy Load（遅延ロード）」された画像はGooglebotに認識されない可能性がある、とのこと。 Lazy LoadはSEOに不向き？ Lazy Loadで表示する画像をGooglebotは認識できないことがある | 海外SEO情報ブログ 画像の遅延ロードとは よくある遅延ロードは、透過PNGなどのダミー画像やローディング画像などを画像パスに設定します。そしてユーザーが画像のある位置までスクロールして初めて画像が読み込まれます。jQueryのプラグインなどでも多くの種類がありますが、やっていることは概ね変わりません。 <img src="img/dummy.png" data-original="img/01.png" alt="" width="800" height="100" class="lazy"> <sc
Lazy Load(画像の遅延読み込み)を実装する方法
レイジーロード(遅延読み込み)とは、その名の通り、画像を遅れて読み込ませるテクニックのことです。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。「遅れて」というよりは、「適切なタイミングで」と言った方が正確でしょうか。さて、このことはどのような意味を持つでしょうか？ 転送量の節約ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問して「やっぱ止めた」とすぐに戻るボタンをクリックして帰った経験はありますよね。基本的に、ブラウザは訪れた時点で、ページの全ての画像を読み込みます。 このページに、仮に100枚の画像が掲載されていたとしたらどうでしょうか。ちょこっと訪問されるだけで、毎回、見られてもいない大量の画像の転送が発生してしまいます。余計な転送が発生することで、運営者側にとってはサーバーコストが増える、閲
2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。 淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ 参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！ 2016年、Webとグラフィックデザインのトレンドと今後の展望 2016年、Web制作業界全体の流れ 2016年、注目されている新しいテクニック・コンセプト 2015年に定義されたレスポンシブWebデザインの8つのトレンド 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと 2016年に学ぶべきプログラミング言語と
CSSで中央寄せの方法いろいろメモ - Qiita
ブロック要素は中央寄せにならないので、display: inline-block;でインラインにしてあげます。 margin: autoで中央寄せ margin: auto;を使って上下左右中央寄せにします。 ※中央寄せしたい要素の幅、高さを指定しないと親要素のサイズに合わせて伸びてしまうので注意。 .parent{ border: 1px solid #aaa; position: relative; height: 200px; width: 300px; } .inner{ border: 1px solid #aaa; width: 150px; height: 50px; top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: auto; }
CSSで背景に正円を適用する方法 - Qiita
#hoge{ background: #cccccc; height: 40px; width: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
コンバージョン率アップ！デザインに優れた無料のHTML+CSSプライステーブル/価格表25 | co-jin
海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージョン率を左右するほど重要なデザインパーツの一つです。 ある報告ではプライステーブル/価格表のデザインを変えただけで、コンバージョン率が10％以上も改善したという驚きの報告があったほどです。 今回は、そんなプライステーブル/価格表のうち、デザイン性にすぐれ、かつ無料のHTML+CSSでつくられたプライステーブル/価格表をご紹介します。 デザインの参考になれば幸いです。 Responsive Pricing Table with Neat Hover States 非常に詳しいチュートリアルがついた、レスポンシブ対応のプライステーブル/価格表。 しかも、マウスオーバーすると、該当するプライステーブルが拡大するアニメーション付き。 DownloadDemo Cool Table – Free Pri
JavaScript活用ガイド：リアルタイムでテキストボックス入力を別エリアにコピー・表示するテクニック｜DAD UNION – エンジニア同盟
Web開発においてユーザーのインタラクティブな体験を提供することは、サイトの利便性を向上させる重要な要素です。特に、フォームの入力内容をリアルタイムで確認できる機能は、ユーザビリティの高いインターフェース作りに役立ちます。 この記事では、JavaScriptを使用してテキストボックスに入力した文字を、別のエリアに同時にコピーして表示する方法をステップバイステップで解説します。 なぜこの機能が便利なのか 例えば、キャンペーンサイトやオンラインの申込みフォームで、入力内容をその場でプレビューする機能は、エンドユーザーにとって非常に有用です。ユーザーが入力した内容を確認しながら進めることで、入力ミスの減少やフォームの送信後のトラブルを予防できます。 テキストボックスの入力文字をコピーするJavaScriptの実装 まず、ユーザーがテキストボックス（name=”txt”）に入力したデータをリアルタ
パーマリンク変更やサイト引っ越しのSNSシェア数を引き継ぐ : おち研
URL構造を変更するとSNSのシェアカウントもリセットされてしまいます。サイトを引っ越したときに新URLでも古いシェア数を表示する方法をTwitter・FB・はてブでまとめました。 URLの変更など本来やらない方が良いのですが、やむなくサイトの構造変更や引っ越しなどをすると相応に手間が掛かるものです。 中でも痛いのはSNSのシェア数がリセットされることではないでしょうか。いくらでも口コミが集まる人気サイトならともかく、通常運転での能動シェアが5000PVあたり1回程度な弱小サイトの場合はカウンタリセットって本当にショックが大きいわけですよ！！ …ということで、先日URL変更をした当おち研でも旧アドレスからのシェア数をサルベージすることにしました。基本的にWordPressサイトという前提で書いているので別のCMSをお使いの場合は適宜 読み替えて下さい。 旧シェア数が取得出来るサイト構造につ
WordPressのパーマリンク設定を変更して、SEOや日本語URLの対策をしよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディア事業部のエリーです。 みなさん、「パーマリンク」というものをご存知ですか？ 生きていく上でおおよそ必要のなさそうな単語ですが、WordPressでブログを書いている人やこれからブログを始めようとしている人には、とても重要なものです。 またブログに限らず、Webサイトの根幹に関わる要素の1つとして、初期段階で構成を決定した方が良いと言われています。 そこで今回は、一体どんなパーマリンクが理想的なのか、なぜ重要なのかをWordPressに最適化した超高速サーバー「Z.com for WordPress」さんにお聞きしました。 ▼目次 パーマリンクってなに？ 理想的なパーマリンクは？ 上記パーマリンクが理想的な4つの理由 なんでシンプルなURL構造が良いの？ 日本語URLはダメなの？ パーマリンクとSEOの関係は？ 解析しやすいパーマリンクって？ パーマリンクの設定の仕方 1
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
All-in-One WP Migration: サーバー移設ができるWordPressプラグイン
All-in-One WP Migrationは、サーバー移転・移設ができるWordPressプラグインです。 サイトデータのバックアップおよび復元の機能もあります。 このプラグインを利用すると、WordPressのサイトデータを丸ごとエクスポート＆インポートできます。 インポートする際に、WordPressの設置先URLをプラグイン側で自動的に変更してくれます。 上手く活用すると、WordPressのサーバー移転・移設の作業やテストサーバー構築作業を効率化できます。 例えば、ローカル環境にテストサーバーを構築する際に、このプラグインを利用してサイトデータを移設すると、テストサーバーを構築できます。便利なプラグインなので活用しましょう。 はじめに このプラグインが優れていること WordPressのサーバー移転・移設ができる。 WordPressのサイトデータをエクスポート＆インポートでき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://11neko.com/lazy-load-seo/
fontawesomeのアイコンをcssの:before/:afterで挿入する - Qiita
★レスポンシブの基本、メディアクエリの書き方 | | それからデザイン スタッフブログ
http://www.furimuke.com/2013/05/google-analytics.html
