ワードプレス

【WordPress(ワードプレス)】見出しのリボンの仕組みCSS

2020年8月2日

<リボンの仕組み>

リボンのデザイン

 WordPress(ワードプレス)の見出しデザインを色々見ていたら、その中でリボンが気になりました。両端が折り返されていて不思議な感じがしませんか。

 どうやって作られているのか気になり、調べてみるとCSSの「before」「after」と「border」が使われていました。

 

「before」と「after」

下記の文章を「山田太郎」だけで作りたいと思います。

 

投稿の内容です。

 

「before」と「after」はCSSの中で使用します。この2つはこのように「タグ」を補ってくれる機能があります。

 

「border」

「山田太郎」に「border」を加えてみました。

 

「山田太郎」を消したら、こんな形になりました。

 

リボンの解説

投稿画面の内容です。

 

リボンの完成形はこちらです。

 

折り返し部分を離してみます。

 

この箇所はボーダーの一部なので、参考に上下左右のボーダーを加えてみます。実際に使用するのは右下部分です。こちらはCSSの内容です。

 

CSSからボーダー上を削除します。上半分が消えます。

 

CSSからボーダー左を削除します。左半分が消えます。

 

CSSのボーダー下を透明にします。ピンクだった部分が透明になります。ちなみにボーダー下を削除すると全部消えてしまいます。

 

上の四角にくっつけます。

 

右側も作ってみます。今度は上下左右のボーダーの左下部分を使用します。

 

完成です。

 

こちらはCSSの内容です。

 

問題点がありました

 リボンは個人的に気に入っているデザインです。このような理屈で作られていたんですね。

 右側の折り返し部分の位置を「right: 0;」で指定したのですが、うまくいきませんでした。他のデザインサンプルでも同じ症状でした。今回は「left: calc(100% - 20px);」にて対処しました。

よかったら参考にしてください。

ここまで読んでいただき、ありがとうございます。

もっと見る?
【まとめ】初心者向けワードプレスの使い方と小技集

初心者のみなさん向けに、ワードプレスの使い方や小技集を紹介しています。


-ワードプレス
-

© 2021 すべての初心者たちへ<オールビギナーズ>