レスポンシブ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のGutenberg Block Editerがカスタム投稿タイプで使えない

カスタム投稿タイプに属する記事の一覧・編集画面で、ブロックエディタでの編集ができない場合は、
そのカスタム投稿タイプの、REST API機能が無効になっているため。

私の場合は、Custom Post Type UIというプラグインでカスタム投稿タイプを運用しているので、
Custom Post Type UI>対象のカスタムポストタイプの編集画面>REST APIの項目をTrue(真)に変更することで、ブロックエディタを使えるようになった。

Wordpress Block Editer (Gurenberg)がエラーで公開・プレビューできない。「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」エラー

Wordpress Block Editer (Gurenberg)がエラーで公開・プレビューできない。
「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」エラーがエディタの上部に赤く表示される場合。

私の場合

/wpとは別のディレクトリをトップにしていた

ディレクトリをトップにする場合、index.phpをトップにしたいディレクトリに正しく配置する。

↑これだけ

※静的HTMLで部分的にwordpressを呼び出して使用している場合など、index.phpを置き忘れているので、注意(自戒)


.htaccessの記載が空になっている場合

wordpress
wp-json/wp/v2/blocks?per_page=100&context=edit&_locale=user
が404を返しているのをchromeデバッグツール>ネットワークタブで確認したため、
htaccesがおかしいためにwp-json(REST API)が見つかっていないために、REST APIを使って投稿する仕組みのBlockEditer(Gutenberg)が動いていないと予想できたので、
htaccessに、

wp管理ページ>パーマリンク設定>htaccessの記述をコピーして、
WPサイトトップのhtaccessにコピペしたら正常に動作するようになった。
# BEGIN WordPress

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /2021/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /2021/index.php [L]

# END WordPress

(siteguardの記述がある場合はその後に記載すること)

ブロックエディタのギャラリーを挿入したら起きた

ブロックエディタの「ギャラリーブロック」を挿入したら起きた。削除して挿入しなおしたら起きなくなった・・・なぜなのかは不明

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はなしでもいい。

モーダルウィンドウ表示用Javascript覚書

    var scrollPosition;
    function toggleSpmenu() {
      var modal = document.getElementById('modal');
      var togglebtn = document.getElementById('togglebtn');
      var modalbg = document.getElementById('modalbg');

      if (modal.classList.contains('show')) {
        /*CLOSE*/
        modal.classList.add('hidden')
        modal.classList.remove('show')
        togglebtn.classList.remove('active');
        modalbg.classList.add('show');
        modalbg.classList.remove('hidden');
        document.body.classList.remove('fixed');
        window.scrollTo(0,scrollPosition);
      } else {
        /*OPEN*/
        scrollPosition = document.documentElement.scrollTop || document.body.scrollTop
        modal.classList.remove('hidden')
        modal.classList.add('show')
        modalbg.classList.remove('show');
        modalbg.classList.add('hidden');
        togglebtn.classList.add('active')
        document.body.classList.add('fixed');
        document.body.style.top = (scrollY * -1) + 'px';
      }

    }