WordPress Cocoonでサイドバーにminne・Creemaのバナーを簡単設置する方法

こんにちは。

今回は、WordPressの人気テーマ「Cocoon」を使って、ハンドメイドオンラインマーケット「minne」と「Creema」のバナーをブログのサイドバーに簡単に貼る方法をご紹介します。
初心者の方でも迷わないようにシンプルな工程で説明しますので、ぜひ参考にしてくださいね！

※今回の記事で使用しているminneおよびCreemaの画像は、各公式サイトの利用規約に基づき、適切な手順で取得し、使用しています。

準備するもの
minneとCreemaのバナーを取得する
1. minneからバナーを取得する方法
2. Creemaからバナーを取得する方法
WordPress Cocoonテーマにバナーをサイドバーに追加する方法
1. ステップ1: バナー画像をアップロードする
2. ステップ2: サイドバーにバナーを追加する
  1. ｍinneバナーの追加
  2. Creemaバナーの追加
まとめ

準備するもの

バナーをブログのサイドバーに貼る前に、以下の準備を行いましょう。

WordPressサイト: 既にWordPressがインストールされていること。
Cocoonテーマ: Cocoonテーマが有効化されていること。
minneとCreemaのアカウント: それぞれのオンラインマーケットに登録していること。
バナー画像: minneとCreemaの公式ヘルプページからバナー画像を取得します。

minneとCreemaのバナーを取得する

minneとCreemaのバナー画像はどちらもサイトのヘルプページにあります。

minneからバナーを取得する方法

ｍinneのヘルプガイドページにアクセス
- ｍinneのバナー画像にアクセスします。
バナー画像をダウンロード
- 3種類のバナーサイズ（200×200、468×60、300×250）から適切なサイズを選択します。
- 各バナー画像を右クリックし、「名前を付けて画像を保存」を選択して、フォルダに保存します。

Creemaからバナーを取得する方法

Creemaのヘルプガイドページにアクセス
- Creemaのバナー画像にアクセスします。
バナー画像をダウンロード
- 4種類のバナーサイズ（170×50、200×120、120×120、200×200）から適切なサイズを選択します。
- 各バナー画像を右クリックし、「名前を付けて画像を保存」を選択して、フォルダに保存します。
  
  ※Creemaのバナー画像は使用するにあたって下記の注意事項があります。
  ・バナーのリンク先は必ずクリーマページ内へ設定してください。
  　　　　　　　　　　　　　　　　　例）http://www.creema.jp/
  ・バナー画像の加工は禁止してます
  ・リンクによってトラブルが発生した場合、クリーマでは責任を負いかねます。

WordPress Cocoonテーマにバナーをサイドバーに追加する方法

バナーの取得が完了したら、次はWordPress Cocoonテーマのサイドバーにバナーを追加する方法です。

ここでは、ダッシュボードのメディアから画像を追加し、そのファイルURLを使ってサイドバーにバナーを載せるシンプルな方法を説明します。

ステップ1: バナー画像をアップロードする

WordPressダッシュボードにログイン
- まず、WordPressの管理画面にログインします。
メディア > 新規追加を選択
- 左側のメニューから①「メディア」→②「新しいメディアファイルを追加」をクリックします。
バナー画像をアップロード
- 「ファイルをドラッグ＆ドロップ」または「ファイルを選択」ボタンをクリックし、先ほどダウンロードしたminneとCreemaのバナー画像を選択します。
- アップロードが完了したら、メディアライブラリに表示されます。
アップロードした画像のURLを取得
- メディアライブラリ内でアップロードしたバナー画像をクリックします。右側に表示される「ファイルのURL」をコピーします。このURLを後でサイドバーに挿入します。

ステップ2: サイドバーにバナーを追加する

サイドバーにminneとCreemaのバナーを追加します。

ｍinneバナーの追加

外観 > ウィジェットを選択
- 左側のメニューから「外観」→「ウィジェット」をクリックします。
カスタムHTMLウィジェットを追加
- 左側にある「カスタムHTML」ウィジェットをドラッグ＆ドロップして、右側の「サイドバー」のエリアに追加します。
minneバナーのHTMLコードを入力
- 「カスタムHTML」ウィジェットの編集画面に、以下のHTMLコードを貼り付けます。
<a href=”https://minne.com/@あなたのショップID” target=”_blank” rel=”noopener noreferrer”>
<img src=”画像ファイルのURL” alt=”minneのバナー” style=”width:100%; height:auto;”>
</a>

ポイント:
・href 属性にはあなたのminneショップURLを入力します（例:https://minne.com/@fuhaku)。
・src 属性にはメディアライブラリにアップロードしたminneバナー画像のファイルURLを入力します。
・target="_blank" とを追加して、新しいタブで開くように設定します。
・style="width:100%; height:auto;" で画像がウィジェットの幅に合わせて調整されるようにします。
ウィジェットを保存
- 入力が完了したら、「保存」ボタンをクリックしてウィジェットを保存します。
デザインの確認
- ブラウザでブログを開き、サイドバーにminneのバナーが正しく表示されているか確認します。

Creemaバナーの追加

外観 > ウィジェットを選択
- 左側のメニューから「外観」→「ウィジェット」をクリックします。
カスタムHTMLウィジェットを追加
- 左側にある「カスタムHTML」ウィジェットをドラッグ＆ドロップして、右側の「サイドバー」のエリアに追加します。
CreemaバナーのHTMLコードを入力
- テキストウィジェットの編集画面に、以下のHTMLコードを貼り付けます。
<a href=”https://creema.jp/@あなたのショップID” target=”_blank” rel=”noopener noreferrer”>
<img src=”画像ファイルのURL” alt=”Creemaのバナー” style=”width:100%; height:auto;”>
</a>

ポイント:
- href 属性にはあなたのCreemaショップURLを入力します（例:https://creema.jp/@fuhaku)。
- src 属性にはアップロードしたCreemaバナー画像のURLを入力します。
- target="_blank" とを追加して、新しいタブで開くように設定します。
- style="width:100%; height:auto;" で画像がウィジェットの幅に合わせて調整されるようにします。
ウィジェットを保存
- 入力が完了したら、「保存」ボタンをクリックしてウィジェットを保存します。
デザインの確認
- ブラウザでブログを開き、サイドバーにCreemaのバナーが正しく表示されているか確認します。