AIを用いてブログデザインを弄るシリーズも第3弾になった。
前回、第2回のCTA改善の話はこちら。
→ https://www.konna-mono.fun/ai-blog02/
第1回から読んで頂ける方はこちら。
→ https://www.konna-mono.fun/ai-blog01/
相変わらずアクセスに関する改善は模索中なので、色々これからも手を入れていかなければならないのだけれど、今回の改善点は商品リンクについてだ。
商品リンクの張り方について相談してみた
Amazonリンクをショートコードを使って貼ろう
デザインにCocoonを使っている話は以前もさせて貰った。
なかなか優秀なデザインで、カスタマイズ性も高い。慣れるために最初に導入するならばかなり使えると思う。
で、このCocoonは至れり尽くせりで、Amazonやら楽天のリンクを貼るにも、ショートコードの利用が出来るようになっている。
楽天のリンクも似たような手順で貼ることが可能なので試して欲しい。
だが、使ってみると分かると思うのだけれど……。
Amazonのリンクに関して言うと、PA-APIという仕組みを使っていることもあって、売上げが発生していないと利用できないという制約がある。
だから、売上げがなくなるとこれがエラーで返される。
この辺りのトラブルはこちらで触れている。
→ https://www.konna-mono.fun/link-err-03/
つまり、売れているうちは便利に使えるんだけど、売上げがなくなるとリンクが使えなくなるという負の連鎖に陥ってしまう。
代替案はないの？
というわけで、困った挙げ句にChatGPTに相談してみた。
Amazonのリンクが貼れないので、代替案を提案して。
楽天リンクを貼りましょう（約意）
そうくるか！
楽天のリンクを利用すると、こんな感じになる。
悪くはないよね。
ただ、この楽天リンクさん、個人的な印象で申し訳ないんだけど、リンク切れを起こしやすい気がする。
そして、このままだと文字数が多いこともあって、好みではない。デザインの融通も利かないし。
CSSを利用したい
で、ちゃっぴーに「ちょっと好みじゃない」旨を伝えて、別の方法を提案して貰った。
カード風デザインじゃなくて、ボタン風にして、Amazonのリンクと楽天のリンクを並べたいんだけど、できる？
できらぁ！
うん、チャッピーはそんなこと言わないよね。
とりあえずは、ショートコードで作った風のボタンを作って貰うことに。
こんな感じのボタンになる。
HTMLのテンプレートは以下の通り。これは記事内にコードとして貼る。リンク部分は調べて都度自分で入れる感じになる。
<div class="affiliate-product-card">
<div class="product-title"><strong>商品名例</strong></div>
<div class="affiliate-links">
<a href="https://www.amazon.co.jp/xxxxxxxxx" target="_blank" rel="nofollow noopener" class="btn-link btn-amazon">
Amazonで購入
</a>
<a href="https://a.r10.to/hxxxxxx" target="_blank" rel="nofollow noopener" class="btn-link btn-rakuten">
楽天で購入（ポイント還元あり）
</a>
</div>
<p class="affiliate-note">※価格・在庫は各サイトでご確認ください。</p>
</div>そして、これのCSSがこちら。こちらは、「外観＞カスタマイズ」と進んで、「追加CSS」のところに貼る。
/* 商品カード全体 */
.affiliate-product-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 1em;
margin: 1.5em 0;
background-color: #fafafa;
}
/* タイトルを太字にする */
.product-title {
font-weight: bold;
font-size: 1.1em;
margin-bottom: 0.8em;
}
/* ボタンリンクを横並びにする */
.affiliate-links {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
/* 共通ボタンスタイル */
.btn-link {
flex: 1;
text-align: center;
padding: 0.6em 1em;
border-radius: 6px;
color: #fff;
font-weight: bold;
text-decoration: none;
font-size: 0.95em;
transition: opacity 0.2s;
}
.btn-link:hover {
opacity: 0.85;
}
/* Amazonボタン */
.btn-amazon {
background-color: #FF9900;
}
/* 楽天ボタン */
.btn-rakuten {
background-color: #BF0000;
}
/* 注意文 */
.affiliate-note {
font-size: 0.8em;
color: #555;
margin-top: 0.6em;
}使う場合には、記事中に「カスタムHTML」として、上の方のテンプレート（パターンに登録しておくと呼び出しやすい）を貼り、必要なリンクを各サイトから取得してきて埋め込む。
具体的にはこうなる。
なるほど、もうちょっと改善の余地はあるけど、悪くはないんじゃないかな。
改変をお願いしてみる
じゃあ、次に。
ありがちなレイアウトではあるが、タイトルとボタンの間に画像を持ってきてみよう。
タイトルの下でリンクの上に任意の画像リンクを入れて！
できます。
ご希望どおり 「タイトル → 任意画像（中央寄せ） → Amazon / 楽天ボタン横並び」 の構造にします。
ふむふむ。提案されたHTMLはこんな感じ。
<div class="affiliate-product-card">
<div class="product-title"><strong>商品名例</strong></div>
<div class="affiliate-image">
<a href="https://example.com">
<img src="画像URLをここに">
</a>
</div>
<div class="affiliate-links">
<a href="AmazonリンクURL" target="_blank" rel="nofollow noopener" class="btn-link btn-amazon">
Amazonで購入
</a>
<a href="楽天リンクURL" target="_blank" rel="nofollow noopener" class="btn-link btn-rakuten">
楽天で購入
</a>
</div>
<p class="affiliate-note">※価格・在庫は各サイトでご確認ください。</p>
</div>CSSはこんな感じだ。
/* 商品カード */
.affiliate-product-card{
border:1px solid #ddd;
border-radius:8px;
padding:1em;
margin:1.5em 0;
background:#fafafa;
}
/* 商品タイトル */
.product-title{
font-weight:bold;
font-size:1.1em;
margin-bottom:0.7em;
}
/* 商品画像 */
.affiliate-image{
text-align:center;
margin-bottom:0.9em;
}
.affiliate-image img{
max-width:250px;
height:auto;
}
/* ボタンエリア */
.affiliate-links{
display:flex;
gap:1em;
}
/* 共通ボタン */
.btn-link{
flex:1;
text-align:center;
padding:0.65em;
border-radius:6px;
color:#fff;
font-weight:bold;
text-decoration:none;
font-size:0.95em;
}
/* Amazonボタン */
.btn-amazon{
background:#FF9900;
}
/* 楽天ボタン */
.btn-rakuten{
background:#BF0000;
}
/* 注意書き */
.affiliate-note{
font-size:0.8em;
color:#555;
margin-top:0.6em;
}これを使うと、こうなる。
うーん、もうちょっと弄っても良いような、そうでないような。まあ、一先ずはこれで。
まとめ
AIを利用してコードを書いて貰い、ブログのデザインを改善する試み。今回は、商品リンクを整えて貰った。
もう少し見た目の改善をするつもりなので後で追記するが、たたき台としては悪くないと思う。トライアンドエラーが必要なデザイン変更だけれど、圧倒的に早いのでオススメではある。
でも、自分の中で明確なデザイン案があるともっと楽になるので、やっぱりHTMLデザインの勉強は必要だろう。
コメント