WordPressで不要なページでプラグインが出力しているJSやCSSを無効化して軽量化する方法
WordPressでサイトを構築している場合、誰でもほぼ間違いなく多かれ少なかれ要件を満たす機能を持つプラグインを複数導入していると思いますが、プラグインによっては自前のスタイルシート(CSS)やJavascriptを読み込ませているものもあります。 例えば、コンタクトフォーム用のプラグインとして有名な「Contact Form 7」というプラグインは、headセクション内に1つのCSSと、bodyタグの終了前に2つのJavascriptをロードさせています。 Contact Form 7 が出力するCSSとJavascript /wp-content/plugins/contact-form-7/includes/css/styles.css /wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js /wp-con
【お詫びと訂正】iOS11でついにSafariからカメラにアクセスできるようになりました。（コピペで動くサンプルコード付き） - KAYAC engineers' blog
お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま
よくある質問ページの質問と回答をクリックで開閉する方法
よくある質問ページで「質問」が多すぎたり、自分の求めていない回答ばっかりだったりして読む気がなくなったことはありませんか？ シンプルに質問項目だけが並んでいて、自分の求めている回答だけを見られるように、質問をクリックすることでその回答が表示される方法をご紹介します。
-MOBO- WEB, GRAPHIC & BRANDING/MOBO株式会社 神戸のウェブ・グラフィックデザイン制作会社
霞初月の気持ち 令和もはや5年目となりました。今では平成が少しばかり懐かしい気持ちになることもしばしば。 月日が経つのは早いということを実感いたします。 今年も多くの人と交流の持てる安定した1年になれば幸いです。 本年も、何卒よろしくお願いいたします。 残暑御御見舞い 今年の夏も酷暑が続き、残暑も厳しい毎日ですが如何お過ごしでしょうか。 夏はとても苦手な季節なのですが、何故か夏の終りが近付くと寂しい気持ちなります。 大好きな秋が始まり、大嫌いな夏が過ぎて行くというのに。四季の中で唯一、夏の 終わりだけ物哀しい気持ちになる、という矛盾撞着に心の不思議を感じます。
CSS：CSS3の「transform:scale()」でhoverした時に画像を拡大する | raining
CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。 画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、 サイトに動きを出すことができるのでいいと思います。 下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に 拡大させて表示した時の方法をメモします。 ■ 「transform:scale()」の使用方法 ブロック要素を固定させて画像を拡大させた場合の方法です。 画像をマウスオーバーするとアニメーションで拡大します。 【CSS】 .scale { width: 400px; height: 300px; overflow: hidden; } .scale img { -moz-transition: -moz-transform 0.5s linear; -webk
HTML/CSSで実装できる！今どきデザインのホバーエフェクト30個まとめ
ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、HTML/CSSのみで実装できるホバーエフェクトをまとめています。 CSS3 を駆使したスタイリングは、コピペで利用することもでき、他と差のつくデザインエフェクトを、手軽に実現することができます。そのままコードを編集し、動作を確認することもできるので、今後のデザインプロジェクトに活用してみてはいかがでしょう。 詳細は以下から。 ウェブデザインを魅力的に仕上げる、HTML/CSSホバーエフェクトまとめ HTML/CSS/JS をクリックすると、各コードやスタイリングを確認でき、Result で実際のエフェクトを試すことができます。Return をクリックすると、読み込みを再度行います。 マウスホバーで、タイトルをモザイク状に表示。 See the
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
高級ペライチって?参考にしたいおしゃれで面白い高級ペライチ40選
ダイナミックな動きや演出が目を引く高級ペライチ。今回は、デザインの参考にしたい、おしゃれで面白い高級ペライチをご紹介していきます。ぜひデザインの参考にしてみてくださいね。 高級ペライチとは 高級ペライチは、スクロールに合わせてパララックス（視差）やアニメーションの演出があるペライチ（縦長や横長の1ページのサイト）です。JQuery（ジェイクエリー）などを使って演出します。 ※パララックス（視差）：ページをスクロールする際、手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するもの。 ※JQuery：プログラミング言語であるJavaScript（ジャバスクリプト）のコードを、簡単に記述できるようにするJavaScriptライブラリの一つ。 おしゃれ・面白い高級ペライチ では、実際に高級ペライチとはどのようなものなのか見てみましょう。おしゃれで面白いデザインの高級ペライチをご
EC-CUBE‐日本発の「ECオープンソース」
独自のUI/UXを実現し ECビジネスを成功に導く 自由自在のカスタマイズでオーナーのアイデアを具現化。 BtoCもBtoBも、オンリーワンの顧客体験を提供し、競争優位性を創出する 理想のサイト構築が実現できるECパッケージです。 稼働店舗数 35,000以上（推定）。 あらゆるジャンルのECサイト構築に ご利用いただいています。 ※ ECマーケティング株式会社が行ったネットショップ動向調査において「月商1,000万円以上で利用されているカートシステム」利用数にてNo.1を獲得。 ECサイト構築・運営でこんなお悩み、ありませんか？ 決済画面やマイページを改善したいがASPでは変更できない… 管理画面のUIや機能性が悪く運営に負担がかかっている… 取得できる購買データが限定的で踏み込んだ分析や活用ができない… 管理・改修を特定ベンダーに依存しており柔軟なサイト改善や内製化ができない… ですべ
ウェブページにPDFを直接表示する方法
ウェブページにPDFを直接表示する方法を紹介します。 １．はじめに PDFをブラウザで表示するには、単純にPDFファイルのURLを記述すればOKです。 ウェブページにそのURLをリンクとして記述すれば、ウェブページからの閲覧も可能です。 が、PDFファイルを直接ウェブページに表示したいこともあると思いますが、その方法が分かりません。 ということで、ウェブページにPDFを直接表示する方法を紹介します。 ２．ウェブページにPDFを直接表示する ウェブページにPDFを直接表示するには、PDF.jsを利用します。 PDF.jsのページにアクセスして「Download」をクリック。 ダウンロードした「pdfjs-1.4.20-dist.zip（2016年7月時点のバージョン）」を展開します。 展開した中にあるbuildフォルダとwebフォルダをすべてアップロードします。 そしてHTML（index.
Webデザインのアイデアに困ったら覗きたいサイト10選
この記事では、インスピレーションを与えてくれる、Webデザインの参考になるサイトを紹介します。 サイト全体のデザインやレスポンシブデザインに特化したサイト、サイトパーツ、ロゴ、アイコン、バナーなどを収集して紹介しているサイトなど10サイト厳選しました。あなたのWeb制作の刺激になること間違いなしです。 1. MUUUUU.ORG クオリティが高く、縦に長いサイトを収集しているギャラリーサイトです。サイト自体シンプルで使いやすく、またカテゴリー分けが詳細でとても探しやすいサイトです。 2. 現代デザイン 技術的、デザイン性がすぐれたサイトを収集したギャラリーサイトです。カテゴリーは業種と色、日時のみですが、業種を細かく分類しています。また、気に入ったサイトをブックマークに入れることができます。 3. I/O 3000 国内外問わない、秀逸なデザインのサイトを収集しているギャラリーサイト
wwwの有り無し、index.htmlとindex.phpを統一＠URLの正規化 - ショウジンブログ on Hatena
＊2016年11月22日追記 さくらインターネットでは「Options +FollowSymLinks」を使うとエラーになります。（プランによるかもしれませんが）さくらインターネット（の共用サーバ）での設定は最後に追記しています。 Apacheにおける.htaccessを使って、たとえば http://showzine.co/ http://showzine.co/index.html http://showzine.co/index.php これら三種類のURLを「/」止に統一する。 SEOを考慮した場合のコンテンツの共喰いを防ぐ（重複を防ぐ）ためにも / /index.html /index.php どれでブラウザアクセスされた場合も / にリダイレクトされるようにする。（URLの統一＝正規化） .htaccess RewriteEngine on Options +FollowSym
【jQuery】これだけで完璧に導入できる［Lightbox］の実装方法。
一時期、多くのサイトで導入され大流行した jQuery プラグイン［Lightbox］の使い方を紹介します。 皆様もうご存知でしょうけれど、念のために動作のサンプルを以下のURLに置いておきます。 画像をクリックすると背景が暗くなり、指定された画像がズームして再表示されます。 Lightbox：サンプル・デモ まずは公式サイトより、［Lightbox］のデータ一式をダウンロードしてきます。 Lightbox：ダウンロード ダウンロードした zip ファイルを展開すると、いくつかのフォルダとファイルが解凍されます。 基本的に、使用するのは「js」フォルダの中にある［lightbox.js］と、「css」フォルダの中にある［lightbox.css］、それと「img」フォルダの中の、ベースとなる画像４点（close.png、loading.gif、next.png、prev.png）になります
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
textareaなどでTwemojiを手軽に選択できるようにするスクリプト・「Twemoji-Picker」
Redirecting to https://watercss.kognise.dev/
GitHub - twbs/rfs: ✩ Automates responsive resizing ✩
Gist HTML Preview
BxSlider - wrong Slider-Viewport-Height in Safari 5
GitHub - feimosi/baguetteBox.js: :zap: Simple and easy to use lightbox script written in pure JavaScript
