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

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

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, コンテンツ, 新着情報
-, ,

執筆者:

関連記事

no image

0120921947

光サポートと名乗る会社から電話。 なぜ電話番号を知っているのか尋ねたら、電話帳で調べてかけていると返答。 電話番号を電話帳に載せていないのにw 個人情報の違法な取得の疑いがあるので説明を求めた。 「担 …

フェイスブック

facebookのファンページを作りました

先日、宮松さんとお会いしたときに「facebookのファンページをすぐ作るべきだ」とご指摘いただき、さっそく作成した。 と言いつつファンページは以前から作ってはいたのだが、FBMLとか面倒くさそうで放 …

卯

年賀状を年内に出して販促するという手法

毎年、年賀状は締切間際になって慌てて書いている。 どうやら今年も同じことになりそうだ。 なにせamazonでプリンターのインクを注文したのは今日だし ←遅いって…(汗;) 年賀状の「年賀」部分を塗りつ …

365日懸賞

ツイッターで応募できる懸賞企画がスタート

有限会社マップ高知(高知県高知市知寄町1-5-1 電話088-880-0770 FAX088-884-3700 http://www.ewalk.ne.jp/map/)は、2011年3月1日、ツイッタ …

H2タグ

H2タグを修飾 ⇒ STINGER8設定その9

H2タグの設定 サイドバーのデザイン設定はひとまず終えたので、コンテンツエリアの設定を始める。 まず気になっていたのが、H2のバランスが悪いことだ。 STINGER8のデフォルトでは、上下にsolid …