株式会社オンズのブログ記事一覧

【注意喚起】悪質なスパムメール『あなたのパスワードが侵害されました』について 新規のお客様から相談いただいた悪質な詐欺メールをシェアします。 こんにちは！ 私は数ヶ月前にあなたの電子メールとデバイスをクラックしたハッカーです。 あなたが訪問したサイトの1つにパスワードを入力君た。それを傍受しました。 これは、ハッキン... 【注意喚起】悪質なスパムメール『あなたのパスワードが侵害されました』について続きを読む →

【WordPress】現在のページが子ページである場合に、同じ親を持つ兄弟ページの一覧を出力する方法 ほぼ社内用の備忘録です。 よく使うコードなので紹介します。 主に「page.php」で使用するコードです。 現在のページが子ページであるとき、その親要素に紐づいている子ページ（＝兄弟ページ）をリストで一覧出力する方法です。 <?php... 【WordPress】現在のページが子ページである場合に、同じ親を持つ兄弟ページの一覧を出力する方法続きを読む →

【WordPress】類似URLへの自動補完リダイレクトを止める方法 WordPressを利用していると、存在しないURLにアクセスした際に、類似したURLを自動的に補完してリダイレクトしてくれる便利な機能があります。 この機能は一見有用に思えますが、場合によっては不要な動作であり、意図しないページにアクセス... 【WordPress】類似URLへの自動補完リダイレクトを止める方法続きを読む →

【CSS】filterプロパティを使ってPNG画像を白黒反転する方法 CSSのfilterプロパティを使用すると、JavaScriptや画像編集ソフトを使わずに、画像の色を反転させることができます。 これを活用すれば、たとえばボタンやリンクのホバー時に画像を切り替える手間を省き、より効率的にデザイン＆コーディ... 【CSS】filterプロパティを使ってPNG画像を白黒反転する方法続きを読む →

【注意喚起】楽天市場を名乗る『【重要なお知らせ】カード情報更新のお知らせ』は悪質な詐欺メールです。 楽天市場を装って届く『【重要なお知らせ】カード情報更新のお知らせ』というタイトルのメールは悪質な詐欺メール、フィッシング詐欺です。 ぜったいにクリックしないようにしてください。 フィッシング詐欺とは？ フィッシング詐欺は、正規の企業を装って... 【注意喚起】楽天市場を名乗る『【重要なお知らせ】カード情報更新のお知らせ』は悪質な詐欺メールです。続きを読む →

【CSS】あなたの「object-fit」が効かない原因 object-fitが効かない場合、以下の原因が考えられます。 「object-fit」を img に対して効かせていない <img>に「width」「height」の指定がない 親要素の問題 Internet Explorer... 【CSS】あなたの「object-fit」が効かない原因続きを読む →

【Google Spreadsheets】覚えておきたいスプレッドシートのショートカットキー Googleスプレッドシートのショートカットキー一覧です。 一般的な操作 操作 Mac Windows すべてを選択 ⌘ + A⌘ + shift + Space Ctrl + ACtrl + shift + Space 元に戻す ⌘ + ... 【Google Spreadsheets】覚えておきたいスプレッドシートのショートカットキー続きを読む →

【WordPress】投稿画面のタグをチェックボックス式に変更する方法 投稿画面のタグをチェックボックス方式に変更する方法を紹介します。 投稿画面のタグをチェックボックス式に変更する方法 functions.php に以下のコードを追記すると実現できます。 function customize_post_tag... 【WordPress】投稿画面のタグをチェックボックス式に変更する方法続きを読む →

【reCAPTCHA】リキャプチャの追従マークを非表示にする方法［Google公式］ WordPressのプラグイン［Contact Form 7］などで、お問い合わせフォームに『reCAPTCHA』を導入してスパム対策をするとき。 reCAPTCHAのバッジがウィンドウの右下に追従するようになります。 Googleが公式に... 【reCAPTCHA】リキャプチャの追従マークを非表示にする方法［Google公式］続きを読む →

【注意喚起】NTTドコモを名乗る『【株式会社NTTドコモ】ご請求金額確定のご案内』は悪質な詐欺メールです。 NTTドコモを装って届く『【株式会社NTTドコモ】ご請求金額確定のご案内』というタイトルのメールは悪質な詐欺メール、フィッシング詐欺です。 ぜったいにクリックしないようにしてください。 フィッシング詐欺とは？ フィッシング詐欺は、正規の企業... 【注意喚起】NTTドコモを名乗る『【株式会社NTTドコモ】ご請求金額確定のご案内』は悪質な詐欺メールです。続きを読む →

無料で使える画像圧縮サイト［Tinypng］と［Squoosh］の使い方 画像のファイルサイズを軽量化することで、ウェブサイトの表示速度を向上させ、閲覧者のストレスを減らし、SEO（検索エンジン対策）にも繋がります。 今回は、手軽に画像圧縮ができる無料サイト「Tinypng」と「Squoosh」を紹介し、それぞれ... 無料で使える画像圧縮サイト［Tinypng］と［Squoosh］の使い方続きを読む →

Googleが推奨する「常時SSL」のSEOへの影響と導入ポイント SSLとは？ 「常時SSL」とは、ウェブサイト全体をHTTPS化することで通信を暗号化し、より安全なアクセスを提供する技術です。 これによりユーザーのデータ保護と信頼性が向上します。 以前は個人情報を扱うページのみがSSL化されていましたが... Googleが推奨する「常時SSL」のSEOへの影響と導入ポイント続きを読む →

【JavaScript】画像の遅延読み込みを行うライブラリ［lazysizes.js］をオススメします ウェブサイトの表示速度を上げるために「画像の遅延表示」を導入することは非常に効果的です。 遅延表示に対応するJavaScriptは多数公開されており、このブログでも［Unveil Lazy Load］や［Layzr.js］などを紹介してきま... 【JavaScript】画像の遅延読み込みを行うライブラリ［lazysizes.js］をオススメします続きを読む →

【HTML】意味のない画像にも必ずalt属性を設定すべき理由とは？ 画像のimgタグに付与するalt属性は、アクセシビリティとSEOの観点から非常に重要な役割を果たします。 意味を持つ画像だけでなく、装飾的な画像にもalt属性を正しく設定することで、検索エンジンとスクリーンリーダーが画像を適切に解釈できるよ... 【HTML】意味のない画像にも必ずalt属性を設定すべき理由とは？続きを読む →

【正しいマークアップ】HTMLの「<a>」タグと「<button>」タグのどちらを使うべきか？ HTMLの<a>タグと<button>タグは、用途によって使い分けが必要です。 <a>タグの使い方 用途 ページ遷移や外部リンクなど、別のURLへの移動に使用。 役割 リンクとして動作し、href属性で指... 【正しいマークアップ】HTMLの「<a>」タグと「<button>」タグのどちらを使うべきか？続きを読む →

【2024年最新版】Google Fontsを遅延読み込みしてページ表示速度を改善する方法 これまで「Google Fonts」の読み込みには『Web Font Loader』を使うことが多かったのですが、少々面倒で使用するハードルが高いんですよね。 今日紹介するのは、比較的簡単に、秒速で実装できるGoogle Fontsの遅延読... 【2024年最新版】Google Fontsを遅延読み込みしてページ表示速度を改善する方法続きを読む →

【CSS】JavaScriptを使わずにウィンドウの横幅と高さを取得する方法 JavaScriptを使わずにCSSだけでウィンドウの幅と高さをピクセル値として取得する方法を紹介します。 このテクニックはCSSの新しい仕様「@property」と三角関数を活用し、動的にウィンドウサイズを計算し、CSS変数として保持しま... 【CSS】JavaScriptを使わずにウィンドウの横幅と高さを取得する方法続きを読む →

【WordPress】外部リンクの「rel="noopener noreferrer"」属性の自動付与を解除する方法 WordPressでは、セキュリティのため外部リンクに「」が自動的に追加されます。 これをカスタムフィルターを使用して解除する方法を紹介します。 「」属性の自動付与を解除する 次の関数をfunctions.phpに追加することで、自動的に付... 【WordPress】外部リンクの「rel="noopener noreferrer"」属性の自動付与を解除する方法続きを読む →

【オンズ謹製】ウェブサイト制作に便利なオンラインツール オンズでは、ウェブサイト制作に使える便利なオンラインツールを無料で公開しています。 URLはこちら：https://on-ze.com/tools/ ランダムパスワード生成やアスペクト比計算ツール、文字数カウンターなど、10種以上のツールが... 【オンズ謹製】ウェブサイト制作に便利なオンラインツール続きを読む →

【Apple】小型化した新型［Mac Mini］が登場。 先日の新しいiMacの発表に続き、本日10月30日、Appleが新型「Mac mini」を発表しました。 新しい Mac Mini 2010年モデル以来のデザイン刷新で、12.7cm四方のコンパクトなサイズへと進化。 プロセッサには新しい「... 【Apple】小型化した新型［Mac Mini］が登場。続きを読む →

【Apple】最新AI［Apple Intelligence］搭載の新しい iMac が販売開始 嬉しいニュースです。 Appleが現地時間10月28日、新型iMacを発表しました。 M4チップを搭載してパフォーマンスの大幅な向上に加え、高性能AIとして注目を集めている Apple Intelligence を搭載。 11月8日より販売... 【Apple】最新AI［Apple Intelligence］搭載の新しい iMac が販売開始続きを読む →

【CSS】CSSアニメーションをGPUで快適に処理する方法 アニメーションを多用した魅力的なウェブサイトでは、CSSアニメーションが頻繁に使われます。 しかし正しく実装しないとパフォーマンスの低下を招くことも。 アニメーションが「カクカク」する場合、たいていGPUでなくCPUで処理されていて、リペイ... 【CSS】CSSアニメーションをGPUで快適に処理する方法続きを読む →

【Mac】アプリ（Panic Nova）の挙動が重いので対応してみた Via: Panic Nova こんにちわ。株式会社オンズの原一勢です。 普段のコーディング作業にはPanic社の［Nova］というエディタを愛用しています。 NovaはFTPやGitの機能も備え、サイトごとの管理がラク。サーバー内のファイ... 【Mac】アプリ（Panic Nova）の挙動が重いので対応してみた続きを読む →

【WordPress】ワードプレスで「前の記事」「次の記事」リンクを出力する方法 WordPressの記事の最下部などに表示される「前の記事」「次の記事」のリンクを簡単に出力する方法を紹介します。 標準的なナビゲーション表示 最も簡単なのはテンプレートタグ「the_post_navigation()」を使う方法。 これを... 【WordPress】ワードプレスで「前の記事」「次の記事」リンクを出力する方法続きを読む →