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

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

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

test

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

目次

WordPress

ログインできない

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

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

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

プラグインを強制停止

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

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

追加CSSの保存場所・復元

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

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

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

使用していない画像を削除

プラグイン「Media Cleaner」で、WordPressコアの機能で挿入した画像を削除可能。

CSSによる画像や、テーマに依存したブロックの背景画像などは検知できない点にだけ注意。

サーチコンソール

所有権の確認

Google Analyticsでの確認ができない

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

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

譲渡する場合

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

注意

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

CSS

CSSだけのスムーススクロール

html要素に１行追加で完了。

html {
  scroll-behavior: smooth;
}

ヘッダー分下げたい時はscroll-padding-top、逆に上げたい時は、その要素に対してscroll-margin-topを指定する必要がある。

/* ヘッダーの高さ分下げる */
html {
  scroll-padding-top: 80px;
}

/* 上げる時は要素に対してマイナス値を指定 */
.section {
  scroll-margin-top: -100px;
}

袋文字

太い輪郭を描写すると中の色が塗りつぶされますが、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);

スマホのセーフエリア対応

追従ボタンなど下に固定している場合、ホームバーと重なったり、ボタンが角丸からはみ出したりする。

スマホのセーフエリアを除外する場合、env()関数で対応する。

.fixed-button-wrap {
  padding-bottom: env(safe-area-inset-bottom);
  background-color: rgb(255 255 255 / 0.7);
}
env() – CSS: Cascading Style Sheets | MDN

Safariの検証ツールでセレクタがうまく指定できない

メディアクエリの中にセレクタを指定しないと、Safariの検証ツールでセレクタがうまく選択できないバグを確認。（2025年3月18日時点）

/* セレクタが選択できない書き方 */
.item {

  @media (min-width: 780px) {
    display: flex;
  }
}

メディアクエリを入れ子にする場合は、&で同セレクタを指定することで解消できる。

/* 正しく選択できる */
.item {

  @media (min-width: 780px) {
    & {
      display: flex;
    }
  }
}

表示には問題ないが、検証する場合は書き方を工夫する必要がある。

iOSでaspect-ratioが効かない場合の対処

iOSで、absolute要素のaspect-ratioが効かなかったため、min-heightを追加して対処できた。

Flexboxなど横並びの時は幅が潰れることもあるみたいなので、min-widthも併せて追加しておくと良い。

.item {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  aspect-ratio: 702 / 233;
  /* iOS対策 */
  min-width: 0;
  min-height: 0;
}

フォントの太さや滑らかさを綺麗に

以下の指定を入れておくと、スマホで横向きの時テキストが拡大されるのを防いだり、文字のギザギザがなくなり、滑らかになる。

body {  
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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 );

Photoshop

大きい画像の切り抜き

Photoshopの「スライス」→「Web用に保存（従来）」での書き出しは8192pxまでしか対応していない。
※サイズを超えると書き出す際に縮小される

LPのような大きな画像を複数に区切って２倍書き出しする場合は、

  1. 区切りたい位置にルーラーを引く（目安4000px以内）
  2. 区切った画像の枚数だけPSDファイルを複製
  3. 切り抜きツールでトリミング
  4. ２倍書き出し
  5. ３の手順から繰り返す

区切る際は、4000px以内に収まるようにしておくと、スライスも使えるし、１枚あたり２MBほどで済む。

切り抜いた複数のPSDファイルは、念の為保存しておく。

目次