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

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

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

執筆者:

関連記事

ロゴを表示する

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

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

marquee

marqueeで電光掲示板風に文字を流す ⇒ トップページの作り込み8

marqueeとは marquee(マーキー)はインターネット黎明期にはやったテクニックだ。 電光掲示板のように文字が流れていくテクニックを指す。 ニコニコ動画を想像すれば、分かるだろう。

二科展

弊社専属デザイナーが第98回二科展で特選を受賞しました

弊社専属デザイナーが第98回二科展で特選を受賞しました。 弊社のデザインにおけるレベルの高さを証明する受賞であると、謹んでご報告申し上げます。

怪しいものではありません。簡単にauケータイでテザリングができる「NEX-fi」

Amplify’d from www.gizmodo.jp なんと、auケータイでテザリングができる周辺機器「NEX-fi」が発売されました。モバイルデータ通信定額対応機種に、このNEX-fiを接続す …

parallax

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

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