アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css コンテンツ 新着情報

バッジの表示 ⇒ トップページの作り込み10

投稿日:

fontawsomeでお手軽バッジ

バッジを使うことは意外と多い。

特にネットショップの場合はランキングを表示することがほとんどで、その順位を表すのにバッジがよく使われる。

今までは画像でバッジを作っていたのだが、今回はfontawsomeでバッジを作ってしまおう。

やり方は、ピクトグラムと同じだ。

ピクトグラムでアイキャッチfontawsomeで簡単設定 ⇒ トップページの作り込み3

バッジを動かす

fontowsomeから適当な文字を選び、表示させる。

強調するために、アニメーションさせる。

<div class="amiens-badge">
<i class="fas fa-certificate faa-pulse animated"></i>
<p id="amiens-free">初回
無料</p>

</div>

css

.amiens-badge{
font-size: 2000%;
color: #fc0;
}
#amiens-free{
color: white;
font-family: sans-serif;
font-size: 70px;
line-height: 1.2em;
position: relative;
top:-320px;
left:80px;
transform:rotate(-15deg);
}

中に入れる文字を少し傾けてみた。
バッジっぽくなったかな。

-CMS, css, コンテンツ, 新着情報
-, ,

執筆者:

関連記事

before

カテゴリーのデザイン-サイドバーメニューの成形(3) ⇒ STINGER8設定その5

カテゴリーが長すぎる サイドバーのカテゴリーだが、項目数が多すぎて縦にやたら長くなってしまう。 そこで、第一階層をリストにして第二階層はボタンにして並べることにした。 まず、第二階層をボタン化 .ca …

Eストアーアワード2010フルーツ部門の年間第一位

武田青果がEストアーアワードのフルーツ部門で日本一に

武田青果がEストアーアワードのフルーツ部門で日本一に Eストアーアワード2010フルーツ部門の年間第一位 有限会社武田青果(高知県高知市弘化台19-14 電話088-882-5323 FAX088-8 …

Evernote

evernoteにwebページをクリッピングする便利な手法

みんな大好きevernote! 数あるクラウドサービスの中でも、特に利用者が多いと思われるのがevernoteだ。 片っ端からメモしていけるので、私はなんでもかんでもブッ込んじゃってる。 Everno …

ビール券をプレゼント

ビール券が当たる!QUOカードも当たる!応募はフォロー&ツイートするだけ。簡単応募の365日懸賞、好評開催中。

ビール券をプレゼント ビール券を2枚組にして2名様にプレゼント★グイッと飲んじゃってくださいねw★応募はフォロー&ツイートするだけ。twitterで簡単に応募できます #365kD9YX #3 …

メダルの背後にiPadあり 世界バレーで眞鍋監督が使っていたアプリの正体

Amplify’d from www.itmedia.co.jp  チームを指揮&#123 …