QRコードの生成方法＆WordPressへの掲載方法【プラグイン不使用】

2022/11/03外部API

WordPressに限った話ではないですが、QRコードを作成することは実はとても簡単なんです。

この記事では、指定したURLのQRコードを生成し、WordPressに貼り付けて掲載する方法を紹介します。

QRコード生成用APIの使用方法

QRコードの作成には goQR.me が提供している「QR Code Generator」というAPIを使用します。

最も簡単にQRコードを埋め込むには、以下のコードをHTMLに埋め込むだけ。
シンプルで簡単ですね。
遷移先URLは書き換えてください。

<img src="https://api.qrserver.com/v1/create-qr-code/?data=遷移先URL" alt="" title="" />

遷移先URLに当サイトTOPページを設定したQRコードがこちら。

　

QR code APIのパラメータ

「QR Code Generator」には、QRコード生成のための各種パラメータが用意されています。
imgタグのsrc属性に &name=value という形式でパラメータを追加していきます。

sizeパラメータ

QRコードの画像サイズを指定するパラメータです。
PNG、JPEGなどのラスターデータを扱う場合はピクセル単位を指定します。
（ベクターデータは後述）

下記のフォーマットで記述します。

&size=100x100

QRコードは正方形なので、縦横に同じ値を設定する必要があります。
sizeパラメータを指定しない場合は「200×200」がデフォルトで設定されます。

　

marginパラメータ

QRコードの周りの余白の太さを指定するパラメータです。
ピクセル単位で0～50まで設定できます。

下記のフォーマットで記述します。

&margin=10

marginパラメータを指定しない場合は「1」がデフォルトで設定されます。

　

「size=100×100&margin=10」のQRコードを拡大した画像がこちら。

sizeパラメータで指定したサイズの外側に余白を設けるわけではなく、内側に余白ができる点にご注意ください。余白の分だけQRコード自体は小さくなります。
CSSに慣れている方にとっては、marginではなくpaddingと言ったほうが伝わりやすいかもしれません。

　

formatパラメータ

QRコードを生成する画像データのファイル形式を指定するパラメータです。
ラスターデータは、png、gif、jpeg。
ベクターデータは、svg、eps。

下記のフォーマットで記述します。

&format=svg

すべて小文字で記述する必要があるのでご注意ください。
formatパラメータを設定しない場合は「png」がデフォルトで設定されます。

　

colorパラメータ

QRコードの色を指定するパラメータです。
10進数もしくは16進数のカラーコードを設定します。

下記のフォーマットで記述します。

&color=ff00ff

colorパラメータを設定しない場合は「0-0-0」（黒）がデフォルトで設定されます。
QRコードは背景とのコントラストが非常に重要なので、公式では黒を使用することを推奨しています。

556B2F（ダークオリーブグリーン）を設定した場合のQRコードがこちら。

　

bgcolorパラメータ

QRコードの背景色を指定するパラメータです。
colorパラメータと同様に、10進数もしくは16進数のカラーコードを設定します。

下記のフォーマットで記述します。

&bgcolor=ff00ff

bgcolorパラメータを設定しない場合は「255-255-255」（白）がデフォルトで設定されます。
公式では白を使用することを推奨しています。

CCC（薄いグレー）を設定した場合のQRコードがこちら。

　

その他のパラメータ

他にもエンコード文字セットやECCなど細かいパラメータもあります。
詳しくは公式へ。

　

まとめ

WebサイトでQRコードを使う場面は限られるかもしれませんが、外部リンクとして埋め込んだり、印刷物に掲載する前提で管理画面に埋め込んだりと、工夫次第でさまざまな用途に使えそうです。