デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法 - by Takumi Hirashima
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法を紹介します。 画像の自動生成を確認 GDライブラリーの確認方法 画像の自動生成を確認 まずは FTP でサーバーにアクセスして、メディアのアップロードで画像がアップロードされているかを確認。 そこで、サムネイルや他のサイズの画像が自動生成されているかどうかを確認します。 画像が自動生成されていない場合、PHP のGDライブラリー（画像ライブラリー）がインストールされていない可能性があります。 GDライブラリーの確認方法 GDライブラリーが環境にインストールされているかを確認するには、現在表示中のページのテンプレートに以下のコードを追加します。 <?php phpinfo(); ?> phpinfo() は現在の PHP の設定を確認することができます。 コードが正しく動くと、PHP の設定が表示されるので
[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 インラインのスタイル リンクのターゲット アクセシブルではない画像 ドキュメントの言語指定 不適切な文字セット アクセシブルではないビューポート属性 ラベルのないフォーム要素 空のインタラクティブな要素 不必要、あるいは非推奨の属性 インラインのスタイル このセレクタは、インラインのスタイルが適用されているページ上のあらゆ
![[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2a96d59143a2df01b38a0f16d119ef1fc6061d4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031401.png)
PingMenu - 常駐してpingを打ち続けるユーティリティ
無線LANなどは時として調子が悪くなってインターネットに接続できなくなることがあります。アクセスポイントにはつながっているので障害に気付きづらく、とてもストレスを感じます。そんな時、ネットワークの状態確認にpingを打つ人は多いのではないでしょうか。 そこで使ってみたいのがPingMenuです。メニューバーに常駐し、pingを打ち続けるソフトウェアです。 PingMenuの使い方 PingMenuを実行しているところです。 ネットワークがなくなると no routeという表示になります。 PingMenuは設定もあるのですが、特に動かないようです。対象となるサーバはGoogle限定となっています。自分のサーバにしたい時にはソースを修正する必要があるようです。ネットワークがちゃんと生きているか確認したい時に使ってみると便利です。 PingMenuはMac OSX用、Microsoft Rec
「なぜか家賃が安い」などの事故物件を地図上に表示＆事故内容のチェックも可能なサイト「大島てる」
「家賃が安い理由を教えてくれない物件」について調べてみると事故物件だった、という話を耳にすることがあります。事故物件というのは、過去に物件内で「何かしらの理由」により住人が亡くなった、などのいわゆる「いわくつき物件」を指す言葉で、そういった情報は通常買い手や借り手がつかなくなるので不動産会社は開示したがらないもの。そんな事故物件を何万件も地図上にマッピングしまくることで、誰でもチェックできるようにした事故物件公示サイトが「大島てる」です。 大島てる CAVEAT EMPTOR: 事故物件公示サイト http://www.oshimaland.co.jp/ サイト上にはマップが表示されており、炎アイコンの中に数字が書かれています。この数字は周辺の事故物件の数を示すもので、関東周辺には1万件超えの事故物件が存在する模様。この炎アイコンをクリックすると…… マップが拡大してより詳細に「どこにどれ
うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter
モダンブラウザを基準にページ制作をする人が増えてきましたが、IE8を完全に切るのはなかなか難しいのが現状です。 そんなIE8で、あれ表示がおかしいぞ！という時に、その原因のアドバイスをしてくれる便利なオンラインサービスを紹介します。
CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。 Chromeの機能拡張 ローカル環境での使用（スタイルシートファイル） Chromeの機能拡張 下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストア インストールが完了すると、上部のバーにPesticideボ
サイトの不正なハッキングをいち早く見つける 3 つの方法
+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
WordPressのテーマ制作者は必携！記事のさまざまなパターンが簡単にテストできる - WP Test
WordPressのテーマで記事がどのように表示されるか、テキスト記事、画像コンテンツ、動画コンテンツなどが正常に表示されるかテストできるWP Testを紹介します。 普通に想定されるパターンだけでなく、タイトルが異常に長い、コメントがたくさんついた、カテゴリが無い、カテゴリが異常にたくさんなど、イジワルなパターンも用意されています。 WP Test ダウンロードできるテストデータはXMLフォーマットで、WordPressに直接インポートできます。画像などはuploadsフォルダでサーバーにアップします。 どんなパターンが用意されているかは、WP Testのデータを読み込ませたデモで見ることができます。たくさんあるデモページから一部をご紹介。
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
パソコンでサッと電車の遅延情報を確認できるChrome用アプリ | ライフハッカー・ジャパン
Chromeユーザーなら、ブラウザ上で電車の運行情報を集められるアプリがあります。それがChrome版『ジョルダンライブ！』です。 ジョルダンライブ！とは、駅のホームや電車内など、目の前で起きている運行状況をユーザーが投稿し、 その投稿が一覧表示されるサイトのこと。スマホアプリ『乗換案内』（iOS版、Android版）を利用している人には馴染みがあるかもしれません。 このサービスは、どの運行情報よりもいち早く情報を入手できるのがポイント。Chrome版は地図上にピンが表示されるところも見やすくて良いです。ダウンロードはこちらのページから行えます。 デフォルト設定では、全国の運行情報が表示されます。ドロップダウンリストでは、各地域ごとの表示に切り替えることもできます。 「（電車が）止まっている」「遅れ」など、電車の状態ごとに絞り込み検索が可能です。「3h」というボタンをクリックすると「24h
文字コードの解析、変換（エンコード、デコード） / SEO、セキュリティ、調査ツール
文字コードの変換や解析を行います。 文字化けを起こしたメッセージを読みたいときなどに効果があります。 文字種によってはHTMLで表記できない場合や、このページソースで取得しないといけない場合など、正しく変換できない場合があります。 デコードの場合、変換前文字種を指定し、変換後文字種は通常「sjis」を指定する。 エンコードの場合、変換前文字種「なし」で変換後文字種を指定する。 正しく変換されない場合のみ、変換前文字種を変更する。 デコードの場合、最大入力文字数は 1000 字です。 ただしエンコードの場合の最大入力文字数は 80 字です。 よく使われる文字コードの特徴を説明しておきます。 【デコード時の設定方法】 jisコード→「�$B$"$$$&$($*�(B」 →変換前文字種：「jis」 →変換後文字種：「sjis」 eucコード→「､｢､､､ｦ､ｨ､ｪ」 →変換前文字種：「euc-j
[SEO]自分のサイトがペナルティを受けていないかチェックする方法 | TechMemo
Tweet TweetWEBサイトを運営している方なら、自分のサイトの検索順位は気になると思います。 なかなか順位が上がらないとき、ついペナルティを疑ってしまいがちですが、実際にペナルティを受けているか確認する方法をご紹介いたします。 手動ペナルティを受けている場合 手動のペナルティを受けた場合、Googleウェブマスターツールで警告メッセージが届きます。 なので、Googleウェブマスターツールを確認することで、手動のペナルティを受けているかどうかは判断できます。 アルゴリズムによるペナルティを受けている場合 アルゴリズムによって自動でペナルティを受けた場合、Googleウェブマスターツールには警告メッセージが届かない場合もあるので、判断が難しいです。 そこで、Googleセーフブラウジングを使います。Googleセーフブラウジングでは、サイトがペナルティを受けているかどうかが一瞬でわか
ウェブサイトのリンク切れをチェックする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ヘッダを送
Twitterの大量流出したパスワードに自分のものが含まれているかどうか一発でわかる「WIWA TWIPASS」
「TwitterのアカウントPASSが流出していないかどうか確認するサイトを作った。30分で」ということで、本日明らかになったTwitterのパスワード大量流出（延べ5万5000件、重複しているものを除いて約3万5000件）について、自分のTwitterアカウントのパスワードが漏れていないかどうかが分かるサイトが登場しています。 Twitterのパスワードが流出していないか確認：WIWA TWIPASS http://twipass.wiwa.jp/ 使い方は簡単、空欄に自分のアカウント名を入れて「チェックする」をクリック 漏れていない場合はこうなります、大丈夫 漏れている場合はこのように表示されます、アウト。パスワードを変更し、同じパスワードをほかのサービスやアプリなどでも流用してしまっている場合はすべて変更しておきましょう。 2012/05/10 9:40追記 Twitterの公式ブロ
タグの閉じ忘れをチェックするブックマークレットが便利。 | バニデザノート
タグの閉じ忘れをチェックするブックマークレットを紹介します。 もう数年使わせてもらってます。 コーディングがほぼ終わった状態で、カラム落ちとか なにか表示がおかしいとき、divタグなどの閉じ忘れってよくあるのですが どのタグ周辺の閉じタグがないのかをワンクリックでチェックしてくれるものです。 使い方は簡単で、こちらのページのインストール項目の「タグ対応をチェック」というリンクをドラッグしてブックマークツールバーに入れるだけ。 あとは、チェックしたいページで さきほどブックマークツールバーに入れたブックマークを押すと 自動でチェックしてくれます！ ご参考にどうぞ。 HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] 関連記事 セリフ体をうまく利用しておしゃれな印象の４サイト 2011/12/26 Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 2011/12
netstatでリッスンしているプロセスを特定する
●netstat コマンドでリッスンしているプロトコルとそのポート番号を調査する TCPやUDPでリッスンしているポート（サーバ側で、待ち受けしている方のポートのこと）を調査するには、最初に、「TIPS―netstatコマンドを使いこなす」で述べたとおり、netstatというコマンドを使う。「-a」オプションを付けてnetstatを実行すると、現在アクティブなコネクションとリッスンしているポートなどが表示されるので、これでどのようなプロトコルが使われているかが分かるだろう。 C:\>netstat -an……Windows XP上で実行した例 Active Connections Proto Local Address Foreign Address State TCP 0.0.0.0:25 0.0.0.0:0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホで動画が視聴できないときは － 動画の視聴確認サイト －
Digital Marketing Agency | Barracuda Digital
ちょんにょろチェッカー