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

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

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

執筆者:

関連記事

domo Todo+

iPhoneの神アプリをおすすめ【3】domo Todo+

私のiPhoneのホーム画面1画面目に鎮座する神アプリを紹介するシリーズ。 1画面目のヘビーに使い込んでいるiPhoneアプリ 第3回目は、domo Todo+を紹介する。 domo Todo+ do …

parallax

パララックス効果で画像を動かす ⇒ トップページの作り込み2

パララックス効果とは パララックス効果は、2つの要素を別々に動かすことで視覚的な効果を与えることだ。 iPhoneを動かすと、iPhoneのホーム画面上でアプリのアイコンが微妙にずれる、あの効果だ。 …

ロゴを表示する

レスポンシブ対応のロゴを表示する ⇒ STINGER8設定その11

ロゴを表示する STINGER8にして、アミアンインターナショナルのロゴが表示されなくなった。 これは少々まずい。 そこで、背景画像として表示させるようにした。 スマートフォン スマートフォンでは、現 …

iPhone OS 4の「iAd」はモバイル広告を変えるか?

Amplify’d from ascii.jp AppleのiAd広告配信、電通が日本で展開へ iPhone OS 4の「iAd」はモバイル広告を変えるか? アップルが2010年初頭、モバイル広告の米 …

Dropboxから乗り換えるべき? トレンドマイクロの容量無制限オンラインストレージ「SafeSync」の実力は?

Amplify’d from trendy.nikkeibp.co.jp SafeSyncの最大の魅力は、年間4980円を支払えば保存容量が無制限という点だ。普段、Dropboxを使いながら「保存容量 …