【CSS3分クッキング】ギザギザ丸、激安シール的なものを作ってみた。

スポンサーリンク

ギザギザ丸とかをCSSで作るアイデア。

よくスーパーとかで見かけるおなじみの「半額シール」。

WEB制作でアレがそのままニーズあるかというと微妙ですが、文字などを変えればLPなどでは使える場合もあるでしょう。

特に今回は、ギザギザ丸を再現してみたくてコード書いてみました。

はじめ、ネットで検索してこちらの記事を参考に見つけたコードをコピペしてみたのですが、何故かうまく行かなかったので自分でイチから書いてみました。

(でも、よく考えてみたらWordPressの管理画面上では表示おかしくても、プレビューや実際に記事更新してみないと分かりませんね)

 

思わぬトラブルが・・・

 
ギザギザ丸だけよりも、後ろに丸つけた方がより半額シールっぽいリアル感が出る気がします。

・・・と思ったら、表示されていません!( ゚Д゚)

「カスタムCSS」の所にコードを書いても、何故か記事更新すると消えてしまっています。。。

まだWordPressの勉強は進んでいないので、こういうのも自分で直せるようになりたいな。こないだも、英語で記事を書こうとしたらjsonエラーみたいのが出て原因不明だったし。

仕方ないので、アイキャッチ画像で我慢して下さい!

って、コード書かないと意味ないか^^;

 

・・・と思ったら、今度はコードを貼りつけると「正しいjsonレスポンスではありません」と表示されて記事更新ができない!!

WordPress・・・困りもんだわ。

タイトルの意味は?

ちなみに、タイトルに「CSS3分クッキング」なんて書いていますが、多分コード書くのに30分以上かかってます。><

私の書いたコードをコピペして頂ければ、3分でできますよ~!ってやりたかったんですが、肝心のコードを貼りつける事ができず・・・すみません(;´・ω・)

コードを貼れる、他の方法も探しておきますね。

CodePenで出来ました!

こちらです↓

(ちゃんと表示されてなくても、CodePenのサイトへ飛べば見られると思います)

[codepen_embed height=”265″ theme_id=”light” slug_hash=”mdJoZYR” default_tab=”css,result” user=”Kazu39″]See the Pen Gizagiza-maru by Kazu39 (@Kazu39) on CodePen.[/codepen_embed]

 

コメント

タイトルとURLをコピーしました