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

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

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

執筆者:

関連記事

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

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

実質は国内シェア96%を握る ヤフー・グーグル提携の波紋

Amplify’d from diamond.jp 実際に検索サイト&#12 …

before

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

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

ワードプレス

wordpressでedit.phpとplugins.phpが真っ白になるトラブル

「投稿」を表示しようとしても画面が真っ白になるトラブルが発生するようになった。edit.phpとplugins.phpでエラーが発生しているっぽい。手動で再度wordpressを全ファイルアップロード。結果、正常動作するようになった。

code-prettify

google code-prettifyでコード表示をハイライト(動作しないので焦るが解決済み) ⇒ STINGER8設定その2

google code-prettifyを導入 設定その1の記事内で、コードを記載した。 wordpessテーマのSTINGER8にしてみた ⇒ 設定その1 これを見てみると、preタグで囲んだだけだ …