株式会社オンズのブログ記事一覧
カテゴリー "開発ブログ" を表示中:762件
-
【HTML】意味のない画像にも必ずalt属性を設定すべき理由とは? 画像のimgタグに付与するalt属性は、アクセシビリティとSEOの観点から非常に重要な役割を果たします。 意味を持つ画像だけでなく、装飾的な画像にもalt属性を正しく設定することで、検索エンジンとスクリーンリーダーが画像を適切に解釈できるよ… 【HTML】意味のない画像にも必ずalt属性を設定すべき理由とは?続きを読む →
-
【正しいマークアップ】HTMLの「<a>」タグと「<button>」タグのどちらを使うべきか? HTMLの<a>タグと<button>タグは、用途によって使い分けが必要です。 目次<a>タグの使い方<button>タグの使い方結論 <a>タグの使い方 用途 ページ遷移や外部リ… 【正しいマークアップ】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では、セキュリティのため外部リンクに「rel=”noopener noreferrer”」が自動的に追加されます。 これをカスタムフィルターを使用して解除する方法を紹介します。 「rel=̶… 【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】ワードプレスで「前の記事」「次の記事」リンクを出力する方法続きを読む →
-
【WordPress】カスタム投稿を function.php で作る方法 WordPressでカスタム投稿を用意する際、多くの初心者のかたはプラグインに頼りがちです。便利ですからね。 しかし、プラグインを使いすぎると、サイトが重くなってパフォーマンスに影響が出ることもあります。 特に、サイトの軽量化やパフォーマン… 【WordPress】カスタム投稿を function.php で作る方法続きを読む →
-
PageSpeed Insights で「第三者コードの影響を抑えてください」の原因が Analytics & AdSense である場合 ウェブサイトのパフォーマンス改善に欠かせない PageSpeed Insights で、「第三者コードの影響を抑えてください」という警告が表示されることがあります。 これは外部から読み込まれる「第三者コード」、特に Google Analy… PageSpeed Insights で「第三者コードの影響を抑えてください」の原因が Analytics & AdSense である場合続きを読む →
-
【Mac OS】ファインダーで「.htaccess」などの不可視ファイルを表示する方法 ウェブサイト制作をしていると[.htaccess]などのファイルを扱う機会があります。 名前が「.(ドット)」ではじまるファイルは通常、Macでは不可視ファイル(隠しファイル)として、表示されない状態になっているので、それを嫌って「htac… 【Mac OS】ファインダーで「.htaccess」などの不可視ファイルを表示する方法続きを読む →
-
【WordPress】Contact Form 7 で出力されるsize属性を削除する方法 「Contact Form 7」を使ってお問い合わせフォームを作っているとき、フォームのインプットやテキストエリアが、親要素をはみ出して表示されてしまうことがあります。 これ、CSSでwidth:100%;を指定しても効かないんですよね。 … 【WordPress】Contact Form 7 で出力されるsize属性を削除する方法続きを読む →
-
【WordPress】お問い合わせフォーム「Contact Form 7」に「reCaptcha v2」を設定する方法 プラグイン「Contact Form 7」でお問い合わせフォームを設置するとき。 reCAPTCHAを導入する場合、現在はv3がデフォルトですが、他バージョンのv2を使用したいケースもあるかと思います。 今日は『reCAPTCHA v2』を… 【WordPress】お問い合わせフォーム「Contact Form 7」に「reCaptcha v2」を設定する方法続きを読む →
-
マット・マレンウェグ氏(WordPress.org)による『Advanced Custom Fields 乗っ取り事件』のまとめ ここ最近WordPress界隈を騒がせている『Advanced Custom Fields』関連の問題について。 いろいろ調べてわかってきたことをまとめます。 目次登場人物、用語解説マット・マレンウェグ(Matt Mullenweg)WP … マット・マレンウェグ氏(WordPress.org)による『Advanced Custom Fields 乗っ取り事件』のまとめ続きを読む →
-
【CSS】スマホでリンクをタップしたときのハイライトを消す方法 スマートフォンでリンクやボタンをタップした際に、リンクエリアがハイライト(iOS Safari だとグレー / Android for Chrome だとオレンジ)で表示されることがあります。 このハイライト表示が不要なとき、CSSで無効化… 【CSS】スマホでリンクをタップしたときのハイライトを消す方法続きを読む →
-
【Font】クレヨンで描いたようなカワイイ手書き風フォント[Darumadrop One]を紹介します。 Maniackers Design様のフォント「Darumadrop One」が、Google Fontsでダウンロードできるようになっていました。 Google Fonts Darumadrop One 「Darumadrop」とは『だる… 【Font】クレヨンで描いたようなカワイイ手書き風フォント[Darumadrop One]を紹介します。続きを読む →
-
【CSS】「-webkit-overflow-scrolling」は削除してOK かつて、-webkit-overflow-scrolling: touch はiOSデバイスのSafariで、なめらかなスクロールを実現するために使われていました。 現在の状況 特にiOSのSafariなどWebKitエンジンを使用している… 【CSS】「-webkit-overflow-scrolling」は削除してOK続きを読む →
-
お知らせ 2024年10月1日: 本ブログサイトのURLを変更しました。 旧URL:https://on-ze.com/archives 新URL:https://on-ze.com/blog これによってRSSのURL等も変更になっています。 恐れ… お知らせ続きを読む →
-
経済産業省が発行した「コンテンツ制作のための生成AI利活用ガイドブック」をAIを使って要約してみた。 経済産業省が「コンテンツ制作のための生成AI利活用ガイドブック」を発行しました。 実際に読んでみたのですが、たいへん参考になりました。 今日はこの「コンテンツ制作のための生成AI利活用ガイドブック」をみなさんに紹介するために、AIを使って要… 経済産業省が発行した「コンテンツ制作のための生成AI利活用ガイドブック」をAIを使って要約してみた。続きを読む →
-
【AI】WordPressの質問に答えてくれるAIチャット「ChatWP」が便利です 近年、ChatGPTをはじめとしたAI関連サービスが注目を集めており、ウェブデザイン・ウェブ制作界隈においても日々、多くのAIツールが登場しています。 今日は、WordPressの公式ドキュメントを学習データとして作られたAIチャットボット… 【AI】WordPressの質問に答えてくれるAIチャット「ChatWP」が便利です続きを読む →