今回はアフィリエイト用ぶろぐパーツ[買ってよリンク]の紹介と、その使い方を解説します。
[買ってよリンク]とは
ぶろぐやアフィリエイトに取り組んでいる方であれば簡単リンクやカッテネをご存じの方も多いと思いますが、[買ってよリンク]を知っている方は少ないことでしょう。
[買ってよリンク]はぶろぐを始めたてで、ASPの審査が通らないかたや、すぐにアフィリエイトをやってみたい方の為に作った誰でも導入可能なアフィリエイト用ぶろぐパーツ(リンクボタン)です。
上記の[買ってよリンク]は、はてなブログ用にアレンジを加えたものですが、他のぶろぐでもWordPressでも導入可能です。
※アフィリエイトOKのサイトのみです。
リンク
上記の形(アマゾン含み)で簡単リンクを使用する為にはもしもアフィリエイトに登録し、アマゾンと楽天とそれぞれとの提携が必要になります。
カッテネのリンク
【こんな方におすすめ】
- プログラムを書いたことがない方
- 始めてみたけどつまづいている方
- HTMLとCSSを一緒に進めている方
このカッテネはWordPressのプラグインに存在するリンクボタンですが、元はCSSとHTMLで出来ているのでコードを抜き出して使う事も編集してアレンジを加えて使う事も出来ます。
リンクボタンの種類も豊富なので、何種類もボタンを付けたい場合はカッテネの導入もありだと思いますが、CSSコードでデザインの編集(アレンジ)には知識が必要になります。
[買ってよリンク]を使うメリット・デメリット
[買ってよリンク]メリット
簡単リンクやカッテネ同様の効果が[買ってよリンク]にはあります。
アフィリエイトはぶろぐやサイトからリンクを踏んでもらう切っ掛けを作るのが仕事になります。
そのためリンクボタンの選択肢はそのまま切っ掛けを作ることにつながり選択肢が無いという状況はそのまま機会損失=収益減につながります。
kamasanchi.hatenablog.com
[買ってよリンク]デメリット
[買ってよリンク]はHTMLの編集が絶対不可欠で、色々なサイトからパーツを持ってこなければ成立しません。
単純に簡単リンクを使う事が出来るならもしもアフィリエイトに登録して簡単リンクを使用することが効率的です。
[買ってよリンク]の使い方
[買ってよリンク]は簡単なHTMLの編集とSCCのコピペ(編集OK)で導入可能なアフィリエイトに取り組むためのぶろぐパーツです。
- はてなブログ用3リンクタイプ
- はてなブログ用2リンクタイプ
- どこでも用3リンクタイプ
- どこでも用2リンクタイプ
[買ってよリンク]各デザイン
1、はてなブログ用3リンクタイプ
【こんな方におすすめ】
- CSS・HTMLを学びたい方
- Webデザインを学びたい方
2、はてなブログ用2リンクタイプ
【こんな方におすすめ】
- CSS・HTMLを勉強中の方
- Webデザインを勉強中の方
AmazonのリンクだとわかるようにAmazonのアイコンを使用していますが楽天等の画像を使いたいときは楽天のアイコンにも変更することができます。
※後述します。
3,どこでも用3リンクタイプ
4,どこでも用2リンクタイプ
【こんな方におすすめ】
- ゆる副業を始めたい方
- スキマ時間を有効活用したい方
コピペ用[買ってよリンク]CSS&HTML
※編集方法は後述
HTML
<div class="hatena-katteyo">
<div class="hatena-katteyo-child">
<div class="hatena-katteyo-image">[画像リンク]</div>
<div class="hatena-katteyo-text">
<div class="hatena-katteyo-title">[テキストリンク]</div>
<div class="hatena-katteyo-description"><strong>【こんな方におすすめ】</strong>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
</div>
</div>
<div class="hatena-katteyo-btns">
<div class="hatena-katteyo-btns-child-black"><a target="_blank" rel="noopener" href="#">Amazonで確認</a></div>
<div class="hatena-katteyo-btns-child-red"><a target="_blank" rel="noopener" href="#">楽天市場で確認</a></div>
<div class="hatena-katteyo-btns-child-orange"><a target="_blank" rel="noopener" href="#">Yahoo!ショッピングへ</a></div>
</div>
</div>
CSS
.hatena-katteyo {
box-sizing: border-box;
width: 95%;
padding:10px 10px 5px 10px;
text-align:center;
border: 1.5px solid rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.hatena-katteyo-child {
display: inline-flex;
display: inline-flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-around;
align-content: center;
align-content: center;
width: 95%;
margin: 5px auto;
}
.hatena-katteyo-image {
text-align: center;
box-sizing: border-box;
max-width: 50%;
height: auto;
position: relative;
}
.hatena-katteyo-image:before {
font-family: blogicon;
content: "\f034";
margin-left:2px;
font-size: 0.8em;
position: absolute;
right:-18px;
bottom:3px;
color: #0000ff;
}
.hatena-katteyo-image:hover:before {
font-family: blogicon;
content: "\f009";
}
.hatena-katteyo-image img {
box-shadow: 1px 1px 5px -2px #aaaaaa;
margin: 0;
}
.hatena-katteyo-text {
box-sizing: border-box;
width: 100%;
height: auto;
text-align:left;
}
.hatena-katteyo-title a{
display:block;
text-decoration: none;
font-size: 0.9em;
color: #0000ff;
}
.hatena-katteyo-title a:after{
font-family: blogicon;
content: "\f034";
margin-left:2px;
font-size: 0.8em;
}
.hatena-katteyo-title a:hover:after{
font-family: blogicon;
content: "\f009";
}
.hatena-katteyo-description {
margin-top: 5px;
margin-left: 8px;
font-size: 0.8em;
}
.hatena-katteyo-btns {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-around;
align-content: center;
align-content: center;
box-sizing: border-box;
width: 99%;
margin: 0px auto;
}
.hatena-katteyo-btns a{
display:block;
border: 1.5px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
text-decoration: none;
font-weight:bold;
line-height:2.0;
text-align:center;
font-size: 0.9em;
border-radius: 8px;
color:#ffffff;
}
.hatena-katteyo-btns a:hover {
color: #000000;
}
.hatena-katteyo-btns a:hover:after{
font-family: blogicon;
content: "\f009";
font-size: 0.8em;
margin-left:2px;
}
.hatena-katteyo-btns img {
position: absolute;
}
.hatena-katteyo-btns-child-black{
width:85%;
margin: 5px auto;
}
.hatena-katteyo-btns-child-black a {
background: #000000;
}
.hatena-katteyo-btns-child-black a:hover {
background-color: #aaaaaa;
}
.hatena-katteyo-btns-child-red{
width:85%;
margin: 5px auto;
}
.hatena-katteyo-btns-child-red a {
background: #ff0000;
}
.hatena-katteyo-btns-child-red a:hover {
background-color: #ffddff;
}
.hatena-katteyo-btns-child-orange{
width:85%;
margin: 5px auto;
}
.hatena-katteyo-btns-child-orange a {
background: #ff9900;
}
.hatena-katteyo-btns-child-orange a:hover {
background-color: #ffee11;
}
@media (min-width: 601px) {
.hatena-katteyo-image {
width: 22%;
}
.hatena-katteyo-text {
margin-left: 5px;
width: 75%;
}
.hatena-katteyo-btns-child-black{
width:32%;
}
.hatena-katteyo-btns-child-red{
width:32%;
}
.hatena-katteyo-btns-child-orange{
width:32%;
}
}
HTML
<div class="hatena-katteyo2">
<div class="hatena-katteyo2-child">
<div class="hatena-katteyo2-image">[画像リンク]</div>
<div class="hatena-katteyo2-text">
<div class="hatena-katteyo2-title">[テキストリンク]</div>
<div class="hatena-katteyo2-description"><strong>【こんな方におすすめ】</strong>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
</div>
</div>
<div class="hatena-katteyo2-btns">
<div class="hatena-katteyo2-btns-child-black"><a target="_blank" rel="noopener" href="#">Amazonで確認</a></div>
<div class="hatena-katteyo2-btns-child-red"><a target="_blank" rel="noopener" href="#">楽天市場で確認</a></div>
</div>
</div>
CSS
.hatena-katteyo2 {
box-sizing: border-box;
width: 95%;
padding:10px 10px 5px 10px;
text-align:center;
border: 1.5px solid rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.hatena-katteyo2-child {
display: inline-flex;
display: inline-flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-around;
align-content: center;
align-content: center;
width: 95%;
margin: 5px auto;
}
.hatena-katteyo2-image {
text-align: center;
box-sizing: border-box;
max-width: 50%;
height: auto;
position: relative;
}
.hatena-katteyo2-image:before {
font-family: blogicon;
content: "\f034";
margin-left:2px;
font-size: 0.8em;
position: absolute;
right:-18px;
bottom:3px;
color: #0000ff;
}
.hatena-katteyo2-image:hover:before {
font-family: blogicon;
content: "\f009";
}
.hatena-katteyo2-image img {
box-shadow: 1px 1px 5px -2px #aaaaaa;
margin: 0;
}
.hatena-katteyo2-text {
box-sizing: border-box;
width: 100%;
height: auto;
text-align:left;
}
.hatena-katteyo2-title a{
display:block;
text-decoration: none;
font-size: 0.9em;
color: #0000ff;
}
.hatena-katteyo2-title a:after{
font-family: blogicon;
content: "\f034";
margin-left:2px;
font-size: 0.8em;
}
.hatena-katteyo2-title a:hover:after{
font-family: blogicon;
content: "\f009";
}
.hatena-katteyo2-description {
margin-top: 5px;
margin-left: 8px;
font-size: 0.8em;
}
.hatena-katteyo2-btns {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-around;
align-content: center;
align-content: center;
box-sizing: border-box;
width: 99%;
margin: 0px auto;
}
.hatena-katteyo2-btns a{
display:block;
border: 1.5px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
text-decoration: none;
font-weight:bold;
line-height:2.0;
text-align:center;
font-size: 0.9em;
border-radius: 8px;
color:#ffffff;
}
.hatena-katteyo2-btns a:hover {
color: #000000;
}
.hatena-katteyo2-btns a:hover:after{
font-family: blogicon;
content: "\f009";
font-size: 0.8em;
margin-left:2px;
}
.hatena-katteyo2-btns img {
position: absolute;
}
.hatena-katteyo2-btns-child-black{
display: inline;
width:85%;
margin: 5px auto;
}
.hatena-katteyo2-btns-child-black a {
background: #000000;
}
.hatena-katteyo2-btns-child-black a:hover {
background-color: #aaaaaa;
}
.hatena-katteyo2-btns-child-red{
display: inline;
width:85%;
margin: 5px auto;
}
.hatena-katteyo2-btns-child-red a {
background: #ff0000;
}
.hatena-katteyo2-btns-child-red a:hover {
background-color: #ffddff;
}
@media (min-width: 601px) {
.hatena-katteyo2-image {
width: 22%;
}
.hatena-katteyo2-text {
margin-left: 5px;
width: 75%;
}
.hatena-katteyo2-btns-child-black{
width:48%;
}
.hatena-katteyo2-btns-child-red{
width:48%;
}
}
3、どこでも用3リンクタイプ
HTML
<div class="katteyo">
<div class="katteyo-child">
<div class="katteyo-image">[画像リンク]</div>
<div class="katteyo-text">
<div class="katteyo-title">[テキストリンク]</div>
<div class="katteyo-description"><strong>【こんな方におすすめ】</strong>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
</div>
</div>
<div class="katteyo-btns">
<div class="katteyo-btns-child-black"><a target="_blank" rel="noopener" href="#">Amazonで確認</a></div>
<div class="katteyo-btns-child-red"><a target="_blank" rel="noopener" href="#">楽天市場で確認</a></div>
<div class="katteyo-btns-child-orange"><a target="_blank" rel="noopener" href="#">Yahoo!ショッピングへ</a></div>
</div>
</div>
CSS
.katteyo {
box-sizing: border-box;
width: 95%;
padding:10px 10px 5px 10px;
text-align:center;
border: 1.5px solid rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.katteyo-child {
display: inline-flex;
display: inline-flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-around;
align-content: center;
align-content: center;
width: 95%;
margin: 5px auto;
}
.katteyo-image {
text-align: center;
box-sizing: border-box;
max-width: 50%;
height: auto;
position: relative;
}
.katteyo-image img {
box-shadow: 1px 1px 5px -2px #aaaaaa;
margin: 0;
}
.katteyo-text {
box-sizing: border-box;
width: 100%;
height: auto;
text-align:left;
}
.katteyo-title a{
display:block;
text-decoration: none;
font-size: 0.9em;
color: #0000ff;
}
.katteyo-description {
margin-top: 5px;
margin-left: 8px;
font-size: 0.8em;
}
.katteyo-btns {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-around;
align-content: center;
align-content: center;
box-sizing: border-box;
width: 99%;
margin: 0px auto;
}
.katteyo-btns a{
display:block;
border: 1.5px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
text-decoration: none;
font-weight:bold;
line-height:2.0;
text-align:center;
font-size: 0.9em;
border-radius: 8px;
color:#ffffff;
}
.katteyo-btns a:hover {
color: #000000;
}
.katteyo-btns img {
position: absolute;
}
.katteyo-btns-child-black{
width:85%;
margin: 5px auto;
}
.katteyo-btns-child-black a {
background: #000000;
}
.katteyo-btns-child-black a:hover {
background-color: #aaaaaa;
}
.katteyo-btns-child-red{
width:85%;
margin: 5px auto;
}
.katteyo-btns-child-red a {
background: #ff0000;
}
.katteyo-btns-child-red a:hover {
background-color: #ffddff;
}
.katteyo-btns-child-orange{
width:85%;
margin: 5px auto;
}
.katteyo-btns-child-orange a {
background: #ff9900;
}
.katteyo-btns-child-orange a:hover {
background-color: #ffee11;
}
@media (min-width: 601px) {
.katteyo-image {
width: 22%;
}
.katteyo-text {
margin-left: 5px;
width: 75%;
}
.katteyo-btns-child-black{
width:32%;
}
.katteyo-btns-child-red{
width:32%;
}
.katteyo-btns-child-orange{
width:32%;
}
}
4、どこでも用2リンクタイプ
HTML
<div class="katteyo2">
<div class="katteyo2-child">
<div class="katteyo2-image">[画像リンク]</div>
<div class="katteyo2-text">
<div class="katteyo2-title">[テキストリンク]</div>
<div class="katteyo2-description"><strong>【こんな方におすすめ】</strong>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
</div>
</div>
<div class="katteyo2-btns">
<div class="katteyo2-btns-child-black"><a target="_blank" rel="noopener" href="#">Amazonで確認</a></div>
<div class="katteyo2-btns-child-red"><a target="_blank" rel="noopener" href="#">楽天市場で確認</a></div>
</div>
</div>
CSS
.katteyo2 {
box-sizing: border-box;
width: 95%;
padding:10px 10px 5px 10px;
text-align:center;
border: 1.5px solid rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.katteyo2-child {
display: inline-flex;
display: inline-flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-around;
align-content: center;
align-content: center;
width: 95%;
margin: 5px auto;
}
.katteyo2-image {
text-align: center;
box-sizing: border-box;
max-width: 50%;
height: auto;
position: relative;
}
.katteyo2-image img {
box-shadow: 1px 1px 5px -2px #aaaaaa;
margin: 0;
}
.katteyo2-text {
box-sizing: border-box;
width: 100%;
height: auto;
text-align:left;
}
.katteyo2-title a{
display:block;
text-decoration: none;
font-size: 0.9em;
color: #0000ff;
}
.katteyo2-description {
margin-top: 5px;
margin-left: 8px;
font-size: 0.8em;
}
.katteyo2-btns {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-around;
align-content: center;
align-content: center;
box-sizing: border-box;
width: 99%;
margin: 0px auto;
}
.katteyo2-btns a{
display:block;
border: 1.5px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
text-decoration: none;
font-weight:bold;
line-height:2.0;
text-align:center;
font-size: 0.9em;
border-radius: 8px;
color:#ffffff;
}
.katteyo2-btns a:hover {
color: #000000;
}
.katteyo2-btns img {
position: absolute;
}
.katteyo2-btns-child-black{
display: inline;
width:85%;
margin: 5px auto;
}
.katteyo2-btns-child-black a {
background: #000000;
}
.katteyo2-btns-child-black a:hover {
background-color: #aaaaaa;
}
.katteyo2-btns-child-red{
display: inline;
width:85%;
margin: 5px auto;
}
.katteyo2-btns-child-red a {
background: #ff0000;
}
.katteyo2-btns-child-red a:hover {
background-color: #ffddff;
}
@media (min-width: 601px) {
.katteyo2-image {
width: 22%;
}
.katteyo2-text {
margin-left: 5px;
width: 75%;
}
.katteyo2-btns-child-black{
width:48%;
}
.katteyo2-btns-child-red{
width:48%;
}
}
[買ってよリンク]HTML編集方法
はてなブログや、WordPressではHTMLでの編集が可能です。
<style></style>(スタイルタグ)を使って記事編集ページを利用して作るとデザインを確認しながら作ることができるのでおすすめです。
※<style></style>(スタイルタグ)はHTML編集でCSSを記述できるタグで間にCSSを入れ込むだけです。
- 画像のリンクを差し込む
- タイトル(テキスト)リンクを差し込む
- おすすめを箇条書きする(任意)
- 各ボタンのURLorテキストリンクを差し込む
画像のリンクを差し込む
アフィリエイトで使用する画像は著作権等の問題を回避する為になるべく画像タイプのリンクを差し込んだ方が無難です。
※自作の画像(写真)は問題ありません。
Amazonアソシエイトは誰でも登録可能なAmazon専用のアフィリエイトASPです。
ですが、登録後一定期間以内に3件の成果を上げなければアカウントがなくなってしまうので注意も必要です。
※何度でもリトライ可能です。
まだAmazonアソシエイトの登録をしていない方はコチラから登録をしておきましょう。
Amazonアソシエイトの商品検索では商品名、Amazonの商品ページURL、ASIN等の商品コードから検索することができ、検索後、対象の商品がみつかったらリンク作成ボタンを押して該当商品のアフィリエイトリンク作成ページへと進みます。
該当商品のアフィリエイトリンク作成ページへ進んだら、画像のみを選択し、対象のHTMLコードをコピーし[画像リンク]と差し替えます。
Amazonアソシエイトではなく、楽天アフィリエイトから画像を持ってくることも出来ますが、そこは任意です。
ただ、はてなブログ用ではAmazonのアイコンを使用しているのでCSSの変更も必要になります。
kamasanchi.hatenablog.com
タイトル(テキスト)リンクを差し込む
テキストリンクもAmazonアソシエイトから持ってくるとそのままの流れで作れるのでおすすめです。
テキストのみを選択すると、テキストリンクのHTMLを生成できるのでそのまま[テキストリンク]部分と差し替えるだけです。
おすすめを箇条書きする
使用すると、もしかするとクリック率が上昇する可能性もありますが、書いてある言葉によっては下がる原因になる場合もあります。
各ボタンのURLorテキストリンクを差し込む
買ってよリンクではテキストリンク、URLのどちらでも使用できるようにつくってあるので任意(使用可能な)の方法で使い分けして大丈夫です。
テキストリンク用のHTMLを使ってボタンにしたい場合は<a~・・・~/a>までのHTMLをまるまる入れ替え、URLを使ってリンクボタンを作りたい場合は#をURLに挿しかえます。
Amazonリンクボタンの場合
AmazonアソシエイトのテキストリンクHTMLを生成するページではテキストを書き換えることが可能で、リンクを選択するとアフィリエイト用のURLも生成できます。
楽天リンクボタンの場合
楽天アフィリエイトは楽天ユーザーであればだれでも利用することができるサービスなので、楽天ユーザーであれば楽天アフィリエイトを開きログインするだけで大丈夫ですが、楽天ユーザー登録をしたことがない場合はまず楽天会員になる必要があります。
※検索に引っかかるかわかんないので…
楽天アフィリエイトにログインすると商品検索ができます。
商品を検索し、該当の商品が出てきたら商品リンク(作成ボタン)を押すとアフィリエイトリンク生成ページへと移行します。
※楽天アフィリエイトで取得したテキストリンクHTMLのテキスト部分は編集しても大丈夫ですが、編集時のルール等も存在するのでURLで利用しておいた方が無難です。
Yahoo!ショッピングリンクボタンの場合
利用しない場合は[買ってよリンク]の2リンクタイプを利用していただければここまでの手順で完成していますが、リンクボタンを一つ減らすとその分、成果への機会を減らすことにつながるのでそのまま損失であると言えます。
Yahoo!ショッピングと提携が可能なASPはもしもアフィリエイトとバリューコマースです。
どちらも、審査が存在しますが、出来たてのぶろぐサイトでも最低限必要な事ができているサイトであれば審査に通過できます。
※正しく運営している証明としてお問い合わせや、プライバシーポリシーの設置、数記事の投稿が完了している状態を作りましょう。
※どちらも審査に通過すればYahoo!ショッピングが提携先に入っているはずです。
まず、もしもアフィリエイトへログインし、提携中のプログラム一覧からYahoo!ショッピングの「広告リンクへ」もしくは「どこでもリンクへ」をクリックするとアフィリエイトHTML生成ページへと移行します。
アフィリエイトリンクHTMLの生成ページ(どこでもリンク)ではYahoo!ショッピングの任意のページからURLを引っ張て来てテキストリンクのHTMLが生成できます。
任意のURLを「リンク先」に入力し「リンクテキスト」に表示したい文字を打ち込み、「どこでもリンクを作成する」をクリックすると必要なHTMLが生成され、生成されたHTMLを[買ってよリンク]のYahoo!ショッピングコード内<a~・・・~/a>を差し替えるとYahoo!ショッピングのリンクボタンが出来上がります。
アフィリエイト用ぶろぐパーツ[買ってよリンク]まとめ
[買ってよリンク]はHTMLとCSSをコピペして使えるぶろぐの収益化したい方向けのアフィリエイト用ぶろぐパーツです。
任意の(使いたい)タイプのCSSとHTMLをコピーして各ぶろぐで所定の場所に貼り付けHTMLを編集することで使用することができます。
編集箇所は[画像][商品タイトル(テキストリンク)][おすすめ箇条書きリスト][各種リンクボタン]の4つです。
※今度記事にします。
アフィリエイトをやってみたいという方がいましたら是非[買ってよリンク]を活用してみてください。
あとがき
[買ってよリンク]の使い方を解説しましたが、あくまで[買ってよリンク]はASPのAmazon提携が通っていない方や、お試しでアフィリエイトに取り組んでみたいという方向けのぶろぐパーツになります。
ASPでAmazon、楽天の提携が承認されたら簡単リンクなどに切り替えていく方が正直作業効率は全然良いです。
ちなみにですが…もしもアフィリエイトもバリューコマースもどちらのASPにもAmazonと楽天とのアフィリエイト提携が可能ですが、審査が存在します。
ですがAmazonは少しぶろぐサイトを育てないと提携が承認されないので、ぶろぐサイトが育つ(承認される)まで代替え品としての利用をおすすめします。
※ただ、アマチュアWebデザイナーが作ったという認識はしておいてください。
やっぱりネーミングセンスないですよね…