■
content.bundle.js:33 Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
at y (content.bundle.js:33)
レスポンシブCSSでスマホとPCを切り替える場合に、displayを元の値のまま保持する方法
レスポンシブなCSSでPC/SPの表示を切り替えたい場合、以下のように、
display:none
display:block
を指定しなおすことで実現するのが一般的だが、
例えばpcでdisplay:flexだった要素をspでdisplay:none
にした場合は、一律にdisplay:blockに戻してしまうと表示が崩れてしまう。
.sp {
display: none;
}
.pc {
display: block;
}
@media (max-width: 481px) {
.sp {
display: block;
}
.pc {
display: none;
}
}
そこで、元の要素のdisplay要素を以前のまま保持するには以下のように指定するとよい。
@media (min-width: 481px) {
.sp {
display: none;
}
}
@media (max-width: 480px) {
.pc {
display: none;
}
}
Wordpress Block Editer (Gurenberg)がエラーで公開・プレビューできない。「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」エラー、または更新中のまま進まない
Wordpress Block Editer (Gurenberg)がエラーで公開・プレビューできない。
「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」エラーがエディタの上部に赤く表示される場合に
過去に解決できた方法の覚書。
★サイトのルートディレクトリ(wp以外にトップページを置いている場合など)に
index.phpが存在しない。
またはその内容が間違っている。
/wpとは別のディレクトリの静的htmlなどをトップページにしている場合に、
Wordpressのindex.phpを設置していない場合にJSONレスポンスエラーになる。
◉解決方法は、wp/ 以下の内容を書き換えて、サイトのルートディレクトリに設置する。
require( 'wp/wp-blog-header.php' );
上記のパスがそのディレクトリに適合しているかも確認する。
★.htaccessの記載が空、または間違っている
◉解決方法は設定＞パーマリンク設定で、再度、パーマリンク設定を更新すると正しいhtaccessになる(Wordpress利用部分のみ)
のでやってみる。
更新してもだめな場合は原因はhtaccessではない。
特にchromeの検証ツールで、
wp-json/wp/v2/blocks?per_page=100&context=edit&_locale=user
が404を返しているのをchromeのデバッグツール＞ネットワークタブで確認できた場合は
htaccesがおかしいためにwp-json(REST API)がへのパスがおかしくなって、404になっているっぽい。
(siteguard pluginの記述がある場合はその後に記載すること)
★ブロックエディタのギャラリーを挿入したら起きた
ブロックエディタの「ギャラリーブロック」を挿入したらJSONレスポンスエラーが起きた。
削除して挿入しなおしたら起きなくなった・・・なぜなのかは不明
★ブロックエディターを保存・更新すると更新中のまま進まない
chrome/macbook proでのみ記事を保存すると、上部の保存ボタンの上の文字が「更新中」となったまますすまない。
chomeのデバッグコンソールを確認すると・・
https://xxxxxl.com/wp-json/wp/v2/xxxx 403
のようなwp-json以下が403であるというエラーが大量に吐き出された。
サーバー側？と思って今まで書いてきた解決方法をためしたが、どれも当てはまらず。
まさかとは思ったが、別のMacにて更新ボタンを押してみるとすんなり保存・更新ができる。
クライアント側の個別の環境問題として、BlockEditerが更新できなくなったのは初だったのだが、
どうもWordpressのGutenburg Block EditerはブラウザのCookieにまだサーバに保存していない情報を保存しているっぽいので、
◉解決方法=更新がうまくいかないドメインのクッキーをいったん、すべて削除したら、無事更新成功。
★利用中テーマが対応してない
自作テーマなどで、BlockEditerに対応していないテーマでは、JSONレスポンスエラーになるので、
◉解決方法=公式テーマのTwenty Twenty Oneなどにいったん変更してみて、記事が保存できるか試す。
Adobe XDにAdobeFontsでアクティベートしたフォント(NotosansCJKJP)が反映されない[Mac]
解決方法
Macを再起動し、SHIFTキーを押しながら起動する。
その後再度再起動し、command+option+P+Rキーを同時押しして起動する。
フォントキャッシュが削除され、反映されるようになる。
AndroidのMessengerのスレッドでPDFやxlsxなどのリンクをタップしてもファイルがダウンロードされない(ダウンロードされる場所がわからない/画面が真っ白)
AndroidのMessengerのスレッドでPDFやxlsxなどのリンクをタップしたとき、
・ファイルがダウンロードさできない
・ダウンロードのダイアログでダウンロードをタップしても真っ白な画面が開くだけでダウンロードされた場所がわからない
・真っ白な画面を閉じると背後にブラウザが起動している
こんな現象で、Messengerからファイルがダウンロードできないことがあります。
その場合の解決方法は以下の通り
原因
ホーム画面＞設定＞アプリ>デフォルトアプリ＞ブラウザがchrome以外(Yahooブラウザなど)になっているときに起こる
解決方法
google chromeをインストールし、デフォルトブラウザをchromeに変更する。
念のためスマホを再起動し、メッセンジャーのリンクをタップして確認する。
Github+Plesk自動デプロイのやり方
★手順1--GitHub側
Githubアカウントを作成する。
repositryを新規作成する。
repositryのトップページ＞Code>UseSSH>Clone with SSHのgitレポジトリのアドレスをメモしておく
git@github.com:[USERNAME]/[REPOSITRYNAME].git
★手順2--Gitクライアントでローカルリポジトリを作成
SourceTree(MAC)での手順
すでに、ワークディレクトリがある場合
SourceTree>ローカル＞新規＞既存のローカルリポジトリを追加
でワークスペースをSourceTreeにリポジトリとして追加する。
ファイルをCommitする
★手順3--Plesk側
対象ドメインのGitサポートを有効にする
リモート Git ホスティングを使用する
・[GitHub や BitBucket などのリモート Git ホスティング]を選択
・デプロイメントモード：「自動デプロイメント」
・自動デプロイしたいディレクトリが間違っていないか確認する。
・Githubで上記で取得しておいたリモートリポジトリの URL を指定する。
git@github.com:[USERNAME]/[REPOSITRYNAME].git
の形式のパスを入力すると、［SSH 公開キー］フィールドにPlesk で自動生成された「SSH 公開キー」が表示される。
・「SSH 公開キー」はメモしておく。(この後Githubに登録するため)
・Gitが有効になったら、その下に表示される「WEBHOOK URL」をメモしておく。(この後Githubに登録するため)
★手順4---GitHub側
「SSH 公開キー」をGithubのSSHGPG設定画面に登録する。
github.comにログイン＞マイアカウント＞設定＞SSHGPG＞SSHの欄に公開キーを登録
「WEBHOOK URL」を
github.comにログイン＞該当のレポジトリトップ画面＞Settings＞WEBHOOKS＞add Webhook
で登録する。
【注意】
Pleskに表示されている、WEBHOOK URLは、ドメインの部分が「localhost.localdomain」になっているので、このままGithubに登録しても動かないため、
必ず、自分の「初期契約ホスト(ドメイン)名」に変更して登録する。
https://localhost.localdomain:8443/modules/git/public/web-hook.php?uuid=xxxxxxxxxxxxxxxxx
↓
https://xxxxxx.xxxxx.com:8443/modules/git/public/web-hook.php?uuid=xxxxxxxxxxxxxxxxx
自分の契約初期ドメインに差し替える。(プッシュしたいドメインではなく、pleskのおいてあるサーバー自体のドメイン)
入力はPayload URLが必須。secretはなしでもいい。
CSSグリッドレイアウト(IE11はflexboxとして表示)
.gridlayout{ display: grid; display: -ms-flexbox; gap: 8px; -ms-flex-direction: row; -ms-flex-wrap: wrap; -ms-flex-pack: left; -ms-flex-align: stretch; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
