MENU
WEB制作の備忘録 | ぶろぐみ
お問い合わせ
　
  1. ホーム
  2. ちょっとしたWeb制作のメモ

ちょっとしたWeb制作のメモ

Web制作で役立つちょっとしたメモや知識を綴っています。

Webデザインの参考サイト集

目次

WordPress

ログインできない

ログインパスワードの強制リセット

データベースphpMyAdminの「wp_users」から任意のユーザーを選択し、編集。

「user_pass」に新しいパスワードを入力後、隣の選択項目から「MD5」を選択し、最後に実行して完了。

プラグインを強制停止

「wp-content」＞「plugins」の名前を一旦変更し、プラグインを無効化。

ログイン後に、名前を戻して完了。

追加CSSの保存場所・復元

追加CSSの保存場所は、データベースのwp_postsテーブルに保存されている。

post_titleからテーマのフォルダ名（xxx_childなど）で検索すると保存履歴が見れる。

つまり、追加CSSはテーマごとに保存されている。

サーチコンソール

所有権の確認

Google Analyticsでの確認ができない

gtag.jsを遅延読み込みしている場合は、確認に失敗する。

その場合、「HTML タグ」などで確認する。

譲渡する場合

譲渡先に「所有者の確認」をしてもらってから、自分のアカウントからプロパティを削除する。

注意

  • 譲渡前にサイトから自分の固有のトークン（HTMLタグなど）は削除しておく。
    • 固有のトークンが残っていると、「未使用の所有権トークン」として残り復活できてしまう。
  • 譲渡する前提であれば最初から自分の所有者確認を「Google Analytics」で行う。
    • 譲渡後にアナリティクスの管理者権限を外れるだけで未確認になり何も残らない状態にできる。

CSS

袋文字

太い輪郭を描写すると中の色が塗りつぶされますが、paint-orderで順序を指定してあげると綺麗な袋文字にすることができる。

.text {
  color: #fff;
  -webkit-text-stroke: 10px;
  /* 輪郭を先に描写 */
  paint-order: stroke;
}

透明度の指定

16進数や色名でも透明度を変更できる。

/* 16進数 */
background-color: rgb(from #fff r g b / .8);
/* 色名 */
background-color: rgb(from white r g b / .8);

SVG

不具合

ブラウザ毎にテキストの見た目が変わらないようにする

SVG内のテキストはブラウザによって明朝体に変わったりする。

SVG全体をアウトライン化するとSVGのサイズが変わる場合があるので、テキストデータだけアウトライン化して、フォントの見た目を統一させる。

Safariでdrop-shadowが途切れないようにする

Safariで影がうまく描写されないことがあるので、transformやwill-changeプロパティを利用してハードウェアアクセラレーションを強制的に有効化する。

.item {
  filter: drop-shadow(10px 10px 5px #aaa);
  /* 以下のどちらかを記述 */
  transform: translateZ(0);
  will-change: filter;
}

SWELL

Lightbox（luminous）を強制有効化

「投稿画像をクリックで拡大表示する機能」は、.post_content .wp-block-image imgの構造でマークアップされているimgが対象となる。

<figure class="wp-block-image"><img src="" alt=""/></figure>

ただし、ショートコードでの画像表示や記事外の画像では動いてくれないので、以下のフラグを立てることで有効になる。

\SWELL_Theme::set_use( 'luminous', true );
目次