【絶対出来ます!】カエレバのデザインにサウンドハウスのアフィリエイトリンクを加える方法

生活全般

これですよ、これ!
たまに これを見て「サウンドハウスのリンクをどうやってこの中に組み込めるんだ?」って 常々おもってたんです。

とりあえず サウンドハウスのアフィリエイトプログラムがあるってのも最近 知ったので急いで申請しました。

申請して受理してもらえると 広告は出せます。・・・出せるのですが
そのまま何も細工せずに貼ると こんな風に見えます。

この表示方法もよく見かけますが、やっぱりAmazonや楽天、Yahooショッピングと一緒に並べたい!
かといって そのまま並べても

こんな風に 体裁が悪いですよね。

だから これらをこういう風に合体させて

こういうふうに するのが今回の最終目標です。僕もこれにたどり着くまでに かなり悪戦苦闘しました。
そんな経験をふまえて 絶対誰でも出来るように丁寧に説明していきます。

なお、大前提として

  • wordpressを使っている
  • カエレバはすでに使える
  • サウンドハウスのアフィリエイトは出来る状態である。

です。 

WordPressにCSSを追加する

もう分かりませんよね?・・・僕もです。😅 難しいことは抜きにして説明通りにやってみて下さい。

注意点としてお使いのテーマが「親テーマ、子テーマ」とある場合、子テーマの方でこの変更をした方がいいらしいです。(僕自身もそうしています)

最初に自身のWordPressのダッシュボードへ行き、テーマエディタを開きます。

そうすると、下の画面に行きます。今 紫で色付けしてある箇所が今回付け足した記述です。
僕の場合、ド頭の1行目から貼り付けても何も変化が無かったので16行目「必要ならばここにコードを書く」の下に貼り付けました。そうしたら上手くいきました。

今回 追加したCSSコード(紫で色付けされた所)は下にあるやつです。

 

下にあるCSSコードが2種類ありますが 両方とも同じです。最初の方は(上下のスライドバーがついている)そのまま全文コピーでいいですが、グレーで囲ってある方(行番号がついている)は行番号はコピーせずに本文だけコピーしてください。

最後に「ファイルを更新」ボタンを押してください。

WordPressでの作業はここまでです。

カエレバの改造?

カエレバでリンクを貼ります。(ぼくはいつも楽天、Amazon、Yahooです)

注意点

(cssカスタマイズ用)を選ぶのが必須みたいです。(僕はここで引っかかってました💦)

 

コイツをWordPress内で「HTMLで見る」と こういうふうに見えると思います。

終わりの行あたりにある この箇所に今から言うコードを貼り付けます。

下の図に示してあるように</div>と</div>のあいだです。

貼り付けるコードはコレです。↓

<div class=”shoplinksoundhouse”><a href=”アフィリエイトURL” target=”_blank” rel=”nofollow noopener”>サウンドハウス</a></div>

上のコード中のアフィリエイトURLというところを削除して アクセストレードで作成したサウンドハウスの商品URLを貼り付けます。(下の図の選択してある箇所が商品URL部分です)

もう一度おさらい

最初に「カエレバ」のコードを貼り、HTMLで表示する。

黄線をひいた このコードを加える

「アフィリエイトURL」の文字を消す

そこの箇所にアクセストレードで作成したサウンドハウスの商品URLを貼る。

これで 出来てると思います。それではまた✋

自分のリンクいろいろです😄

 

●Audiostockに登録してある作品ページ

 AudiostockでBGM・効果音を販売しています!

●Twitter

●TypeBeat系の自作曲を置いてあります。

●プラグインの紹介・使い方、自作曲など

 

●mail(もし何かご用命があれば)

drum.brust@gmail.com

コメント