クレジットカード関連のロゴをアイコンフォントとして使う方法

無料webサービス「PaymentFont」には、アイコンフォントとして無料で使用できる100種類近くのクレジットカードや決済代行サービス関連のロゴ(マーク)があります。 「VISA」をはじめ、「Master Card」「PayPal」amazon、ATMのマークなどもあります。

これらのロゴは画像ではでなく、アイコンフォントとして使えるので、CSSで各種ロゴのサイズ・色変更などの設定が楽々できます。 しかも画像アイコンと違ってアイコンフォントなので、どんなに拡大してもボケることなく綺麗に表示できます。

ネットショップやネットビジネスをしている方にとっては、とても役立つと思うので、このページではクレジットカード・決済関連のアイコンフォント集「PaymentFont」の使い方の紹介をしていきます。 ちなみにクレジットカード・決済代行関連のロゴは下記のような種類があります。

クレジットカード・決済代行関連のロゴ一覧

PaymentFontの使い方

「PaymentFont」の利用方法は次のような手順になってます。

  1. PaymentFontからファイルをダウンロード
  2. ダウンロードファイルをアップ
  3. アイコンフォントのCSSファイル呼び出し
  4. ロゴを表示したい場所にHTMLを記述

一見、面倒そうに見えますけど、ロゴを表示するまでに10分もかからないと思います。 またすべて無料で利用でき、会員登録なども一切ありません。

それでは順番に紹介していきますね。

PaymentFontからファイルをダウンロード

PaymentFontダウンロードボタンの場所

まずはPaymentFontにアクセスします。 ダウンロードボタンがあるのでクリック。

ダウンロードしたファイル(PaymentFont-master.zip)を解凍します。

※よくわからない場合はダウンロードしたファイルを右クリックし「すべて展開」を選択するか、またはダウンロードしたファイルをダブルクリックし中に1つだけフォルダが入っているので、それを切り取りデスクトップなどに貼り付けて下さい。

ファイルをアップロード

PaymentFont-masterのファイル構成

解凍すると上記のような「PaymentFont-master」というフォルダができます。 この中の「fonts」フォルダと「paymentfont.min.css」というファイルをffftpなどを使用しサーバーへアップロードします。 ただ面倒な場合はフォルダ「PaymentFont-master」ごとアップロードしても大丈夫です。 よくわからない場合は、HTMLファイルと同じ場所にアップして下さい。

ワードプレスの場合はテーマフォルダ直下にアップロードします。 このページでは「PaymentFont-master」ごとアップロードする方法で紹介していきます。

CSSファイルの呼び出し

先ほどアップロードしたCSSファイルを呼び出します。 HTMLファイルの<head>~</head>内に下記を記述して下さい。

※下記はHTMLファイルと同じ場所に「PaymentFont-master」をアップした場合

<link rel="stylesheet" type="text/css" href="PaymentFont-master/css/paymentfont.min.css">

ワードプレスの場合

ワードプレスの場合はheader.phpの<head>~</head>内に下記を記述します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/PaymentFont-master/css/paymentfont.min.css">

ワードプレスの子テーマの場合

ワードプレスの子テーマ内で呼び出す場合は下記を記述します。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/PaymentFont-master/css/paymentfont.min.css">

これで準備は完了です!

ロゴを表示したい場所にHTMLタグを記述

あとはクレジットカード・決済代行関連のロゴを表示したい場所に、HTMLを記述すればアイコンフォントが表示されます。 まずは表示したいロゴのHTMLコードを取得するために、PaymentFontにアクセスします。

ロゴ一覧のクリックする場所

アクセス後、下の方へスクロールするとロゴの一覧があるので使用したいロゴをクリックします。

ロゴをクリック後表示される画面

クリックすると上記のような画面が現れ、そのロゴのクラス名(class属性の値)がクリップボードにコピーされます。

コピーしたクラス名をHTMLタグのclass属性の値に貼り付けます。 例えば下記のように「class=""」「""」の中にコピーしたクラス名を貼り付けて下さい。

pf pf-paypal」というように併せてクラス名「pf」も記述してますが、これがないとアイコンフォントは表示されないので「class="pf コピーしたクラス名"」というように記述するようにして下さい。

※貼り付け方は「右クリック→貼り付け」、もしくはキーボードの「ctrl+v」となります。

<i class="pf pf-maestro-alt"></i>
<i class="pf pf-paypal"></i>
<i class="pf pf-paybox"></i>
表示されるクレジットカード・決済関連のアイコンフォント

こんな感じで表示されます。 ちなみに上記のはiタグに対してロゴのクラス名を指定していますが、spanタグやpタグに対して指定してもアイコンフォントは表示されます。

アイコンフォントのスタイル

各アイコンフォント(ロゴ)のスタイルを指定してみます。 例えば下記のように、通常のテキストのスタイルを設定する時と同じようにアイコンフォントのスタイルを指定できます。

.pf {
  font-size:100px;
  color:#fff;
  background:#ccc;
}
<i class="pf pf-maestro-alt"></i>
<i class="pf pf-paypal"></i>
<i class="pf pf-paybox"></i>
表示されるクレジットカード・決済関連のアイコンフォント

他にも適当にいじってみましたので、載せておきます。

.pf {
  font-size:40px;
  color:#333;
  border:solid 1px #333;
  border-radius:4px;
  padding:5px;
}
表示されるクレジットカード・決済関連のアイコンフォント
.pf {
  font-size:40px;
  color:#333;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
表示されるクレジットカード・決済関連のアイコンフォント

他にも文字色と背景を変更するだけで、下のようなよく見かけるような感じにもできます。

表示されるクレジットカード・決済関連のアイコンフォント

まとめ

いかがでしたでしょうか?

クレジットカードや決済代行サービス関連のロゴは、ネットショップとかをしていれば必ず必要になります。 そんな時、画像でのロゴもいいですけど、アイコンフォントだとかなり手軽に表示できますよ!

普段はあんまり使用する機会はないかもしれませんが、よければ使って見て下さいね(^^♪