IEでドキュメントモードの既定値を変更する方法
IEでドキュメントモードの既定値を変更する方法を紹介します。 １．問題点 会社のあるシステムを使っていると、IEで次のようにレイアウトが崩れてしまいました。 具体的には「承認者」の下にあるボタンがテーブルの中に入り込んでしまっています。 原因はブラウザのドキュメントモードらしいので、F12を押下して、開発者モードを表示。 （クリックで拡大） ドキュメントモードの「7」が既定値になっているので、最新の「Edge」を選択。 これでレイアウト崩れが解消しました。 が、このページを正常に表示させるには毎回この操作を行わなければならないのですが、常に「Edge」を既定値にする方法はないでしょうか。 ということで、ドキュメントモードの既定値を変更する方法を紹介します。 ２．ドキュメントモードの既定値を変更する ドキュメントモードの既定値を変更するには、「ツール」→「互換表示設定」をクリック。 「イント
AMP ページにアナリティクス コードを設定する方法
A/Bテスト 5 Ads Data Hub 1 AdSense 5 AdWords 19 AdWords 連携 21 AMP 4 Analytics 基本 5 API 2 BigQuery 11 Cookie 1 CPA 1 DCM 1 DFP 3 DoubleClick 11 DoubleClick Campaign Manager 1 DoubleClick for Publishers 3 e コマース 2 Firebase 8 Firebase Analytics 4 Firebase 向け Google アナリティクス 2 ga.js 2 GA4 11 GACP 18 GCP 1 Google Cloud Platform 1 Google Consumer Surveys 2 Google Insights for Search 1 Google アド マネージャー 1 Goo
pageAccelerator - JavaScriptだけでWebページ読み込みを高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの読み込み速度は速ければ速いほどメリットがあります。スマートフォンアプリのようにUIはすべてアプリの中にあり、データだけをやり取りする方法が主流になっている中、Webブラウザが遅く感じられてしまうとユーザはあっという間にブラウザから離れていってしまうでしょう。 今回は簡易的にページ読み込みを高速化してくれるpageAcceleratorを紹介します。 pageAcceleratorの使い方 pageAcceleratorはTurbolinkやpjaxと呼ばれる仕組みに近いものとなっています。まずスクリプトを読み込みます。 <script src="page-accelerator.min.js"></script> 後はpageAcceleratorを実行するだけです。
Google ウェブマスター向け公式ブログ [JA]
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
こんなツールがあったのか！Webページが世界各地でどのように見えるか、位置情報を使ったコンテンツも確認できる -Geo Screenshot
Webページが世界各地のブラウザでどのように見えているか、位置情報を使ったコンテンツのローカライズ、コンテンツが国によってフィルタで妨げられていないかなどを確認できる無料オンラインツールを紹介します。 対応都市の一覧 ワールドワイド ローケーション 世界各地65ヵ所以上のデータセンターに対応。 結果はすぐに サーバーのクラスタはキューを使わずに、直ちにスクリーンショットを生成。 Webkitエンジン レンダリングには、WebFonts/CSS3をサポートしたWebkitエンジンを使用。 マルチデバイス 多数の異なる解像度のデバイスをサポート。 ローカライズ HTTPヘッダーに含まれる言語指定、多言語フォントのサポート。 API スクリーンショットを処理するバッチのAPIを提供。 単に世界各地でどのように見えるかだけでなく、Geo Location（位置情報）を使ったサイトの確認にも役立ちま
Barba.js - ページ遷移をアニメーションで実行 MOONGIFT
Webページは一般的にリンクをクリックするとURLが変わってページ全体が再読み込みされます。ページのローディングも時間がかかりますし、ユーザビリティとしてイケてるとは言いがたいでしょう。 そこで使ってみたいのがBarba.jsです。URLをクリックした時のページ遷移をアニメーションをまじえつつ行ってくれます。 Barba.jsの使い方 デモです。クリックすると写真が拡大されます。これはすべて別なHTMLです。 こちらはスライド的なページ遷移です。スマートフォンアプリの画面遷移に近いかも知れません。 さらにアイコンにしたパターン。ページを遷移する際には一旦ページの一番上にスクロールしてからコンテンツが表示されます。 Barba.jsはSPA（シングルページアプリケーション）を構築する際に使えそうなソフトウェアです。一つのHTMLで管理しているとメンテナンスが大変になりますのでBarba.js
管理画面で設定できる！GoogleタグマネージャでGoogleアナリティクスを一元管理！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、なっちゃんです。 少し前になるのですが、6月にWeb制作の実績紹介サイト「LIG WORKS」を新しくリリースしました！ このプロジェクトは必要最低限の機能とページ数でスタートしたものなので、まだまだ完成ではございません。今後、もっともっと魅力的な実績サイトにしていくために、改善を加えていく予定です。 新しくサイトを立ち上げたとき、アクセス解析はとっても大事ですね！ 普段はGoogleアナリティクスのタグを埋め込んで数字を見ていくことが多いのですが、今回は思い切ってGoogleタグマネージャを使ってみることにしました。 今回のブログではGoogleタグマネージャでGoogleアナリティクスの設定方法を解説します！ 下記の画像からLIG WORKSが見れるので、よかったら見ていってくださいね♪ なぜGoogleタグマネージャを使用したのか 制作実績サイトの制作は「必要最低限のみで
LIGブログの安全な開発のために 〜WebdriverIOでスクリーンショットを撮る編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 8月より自社開発チームに異動となり、最近はLIGブログの改善に勤しんでいます。 Webサイトも長く運用されるとどうしてもCSSが負債になってしまいがちですね。 負債返却のために安心してコードを綺麗にしていきたいのですが、修正が思わぬ場所で影響を起こしてしまってCSSが壊れていてもなかなか気づきづらいものです。 今回は、目視での確認漏れを少し楽にするべく、WebdriverIOを使ってスクリーンショットを撮るサンプルを作ってみました。(検証してないのでWindowsをお使いの方は動かなかったらごめんなさい。) WebdriverIOの導入 事前にNode.jsのインストールとJava7（jdk7）以上がインストール（確認方法はこちら）されている必要があります。 リポジトリのクローン後、npmの依存モジュールのインストールが済めば、Webdr
フォントファイルから使いたい文字を抜き出してコマンドラインでWebフォント化するfontminが便利だった - Qiita
Webページで日本語のWebフォントを使いたいんだけどフォントファイルのサイズが大きくて諦めたなんて経験ないですか？ 例えばIPAゴシックだと6.2MBほどのファイルサイズがあるので、さすがにそのままWebフォントとして使うのには抵抗がありますよね。 じゃあ使いたい文字だけ引っこ抜いてフォントファイルを再構築すればいいじゃね？という考え方を元にした手法としてフォントのサブセット化というものがあります。 fontminはWebフォントフレンドリーなフォントのサブセット化をサポートするツールです。 nodeモジュールであり、CLIもサポートしているのでビルドプロセスに組込みやすいという点ではフロントエンダーには嬉しいところではないでしょうか。 出来ること 具体的に出来ることは下記になります。 フォントファイルを指定した文字でサブセット化したフォントファイルに変換 出力できる形式はwoff、tt
「日本語Webフォントで世界観を」小説サイト実装の舞台裏
小説サイトの日本語タイプグラフィをどう実装するか？ ユーザー体験をコード、実装でアプローチする技術コミュニティ「UX CODE」による勉強会「UX CODE IN GSS #2」が2月29日、ドワンゴで開かれた。 ドワンゴは、2月、中日本高速道路と共同で設立したIP製作委員会「NEFCO（ネフコ）」によるプロジェクトの第1弾作品として、芝村裕吏氏によるWeb小説「幻想交流』をスタート。スマホ、PCで見られる専用サイトを公開している。 この小説サイトでこだわったのが、小説の世界観を表現するフォントだ。ドワンゴの藤村拓也さんは、「あらゆるユーザーに小説を届けたい」と考えたときに、「Androidには明朝体がない」「MS明朝にアンチエイリアスが効かない」など、デバイスフォントの限界を感じたという。 そこで導入したのがWebフォントだ。最近は欧文をWebフォントで表現するサイトは珍しくないが、日本
Facebookページの投稿をGraph APIで取得する方法
Facebookページの投稿をGraph APIで取得する方法を紹介します。 １．はじめに Facebookページの投稿を取得して、ウェブページなどに反映させたいことがあると思いますが、Facebookページの投稿を取得する方法がわかりません。 ということで、Facebookページの投稿を取得する方法を紹介します。 ここではGraph APIを使って取得します。 また、Graph APIを使って取得するために、ここでは「Graph APIエクスプローラ」を利用します。 またFacebookページは、私の管理している「小粋空間」を利用します。 ２．Facebookページの投稿をGraph APIで取得する Graph APIエクスプローラのページにアクセスしてログインします。 「FQL Query」の部分に、 me?fields=id,name がデフォルトで設定されていると思います。 この
ウェブページに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.
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
![[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4521503cad1ef35e553783a3eb0c0ab4a4bc1361/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063007.png)
テーマ「ShapeShifter」をプラグイン「WooCommerce」に対応させてみる。 - ワードプレス ラボ
ワードプレスでECサイトを簡単に構築できるプラグイン「WooCommerce」に対応したテーマの作成方法についてです。テーマカスタマイザーのライブプレビューって、JSファイルの編集って面倒じゃないですか。各設定項目毎に「wp.customize( 'setting_id'...」と書いて、設定項目を追加すればするだけ... 続きを読む
モックアップを画像をアップロードするだけで制作してくれる「Smartmockups」
WEBデザインを生業として行う上で、単純にデザインしたものを見せるだけでは無く、時には実際にスマートフォンやPCに表示されている画像を見せてイメージを膨らませていただく作業をしたということもあると思います。今日紹介するのはそんなモックアップを画像をアップロードするだけで制作してくれる「Smartmockups」です。 デスクトップからスマートフォン、タブレットなど様々なモック写真が公開されており、それらを簡単に利用することが可能です。 試しにDesigndevelopのスクリーンショットで試してみましたので以下からご覧ください。 詳しくは以下 アップロード後に写真範囲が選択でき、生成後はサイズを指定してダウンロードすることができます。手慣れた人であればモックアップ制作もほんのすこしの手間ですが、画像を探して合成してというのは熟練者でも時間がないときには面倒なもの。 プレゼンテーションや制作
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wooCommerce フィルターフックの定義ファイルの場所 : プログラマー社長の「日々発見」
WooCommerce Documentation - WooCommerce
プライム・ストラテジー - CMSマネージドサービス
特定の親の固定ページに属する全ての子孫のリストを表示する
