CSSじゃなくて実際にレンダリングで使われるフォントの調べ方（ひとり DevTools Advent Calendar 2020 – 11日目） | Ginpen.com
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ？ 指定したやつちゃんと利いてる？ フォールバックになってない？ みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
HEY META - Website Meta Tag Check
Why your website should have meta tags? Your website visitors are visual beings (with the exception of robots). When they see the awesome content, product, video, or all of the other cool things they discover on there, they will share it. Now how great would it be if that wasn’t just a plain link in the message, post, comment or tweet but a quick preview of your awesome stuff? Meta tags enable sea
怪しいリンク先を簡単に「VirusTotal」でチェックできるChrome用アドオン「VTchromizer」を使ってみた - GIGAZINE
ネットサーフィンをしていると、必ずと言っていいほど出会ってしまう「怪しげなリンク」。クリックすると目的の情報にアクセスできそうですが、フィッシングサイト(詐欺サイト)にアクセスしてしまったり、マルウェアやウイルスに感染してしまうリスクがあります。また、セキュリティソフトが入っていれば、必ずしも大丈夫ということではなく、ソフトによっては検知の精度もバラバラで、知らないうちに被害を受けているなんてことも。無料でインターネットのURLやファイルを検査してくれるウェブサービス「VirusTotal」を使えば、60以上のウイルス対策ソフトやセキュリティソフトで一度に検査してくれますが、怪しいリンクに遭遇する都度、アクセスするのは手間でしかありません。そこで、簡単な操作で怪しいリンクを「VirusTotal」でチェックできる、Chrome用アドオン「VTchromizer」を使ってみました。 VTch
こんなツールがあったのか！Webページが世界各地でどのように見えるか、位置情報を使ったコンテンツも確認できる -Geo Screenshot
Webページが世界各地のブラウザでどのように見えているか、位置情報を使ったコンテンツのローカライズ、コンテンツが国によってフィルタで妨げられていないかなどを確認できる無料オンラインツールを紹介します。 対応都市の一覧 ワールドワイド ローケーション 世界各地65ヵ所以上のデータセンターに対応。 結果はすぐに サーバーのクラスタはキューを使わずに、直ちにスクリーンショットを生成。 Webkitエンジン レンダリングには、WebFonts/CSS3をサポートしたWebkitエンジンを使用。 マルチデバイス 多数の異なる解像度のデバイスをサポート。 ローカライズ HTTPヘッダーに含まれる言語指定、多言語フォントのサポート。 API スクリーンショットを処理するバッチのAPIを提供。 単に世界各地でどのように見えるかだけでなく、Geo Location（位置情報）を使ったサイトの確認にも役立ちま
ウェブページの重さを計測して高速化に向けたアドバイスをくれる「imgix Page Weight Tool」
ウェブサイト上に画像をアップロードする際、複数サイズの画像を用意したりファイルフォーマットを変換したりすることで、少しでもファイルサイズを小さくしてサーバーに負荷がかからないようにしますが、こういった地味な作業は取り扱う画像の数が多くなれば多くなるほど面倒になっていくものです。そんな画像加工関連の処理を自動かつリアルタイムで行ってくれるサービスが「imgix」で、ウェブページを表示する際に重要な「ページの重さ」を計測してくれるサービス「imgix Page Weight Tool」を提供しているので実際に計測してみました。 imgix Page Weight Tool • Learn how to improve your site or app’s speed. https://pageweight.imgix.com/ 「imgix Page Weight Tool」の使用方法はとても
Google AnalyticsでページごとのAdsense収益を確認する方法
Google AnalyticsでページごとのAdsense収益を確認する方法を紹介します。 １．はじめに Analyticsを使ってサイトを運用している場合、AdSenseとAnalyticsプロパティをリンクすることで、ページ単位のインプレッション数や収益などの各指標を確認することができます。 なお、AnalyticsでAdsenseの収益を確認するにはAnalytics側に次項に示す事前設定が必要です。 ２．設定 Analyticsの管理画面上にある「アナリティクス設定」をクリック。 Adsenseと連携させたいプロパティを選択し、「プロパティ」欄の「Adsenseのリンク設定」をクリック。 「新しいAdsenseリンク」をクリック。 「AdSenseプロパティの選択」に表示されたAdsenseプロパティの「コンテンツ向けAdsense」を選択して「続行」をクリック。 これで設定完了
サイト改善に大切な3つの分析手法とおすすめWeb解析ツールまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGのアートディレクターの長岡です。 分析の手法はさまざまですが、色々な視点から分析することで、多くの課題が見えてくるようになります。 改善に大切な3つの分析視点 アクセス解析やデータから定量的な分析をする 定量では計れない部分を、ヒートマップ・クリックマップを使って分析をする ユーザビリティテストやユーザーテストから定性的な分析をする それぞれ特徴がありますので、今回はそれらの分析手法と、いくつかオススメのツール、サービスをご紹介したいと思います。 これからサイトを改善される方には、ぜひとも読んでいただきたい内容です。 ▼目次 まず、物事を正しく捉えるには、主観と客観の両視点が大切 それでは、そもそも定量と定性って何？ 定量とは？ 定性とは？ 視点1）アクセス解析やデータから定量的な分析をする Google Analytics Adobe Analytics Yahoo!J
Typ.io | Useful typography | Typ.io
We're revealing designers' decisions for all to see; peeking under the hood of beautiful websites to find out what fonts they're using and how they're using them. This month the fonts Inter, Archivo, Fortescue Display, ES Rebond Grotesque and Value Sans are all proving popular. There have been a bunch of sites relating to finance, business, banking, crypto and private equity. Out of the font servi
Googleアナリティクスで特定キーワードのページビューを調べる方法
Googleアナリティクスで、特定キーワードのページビューを調べる方法を紹介します。 このエントリーはビギナーの方向けの内容です。 １．概要 皆さんよくご存知のとおり、Googleアナリティクスではサイト全体の情報を確認したり、現在アクセスされているページやアクセス上位のページを確認することができますが、ある検索キーワードでどの位のページビューがあるか、確認したい場合があると思います。 キーワード別のページビューを調べることができれば、たとえばあるキーワードでの訪問が少ない場合、タイトルやmeta要素のdescriptionなどを見直すことができるでしょう（注：どのページがヒットしたかは分かりません）。 ということで以下、当ブログのエントリーの「コンテンツ」の表示を例に、特定のキーワードでのページビューを調べる方法を解説します。 ２．特定のキーワードでのページビューを調べる（その1） 1つ
Googleアナリティクスで特定のページを調べる方法
Googleアナリティクスで特定のページの情報を調べる方法を紹介します。 このエントリーはビギナーの方向けの内容です。 １．概要 皆さんよくご存知のとおり、Googleアナリティクスではサイト全体の情報を確認したり、現在アクセスされているページやアクセス上位のページを確認することができますが、あるページのアクセスだけを確認したいという場合もあると思います。 特定のページを調べることができれば、たとえばコンテンツは充実しているのにページビューが少ない場合、タイトルやmeta要素のdescriptionなどを見直すことができるでしょう。 ということで以下、当ブログのエントリーの「コンテンツ」の表示を例に、特定のページを確認する方法を解説します。 ２．特定のページを確認する方法（その1） 1つめは、一覧に表示されたコンテンツから調べる方法です。 左メニューの「コンテンツ」をクリック。 「サイトコ
インフルエンサーの評判を調べる方法～ブックマークレット
バズ調べとは 自分のサイトがどう評価されてるかって、気になりますよね。 そんなご要望に応えるのが、ブックマークレット「バズ調べ」です。 使い方は簡単。以下をブックマークし、気になった記事を表示させているときにクリック。 これだけで、タイムライン上で、TOP画像のように、インフルエンサーにどう評価されているのかわかります。 バズ調べのブックマークレットを登録 以下のリンクを、ドラッグアンドドロップで、ブックマークボタンのエリアに、ドロップして下さい。もしくは、このリンクを右クリックでブックマークに追加、して下さい。 バズ調べ もしくは、何か適当にブックマークをしていただき、それを編集状態にし、URL欄に以下をコピペして下さい。 javascript:(function (){var d = location.href;location.href=’http://topsy.com/’+d+’
競合サイトの被リンクを調査する4つの方法 | 検索エンジン最適化（SEO）情報ブログ
検索エンジンの検索結果内での競合サイトの被リンクを調査する方法を紹介しています。私が普段から使用しているGoogle+で当ブログの記事を毎回投稿しています。すると、昨日投稿した記事に対して質問をされている方がいました。どんな質問かというと以下のようなものです。 初歩的な内容で恐縮なんですが、気になっているサイトの外部リンクを調べるってどうやってやってるんですか？？ ウェブマスターツールからリンク一覧拾ってくる以外に方法を知らなくて。。 https://plus.google.com/u/0/105143303660674368078/posts/cQYUUeMBNnK そこで今回は検索エンジンの検索結果内で競合サイトや気になっているサイトの外部リンクを調べる方法をご紹介します。 link:コマンドを使用する このlink:コマンドというのはどのように使用するのか。それは以下のようになりま
ウェブサイトのリンク切れをチェックするW3C公式ツール「Link Checker」
ウェブサイトのリンク切れをチェックしてくれるW3C公式ツール「Link Checker」を紹介します。 W3C（World Wide Web Consortium）のチェックツールといえば、 Markup Validation Service CSS Validation Service が有名ですが、リンク切れをチェックするための「Link Checker」も用意されています。 Link Checker 使い方は簡単で、リンク切れをチェックしたいURLをテキストフィールドに入力して「Check」をクリックするだけです。 オプションは次のものが用意されています。 Summary only：サマリー（チェック結果）のみ表示 Hide redirects：リダイレクトを隠します Don't send the Accept-Language header：Accept-Languageヘッダを送
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページで使用されているスクリプト・プラグイン・テクノロジーが何なのかがすぐに分かるChromeの機能拡張 -WhatRuns
任意のWebサイトや要素に設定されたCSSを解析するChromeエクステンション・「CSS Peeper」
スタイルシートの検証に便利！ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig
Responsive Web Design Test Tool - Designmodo
IDEA * IDEA
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
