2023-07

DEV NOTE TIPS

lvh svh dvh の違いと使い分け モバイル表示崩れを防ぐCSS実装手順

モバイルで100vhレイアウトが崩れる問題に対して、lvh・svh・dvhの違いと実務向けの使い分けを解説します。前提条件、実装手順、動作確認、トラブルシュートまでをまとめ、WordPressテーマやLPでも再現しやすい形で整理しました。
DEV NOTE TIPS

Swiperのloopとlazyloadingを使う際の注意点

Swiperでloopとlazyloadingを同時に利用するときの注意点と解決策について解説します。
DEV NOTE TIPS

画像のマスク・クリップについて

画像のマスクやクリップ処理について、clip-pathとmask-imageの使用法を解説します。
DEV NOTE TIPS

flexのカラムで高さを揃えない方法

Flexboxを使用したレイアウトで、カラムの高さを揃えない方法について説明します。
DEV NOTE TIPS

position: stickyが効かない時のチェックポイント

CSSのposition: stickyが期待したように機能しない場合の解決方法について説明します。
DEV NOTE TIPS

WordPressのメンテナンスモードの解除方法

WordPressのプラグインやテーマのアップデート中にメンテナンスモードが解除されない場合の解決策を紹介します。
DEV NOTE TIPS

CertbotでのUnicodeDecodeErrorの解決方法

CertbotでUnicodeDecodeErrorが発生した場合の解決方法を紹介します。
DEV NOTE TIPS

Wordmoveでデータベースがプッシュできない時の解決方法

Wordmoveでデータベースがプッシュできない場合の原因とその解決方法を紹介します。
DEV NOTE TIPS

WordPressでの「headers already sent by」エラーの解決方法

WordPressで「headers already sent by」エラーが発生した場合の原因とその解決方法を紹介します。
DEV NOTE TIPS

Bootstrapのcollapseの子要素にtransitionが効かない問題の解決方法

Bootstrapのcollapseコンポーネントにおける、子要素にtransitionが適用できない問題とその解決策について説明します。
DEV NOTE TIPS

コンタクトフォームのタグの自動変換を無効にする方法

コンタクトフォームなどでタグを直接コーディングするときに、WordPressの自動タグ変換機能が意図しない箇所に
や

を挿入してしまう問題を解決する方法を説明します。

DEV NOTE TIPS

inputタグの幅がコンテナからはみ出る問題の解決方法

inputタグの幅がコンテナからはみ出る問題の解決方法を説明します。size属性の誤った使用が原因であることが多く、その解決方法を提示します。
DEV NOTE TIPS

table内のinputの幅調整の正しい方法

table内のinputの幅調整には順序が重要であり、適切な設定方法を解説します。
DEV NOTE TIPS

tableのth、tdをdisplay: blockにした時の隙間の問題とその解決法

tableの要素(thやtd)をdisplay: blockに設定した際に生じる隙間の問題と、その解決策について解説します。
DEV NOTE TIPS

画像の後処理失敗とNginxのclient_max_body_size設定

画像のアップロード後に後処理に失敗する場合の対処法と、Nginxのclient_max_body_size設定について解説します。
DEV NOTE TIPS

Linuxディスクの簡易ベンチマーク方法

Linuxでディスクの読み書き性能を簡易的にベンチマークする方法を紹介します。'dd'コマンドを使用して読み書き速度をテストします。
DEV NOTE TIPS

MW WP Formでのセレクトボックス問題の解決方法

MW WP Formでのセレクトボックス問題を解決するために、nkfコマンドを使用してUTF8-MACのエンコーディングを修正します。この記事では、その手順について説明します。
DEV NOTE TIPS

Bootstrapのモーダルを閉じるとトップに戻ってしまう問題の解決方法

Bootstrapのモーダルを閉じるとページのトップに戻ってしまう問題は、特定のCSSプロパティの適用位置を変更することで解決できます。この記事では、その具体的な手順について説明します。
DEV NOTE TIPS

WordPressでHEICファイルをアップロードする方法

WordPressでHEICフォーマットのファイルをアップロードするには、特定の関数を追加します。これにより、HEICフォーマットとHEICシーケンスをアップロード可能なファイル形式として設定できます。
DEV NOTE TIPS

MW WP Formでアップロード先フォルダを変更する方法

MW WP Formのアップロード先フォルダを変更するには、特定のフィルターに関数を追加します。これにより、アップロード先のディレクトリを'/model'に変更できます。
DEV NOTE TIPS

LetsEncrypt証明書のSSL削除手順

LetsEncryptの証明書を削除するには、「certbot certificates」で証明書をリストアップし、「certbot revoke --cert-name=xxx.com」で証明書を削除します。最後に表示されるプロンプトでファイルの削除を選択します。
DEV NOTE TIPS

XML Sitemap Generator for WordPressでHTML形式のサイトマップのチェックを外す

「XML Sitemap Generator for WordPress」プラグインの設定で、「HTML形式でのサイトマップを含める」のチェックを外すことで、Googleサーチコンソールの「noindex タグによって除外されました」という警告を回避できます。
DEV NOTE TIPS

gulpでメモリ不足のエラーが発生する問題(imagemin)とその対処法

gulpのimageminプラグインを使用する際にメモリ不足のエラーが発生する場合の対処法です。gulpを起動する際にメモリの上限を引き上げることでエラーを解消できます。
DEV NOTE TIPS

webfontloaderでdisplay=swapを使うと二番目以降のフォントが読み込まれない問題

webfontloaderを使用する際、display=swapを指定していると二番目以降のフォントが正しく読み込まれない問題があります。この問題を解消するには、display=swapの指定を取り除くことが推奨されます。
DEV NOTE TIPS

Wordmoveでmysqldumpエラーが出た場合の対処方法

Wordmoveを使用してデータベースを移動させる際にmysqldumpエラーが発生する場合の対処法について説明します。Wordmoveの設定ファイルにmysqldump_options: "--column-statistics=0"を追記することで、エラーを回避できます。
DEV NOTE TIPS

現在のテンプレート名を取得する方法

WordPressで現在のページテンプレート名を取得する方法について説明します。関数get_page_template_slug()を使用すると、現在のテンプレートファイル名(例:'page-xxx.php')を取得できます。
DEV NOTE TIPS

Macでスクロールバー常時表示設定時の100vw問題と対処法

Macでスクロールバーを常に表示に設定している場合、CSSの100vwプロパティにより予期せぬスクロールバーが表示される問題があります。これは一時的にoverflow: hidden;で解決できますが、理想的には100%を使用することでスクロールバーの幅を除外できます。
DEV NOTE TIPS

ロリポップアクセラレータによる画像表示問題とその対処法

ロリポップのアクセラレータ機能が有効だと、MacのSafariなどの一部のブラウザで画像が表示されない問題が発生することがあります。対処法としては、アクセラレータ機能を無効にします。デフォルトでは有効化されているため、設定の確認が必要です。
DEV NOTE TIPS

phpMyAdminでのインポートエラー解決方法

phpMyAdminでのインポートエラー「#1214 - The used table type doesn't support FULLTEXT indexes」の解決方法として、SQLファイルのテーブルタイプ指定を「ENGINE=InnoDB」から「ENGINE=MyISAM」に書き換えます。途中でエラーが発生した場合は、インポート失敗のテーブルを削除してから再インポートします。
DEV NOTE TIPS

WordPressでアーカイブページの「月:」「カテゴリー:」などを消す方法

WordPressのアーカイブページに表示される「月:」や「カテゴリー:」などのプレフィックスを消す方法について解説します。これはget_the_archive_titleフィルターフックを利用してタイトルの形式をカスタマイズすることで実現できます。