デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
WordPressは世界で1番使用されているCMSかつオープンソースであるが故に、悪意のある第三者やプログラムから世界で1番攻撃されやすいCMSと言われています。 私自身も何度か攻撃を受けていて、実害に及ばなかったものから及んだものまで様々でした。クライアントの稼働しているWEBサイトに実害があった場合は、原因究明や報告、一次対応から恒久的対策までを行い、安全性を確保した上で再度稼働させる必要があり、その作業は簡単なものではありません。 被害があるのはクライアントだけではなく、そのサイトにアクセスしたユーザーに及びます。たとえ納品後の保守契約を結んでいなかったとしても、実装者の責任としてクライアント、ユーザーに安心して利用できるWEBサイトを目指さなければいけません。 私はセキュリティの専門家ではないもののWordPressを10年以上触っている中で様々な問題に当たり、対応してきました。そ
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法を紹介します。 画像の自動生成を確認 GDライブラリーの確認方法 画像の自動生成を確認 まずは FTP でサーバーにアクセスして、メディアのアップロードで画像がアップロードされているかを確認。 そこで、サムネイルや他のサイズの画像が自動生成されているかどうかを確認します。 画像が自動生成されていない場合、PHP のGDライブラリー(画像ライブラリー)がインストールされていない可能性があります。 GDライブラリーの確認方法 GDライブラリーが環境にインストールされているかを確認するには、現在表示中のページのテンプレートに以下のコードを追加します。 <?php phpinfo(); ?> phpinfo() は現在の PHP の設定を確認することができます。 コードが正しく動くと、PHP の設定が表示されるので
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。 Chromeの機能拡張 ローカル環境での使用(スタイルシートファイル) Chromeの機能拡張 下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストア インストールが完了すると、上部のバーにPesticideボ
+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を紹介します。 普通に想定されるパターンだけでなく、タイトルが異常に長い、コメントがたくさんついた、カテゴリが無い、カテゴリが異常にたくさんなど、イジワルなパターンも用意されています。 WP Test ダウンロードできるテストデータはXMLフォーマットで、WordPressに直接インポートできます。画像などはuploadsフォルダでサーバーにアップします。 どんなパターンが用意されているかは、WP Testのデータを読み込ませたデモで見ることができます。たくさんあるデモページから一部をご紹介。
JavaScriptエラーを表示・確認する方法をまとめました。 1.はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 2.エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
文字コードの変換や解析を行います。 文字化けを起こしたメッセージを読みたいときなどに効果があります。 文字種によってはHTMLで表記できない場合や、このページソースで取得しないといけない場合など、正しく変換できない場合があります。 デコードの場合、変換前文字種を指定し、変換後文字種は通常「sjis」を指定する。 エンコードの場合、変換前文字種「なし」で変換後文字種を指定する。 正しく変換されない場合のみ、変換前文字種を変更する。 デコードの場合、最大入力文字数は 1000 字です。 ただしエンコードの場合の最大入力文字数は 80 字です。 よく使われる文字コードの特徴を説明しておきます。 【デコード時の設定方法】 jisコード→「�$B$"$$$&$($*�(B」 →変換前文字種:「jis」 →変換後文字種:「sjis」 eucコード→「、「、、、ヲ、ィ、ェ」 →変換前文字種:「euc-j
Tweet TweetWEBサイトを運営している方なら、自分のサイトの検索順位は気になると思います。 なかなか順位が上がらないとき、ついペナルティを疑ってしまいがちですが、実際にペナルティを受けているか確認する方法をご紹介いたします。 手動ペナルティを受けている場合 手動のペナルティを受けた場合、Googleウェブマスターツールで警告メッセージが届きます。 なので、Googleウェブマスターツールを確認することで、手動のペナルティを受けているかどうかは判断できます。 アルゴリズムによるペナルティを受けている場合 アルゴリズムによって自動でペナルティを受けた場合、Googleウェブマスターツールには警告メッセージが届かない場合もあるので、判断が難しいです。 そこで、Googleセーフブラウジングを使います。Googleセーフブラウジングでは、サイトがペナルティを受けているかどうかが一瞬でわか
「TwitterのアカウントPASSが流出していないかどうか確認するサイトを作った。30分で」ということで、本日明らかになったTwitterのパスワード大量流出(延べ5万5000件、重複しているものを除いて約3万5000件)について、自分のTwitterアカウントのパスワードが漏れていないかどうかが分かるサイトが登場しています。 Twitterのパスワードが流出していないか確認:WIWA TWIPASS http://twipass.wiwa.jp/ 使い方は簡単、空欄に自分のアカウント名を入れて「チェックする」をクリック 漏れていない場合はこうなります、大丈夫 漏れている場合はこのように表示されます、アウト。パスワードを変更し、同じパスワードをほかのサービスやアプリなどでも流用してしまっている場合はすべて変更しておきましょう。 2012/05/10 9:40追記 Twitterの公式ブロ
タグの閉じ忘れをチェックするブックマークレットを紹介します。 もう数年使わせてもらってます。 コーディングがほぼ終わった状態で、カラム落ちとか なにか表示がおかしいとき、divタグなどの閉じ忘れってよくあるのですが どのタグ周辺の閉じタグがないのかをワンクリックでチェックしてくれるものです。 使い方は簡単で、こちらのページのインストール項目の「タグ対応をチェック」というリンクをドラッグしてブックマークツールバーに入れるだけ。 あとは、チェックしたいページで さきほどブックマークツールバーに入れたブックマークを押すと 自動でチェックしてくれます! ご参考にどうぞ。 HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] 関連記事 セリフ体をうまく利用しておしゃれな印象の4サイト 2011/12/26 Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 2011/12
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
●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ページを開く