BloggerにおしゃれなアフィリエイトBOXを貼り付ける方法

byRara -9月 11, 2023

0

アフィリエイトマーケティングは、ブログから収入を得るための素晴らしい方法です。

アフィリエイトリンクを通じて製品やサービスを宣伝することで、あなたの紹介による売上からコミッションを得ることができます。

アフィリエイトリンクをより魅力的でクリックしやすいものにする方法の1つは、スタイリッシュなアフィリエイトボックスを作成することです。

BloggerサイトにCSSコードを貼り付ける方法がわからない場合は、

こちらの記事を参考にしながら進めてください。

このガイドでは、あなたのBloggerブログにスタイリッシュなアフィリエイトボックスを作成し、貼り付ける方法を説明します。

{tocify} $title={目次}

アフィリエイトBOXの例

商品名

ここに商品説明が入ります。

アマゾンで購入レビューを読む

アフィリエイトBOXのCSSコード

Bloggerサイドバーの「テーマ」から「HTMLを編集」をクリックします。

]]></b:skin>

「]]></b:skin>」の前に以下のコードを貼り付けて下さい。

※Ctrl+Fで探したいコードをコピーして貼り付ければ（Ctrl+V）、簡単に探し出すことが出来ますよ。Macの場合は、Ctrlが「Command」となります。

.affiliate-box {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

.affiliate-box__image {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.affiliate-box__heading {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.affiliate-box__text {
  font-size: 18px;
  margin-bottom: 20px;
}

.affiliate-box__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.affiliate-box__link {
  display: inline-block;
  background-color:#FF9900;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  margin-right: 10px;
  margin-bottom: 10px;
}

.affiliate-box__link--primary {
  background-color: #dc3545;
}

.affiliate-box__link:hover {
  background-color: #FFB84D;
}

.affiliate-box__link--primary:hover {
  background-color: #ff6464;
}

もし、「]]></b:skin>」の中にCSSコードを挿入してもうまくいかない場合は、代わりに<style>の直後にコードを挿入してみて下さい。

※当Bloggerブログでは、<style>タグの後にCSSコードを挿入しています。

アフィリエイトBOXのHTMLコード

Bloggerの投稿編集画面のHTML編集などにこのコードを貼り付けましょう。

<div class="affiliate-box">
  <img alt="Product Image" class="affiliate-box__image" src="https://example.com/product-image.jpg" />
  <div class="affiliate-box__heading">Product Name</div>
  <p class="affiliate-box__text">Product description goes here.</p>
  <a class="affiliate-box__link" href="https://example.com/affiliate-link">Buy on Amazon</a>
  <a class="affiliate-box__link affiliate-box__link--primary" href="https://example.com/review-link">Read Reviews</a>

アフィリエイトリンクを正しく機能させるために、「example.com」を実際のアフィリエイトリンクのURLに置き換える必要があることに注意してください。

さらに、製品に適した画像を選択し、imgタグのsrc属性の「https://example.com/product-image.jpg」の部分をアフィリエイト商品の画像などのURLに置き換えましょう。

赤色のリンクボックスを削除したい場合は、

<a class="affiliate-box__link affiliate-box__link--primary" href="https://example.com/review-link">Read Reviews</a>

このコードを削除して下さい。

今回のこのHTML/CSSコードはChatGPTにより作成されました。

ChatGPTは、OpenAIが開発した強力な言語モデルで、さまざまなコンテンツを生成する能力を備えています。

ChatGPTが特に役立つのは、アフィリエイトボックスのようなクリエイティブなデザインです。

デザインに関しては、すべてのアイデアが形になるとは限りませんが、適切な指示を与えることで、ChatGPTは短時間でユニークで人目を引くデザインを作成するのに役立ちます。

アフィリエイトボックスを作成する場合、ChatGPTに一般的なガイドラインとアイデアを提供し、残りの部分はそのモデルに任せることができます。

ウェブサイトやマーケティングキャンペーンのための創造的なデザインを考え出すのに苦労している場合は、ChatGPTをためらわずに試してみてください！

あなたは専用に生成される驚くべきデザインによって驚かされるかもしれませんよ。

成功するBloggerブログを始めたいなら、この完全ガイドを見逃す手はありません。

SEOを考慮したブログの設計から、データ分析を利用した魅力的なコンテンツの作成まで、成功に必要なすべてをご紹介しています。

今すぐ記事をチェック！

ブログ運営におすすめの便利グッズ

Bloggerのブログ運営において、長時間のパソコン作業が欠かせないことは言うまでもありません。

しかし、その作業が快適に進むためには、便利なツールが必要不可欠です。

そこで、私自身がブログ運営をしている中で便利だと思った商品を紹介します。

まずは、小さめのワイヤレスマウス。

コンパクトなサイズゆえに、どこでも持ち運びができるため、どこでも作業ができます。

また、クリック音が静かなものが多いので、周りの家族や同居人に迷惑をかけることもありません。

作業に集中したいブロガーには必須アイテムと言えるでしょう。

ワイヤレスマウス Bluetoothマウス

このデュアルモードマウスは、2.4GワイヤレスとBluetoothの両方の接続が可能で、七色バックライトも搭載。クリック音が静音で充電式バッテリーを内蔵しており、超薄型で人間工学に基づいたデザインが特徴的である。また、USBレシーバーはマウスの底に収納されている。

Amazonで今すぐ購入

次に、ワイヤレスイヤホン。

ブログ運営中は音楽を聴きながら記事を書いたり、YouTube動画を視聴することが多いかもしれません。

しかし、イヤホンのワイヤが邪魔だったり、絡まったりすることがストレスになることもあります。

そこで、ワイヤレスイヤホンの使用がおすすめです。

また、ワイヤがないため、家事をしながらでも音楽を楽しむことができます。

【 2023 新型 Bluetooth5.3 】Bluetoothイヤホン

Bluetooth5.3 EDRワイヤレスイヤホンは、消費電力が少なく、伝送容量、接続の安定性が向上している。ノイズキャンセリング機能も搭載され、ZOOMやビジネス会議で活躍できる。音質も良く、AAC/SBCに対応し、大容量バッテリーで最大60時間の音楽再生が可能。

Amazonで今すぐ購入

最後に、バックパックリュックサック。

ブロガーは外出先でも記事を書いたり、撮影したりすることがあるため、荷物をまとめる必要があります。

バックパックリュックサックは、荷物をしっかりとまとめることができるだけでなく、背負っているだけで体への負担も軽減されます。

また、カジュアルなデザインなので、スタイリッシュに外出することができます。

SUNOGE リュック

このバッグは、機内持ち込み可能。防水性能があり、乾湿分離ポケットもある。外部USBポートと盗難防止の隠しポケットがあり、人間工学に基づいた肩ヒモとチェストベルトが装備されている。3WAY仕様で、通勤、出張、通学、旅行など様々なシーンに使える。

Amazonで今すぐ購入

以上が私自身がブログ運営で役立ったと感じた商品の紹介です。

商品のデザインの好みもあると思うので、関連する商品を見て吟味するのもおすすめです。

これらのツールを使うことで、より快適に記事を作成することができるでしょう。

Tags: Blogger テクノロジー

コメントを投稿 (0)

BloggerにおしゃれなアフィリエイトBOXを貼り付ける方法

アフィリエイトBOXの例

アフィリエイトBOXのCSSコード

アフィリエイトBOXのHTMLコード

ブログ運営におすすめの便利グッズ

連絡フォーム