先日、現行サイトから新サイトへの移行に際し、この枠の装飾よく見るんだけど・・・どうするのかな？調べる間もなく、ブロック枠で編集をしてしまいましたが、せっかくなので探してみました。
ホントはコード表示までしたいのですが、昨日、CrayonSyntaxHighLighterが使えなくなってしまったので、コード表示のプラグイン探していました。SyntaxHighlighter Evolvedにプラグインを変更。プラグインを有効化するまでは、通常のプラグインと同じ。設定も比較的簡単。参考サイトは、こちらでした。

[blogcard url="https://ao-log.com/wordpress-syntaxhighlighter-evolved/"]

CrayonSyntaxHighLighterがPHPファイルをアップデートしたら、エラー表示！になったため

左上に△の表示

/* 商品に見立てた枠 */
.triangle {
    background-image: url(/wp-content/uploads/2020/09/aroma1.jpg);
    width: 640px;
    height: 400px;
    border: #eee 1px solid;
    margin: 0 auto;
    position: relative;
}

/* ラベル部分 左上に表示 */
.triangle::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 4em solid transparent;
    border-left: 4em solid #c12748; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
.triangle::after {
    content: "New!";
    display: block;
    top: 5px;
    transform: rotate(-45deg);
    color: #fff; /* 文字色はここで変更 */
    left: 0;
    position: absolute;
    z-index: 101;
}

左下に△の表示

/* ラベル部分 左下に表示 */
/* 商品に見立てた枠 */
.triangle-u {
    background-image: url(/wp-content/uploads/2020/09/aroma1.jpg);
    width: 640px;
    height: 400px;
    border: #eee 1px solid;
    margin: 0 auto;
    position: relative;
}
/* ラベル部分 左下に表示 */
.triangle-u::before {
    content: "";
    bottom: 0;
    left: 0;
    border-top: 4em solid transparent;
    border-left: 4em solid #c12748; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
.triangle-u::after {
    content: "New!";
    display: block;
    bottom: 5px;
/*    transform: rotate(-135deg);*/
    color: #fff; /* 文字色はここで変更 */
    font-weight: bold;
    left: 0px;
    position: absolute;
    z-index: 101;
}

[blogcard url="https://wand.plus/2016/08/19/css%E3%81%A0%E3%81%91%E3%81%A7%E3%81%A7%E3%81%8D%E3%81%A1%E3%82%83%E3%81%86%EF%BC%81%E3%83%A9%E3%83%99%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%8C%E4%B8%89%E8%A7%92%E5%BD%A2%E7%B7%A8/"]

お問い合わせはこちらから

メール送信後、3日経過しても返信がない場合は、ＰＣメールが受信できない設定になっている可能性がございます。
携帯やスマフォのキャリアメールの場合は、受信設定の変更をお願い申し上げます。

お問い合わせはこちら