角枠を装飾してみた
先日、現行サイトから新サイトへの移行に際し、この枠の装飾よく見るんだけど・・・どうするのかな?調べる間もなく、ブロック枠で編集をしてしまいましたが、せっかくなので探してみました。
ホントはコード表示までしたいのですが、昨日、CrayonSyntaxHighLighterが使えなくなってしまったので、コード表示のプラグイン探していました。SyntaxHighlighter Evolvedにプラグインを変更。プラグインを有効化するまでは、通常のプラグインと同じ。設定も比較的簡単。参考サイトは、こちらでした。
CrayonSyntaxHighLighterがPHPファイルをアップデートしたら、エラー表示!になったため
左上に△の表示
sample
/* 商品に見立てた枠 */
.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;
}
お問い合わせはこちらから
メール送信後、3日経過しても返信がない場合は、PCメールが受信できない設定になっている可能性がございます。
携帯やスマフォのキャリアメールの場合は、受信設定の変更をお願い申し上げます。
携帯やスマフォのキャリアメールの場合は、受信設定の変更をお願い申し上げます。