Zenn
🦔

【WordPress】編集メニューにはご注意（2022年12月2日業務報告）

2022/12/02に公開
CSS
HTML
PHP
tech

下層ページのタイトルを画面サイズに応じて可変化

font-sizeの指定でvmaxを使用する。
vmax = 相対指定。ビューポートの「幅か高さの長い方」の何パーセントか。
文字サイズが可変
 

h1タイトルの装飾

サイトに合わせた背景を横幅いっぱいに置いて、動きを出してみた。

h1 {
    color: #fff;
    background: #333;
    text-align: center;
    letter-spacing: 5px;
    padding: 50px 0;
    margin-bottom: 50px;
    font-size: 5vmax;
    font-weight: normal;
    font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
    position: relative;
}
h1::after {
    animation: flash 1s linear infinite;
    content: '';
    width: 4%;
    bottom: 60px;
    border-bottom: solid 3px #fff;
    position: absolute;
}
@keyframes flash {
    0%,100% {
      opacity: 1;
    }
  
    50% {
      opacity: 0;
    }
}

h1タイトル
 

ロゴの設定とファビコンの設定

ハンバーガーメニューの色

background-color: rgba(0,0,0,0.5);

ハンバーガーメニューの位置が・・・

ハンバーガーメニュー
ハンバーガーメニューの縦位置はtopで指定していて、上図の通り見た目に問題がないが、スマホ環境で見ると何故かずれてしまう。。。
ハンバーガーメニューずれ

調べてわかったのは、Wordpressの編集メニュー分ずれるということ＾＾；
WordPressメニュー

WordPressにログイン中のブラウザで見ると位置は問題なく見えるが、ログインしていないブラウザやスマホで見た場合にはメニューが消えた分、ハンバーガーメニューの位置だけがずれるということでした。

ということで、topにメニューを考慮しない値を入れて調整して改善。
ただし、WordPressログイン中の見た目は逆にずれるということは忘れないようにしておかないと。
WordPressログイン中はハンバーガーメニューがずれる

たぶん、以下のことをやれば改善すると思うけど、ひとまずはこのままでいいとする。
https://rilaks.jp/wordpress/admin-bar/
 

スマホで確認するときにCSSが読み込まれない

CSSファイル名にunixタイムをつけてとりあえず違うファイル名にすることで毎回読み込むようにする。

※注意※
本番環境に上げるときには消す！

<link rel="stylesheet" href="<?php echo get_stylesheet_uri() . '?t=' . time(); ?>">

ヘッダーとフッターの背景色を変更

それに伴い文字色の変更とサイドメニューの色も調整する

Discussion