【CSS】指定した要素がない場合にデザインを当てたいとき！

CSSの擬似クラスの:not()と:has()を使おう！！

.test:not(:has(p)) {

color: #fffff;

}

ちなみにhasは指定した要素がある時に使えるよ！！

/* 直後に p 要素があるような h1 要素に対して、スタイルを適用 */
h1:has(+ p) {
  margin-bottom: 0;
}

/*カードに画像があるかどうかをチェックし、ある場合にはFlexboxで配置できる*/

.card:has(.card-image) {

    display: flex;

    align-items: center;

}

知ってたらきっと便利！！

【wordpress】管理画面上にアイキャッチ項目出ない時

ワードプレス管理画面上に、アイキャッチの項目がそもそも表示されない時は

テーマ内のfunctions.phpに

<?php

add_theme_support('post-thumbnails');

をいっそのこと差し替えて記載する

(大したこと書いてなさそうなら…)

【ECキューブ】ver4テンプレの場所の解説

たまにしか触らないから絶対忘れるであろう、テンプレートファイルの場所解説

※管理画面でテンプレートを編集した場合、「app/template/側」にテンプレートが生成されてそちらが優先される※

・/public_html/shop(各サイト)/app/template/default（編集後）

・/public_html/shop(各サイト)/src/Eccube/Resource/template/default（編集前）

・/public_html/shop(各サイト)/html/template/default/assets/css(CSSの場所)

・/public_html/shop2/html/template/default/assets/img/(画像の場所)

EC CUBEは新しいverだと色々変わってるのでメモ！！

【CSS】角端透明のタイトルの後ろなど

背景画像などを透かす

.title1 {
    position: relative;
    padding: 4px 20px 4px 20px;
    background: #4B4B4B;
    z-index:1;
    color:#ffffff;
    display: inline-block;
    font-size: 22px;
}

.title1:before,.title1:after {
    position: absolute;
    border-style: solid;
    border-color: transparent;
}
    
.title1:before {
    position: absolute;
    content: '';
    left: -2px;
    top: -2px;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 2em #fafcfc;
    border-bottom: solid 2em transparent;
    z-index: -1;
}

    .title1:after {
        position: absolute;
        content: '';
        right: -43px;
        top: 0;
        width: 0;
        height: 0;
        border: none;
        border-left: solid 43px transparent;
        border-bottom: solid 43px #4b4b4b;
        z-index: -1;
        transform: rotate(90deg);
    }

afterの

transform: rotate(90deg);が重要

【css】フォントサイズの基礎

html {font-size:62.5%;}

body {font-size:10px; font-size:1.0rem;}

これを基礎に進めよう～