[Blogger] もしもアフィリエイトのかんたんリンクの使い方 & 文字色の変更方法


以前、もしもアフィリエイトについて解説しました。

 ➡ もしもアフィリエイトを徹底解説! Amazonで否認された場合の解決方法は?


本記事ではもしもアフィリエイトのかんたんリンクについて、Bloggerブログでの使い方や文字色(リンク色)の変更方法などを解説していきます!


かんたんリンクの使い方

もしもアフィリエイトから【メディア運営ツール】の【かんたんリンク】を選択します。



複数のメディアを登録している場合、左上で該当のメディア(ブログ)を選択してください。


最初の設定

かんたんリンクのページで、先ずはプレビューにあるリンクのボタンを確認します。



Amazonなど後から申請したプロモーションでボタンがない場合は【+】から追加します。

ボタンの色や文言も変更できます。

後から変更する場合はペンマーク(編集)をクリックすれば同じ画面が出て変更可能です。


かんたんリンクの作成方法

【商品販売ページのURL、またはキーワードを入力してください】の欄にそのまま入力します。



検索については、その下のプレビュー画面の左端のサイト内の検索になります。



マウスカーソルを合わせるとドラッグで入れ替えられるという説明が出るので、入れ替えて検索したいサイトを選んでください。


今回は自分が今年買って一番良かったと思っている「ゴキッシュ」をそれぞれで検索してみました。


Amazon


楽天市場


このように検索結果が変わります。

この仕様って気付きにくいのですが、覚えておくと便利ですよ!


検索結果の商品画像をクリックするか、または直接URLを入力するとプレビュー画面に反映されます。



その下の画像表示サイズで大きさを変更できます。



これでその下のHTMLソースを【全文コピー】で完成……ではありません!


このままBloggerの記事に貼り付けるとこうなります。



商品説明が長々と入っていて大変分かりにくいです。

また全角の記号が文字化けしています。


これらの変更するためには、プレビュー画面から編集を行う必要があります。



プレビュー画面で商品名にマウスカーソルを合わせると、編集ボタンが出てくるのでクリックします。



編集画面で不要な文字を削除します。


全角記号は残念ながら文字化けしてしまいます。

編集画面で全角記号を半角記号に変更したり削除したりする必要があります。


これでHTMLソースを全文コピーすれば、簡単リンクの作成は完了です!



HTMLは好みで1行に変更可能です。(しなくてもBloggerでは問題ありません。)


その下にレスポンシブについて書かれていますが、Bloggerでこのタグを設置するとエラーになります。

タグの設置はしなくてもちゃんとレスポンシブ対応になっているので、気にしなくて大丈夫です。


Bloggerでのかんたんリンクの貼り方

記事の作成画面で、タイトル下の左端のアイコンをクリックして【HTMLビュー】に切り替えます。



そのまま任意の箇所に先程コピーしたHTMLソースを貼り付ければ、ブログ内にかんたんリンクを貼ることができます。



ただBloggerのテーマや普段使用している文字色(リンク色)によっては表示が上手くいかない場合があります。

これらを直す方法を次項で解説します。



かんたんリンクの文字色変更

かんたんリンクの文字やリンクの色が記事の指定と干渉してしまい、色が変になってしまうことがあります。

それを解決するため、CSSの追加でかんたんリンクの文字やリンクの色を変更します。


CSSの追加方法

左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。

そこから【詳細設定】の【CSSを追加】を選択します。



【カスタムCSSを追加】にCSSを入力できます。

後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。


かんたんリンク文字色(リンク色)変更CSS

かんたんリンクの文字色やリンクの色を変更するには、以下のCSSコードを追加します。


/*もしもアフィリエイト用*/
.easyLink-info-name a {
    color: #555555 !important; /*商品名色*/
}
.easyLink-info-maker{
    color: #555555 !important; /*メーカー名色*/
}
.easyLink-info-btn-amazon,
.easyLink-info-btn-yahoo,
.easyLink-info-btn-rakuten {
    color: #fff !important; /*ボタンリンク色*/
}
.easyLink-info-model{
    display:none; /*モデル名非表示*/
}


上記は当ブログで採用しているCSSコードです。

商品名とメーカー名の色は濃い灰色(#555555)、ボタンリンクの色は白色(#fff)に指定しています。

モデル名(商品名下の型番など)は不要なので非表示にしています。


自分のブログに合うようにカラーコードは変更してください。

モデル名が必要な場合は「display:none」を「color: カラーコード !important」に変更してカラーコードに変更してください。

変更が不要な項目は消してしまっても問題ありません。


これでかんたんリンクの文字色やリンク色を指定できます!



Bloggerでかんたんリンクを使いこなそう!

もしもアフィリエイトのかんたんリンクは、アフィリエイト初心者には簡単でとても便利です。

是非Bloggerブログでも、かんたんリンクを使いこなしてくださいね!


もしもアフィリエイトの登録がまだの方はコチラから↓↓↓




にほんブログ村 ブログブログ ブログサービスへ にほんブログ村 ブログブログ ブログノウハウへ ブログノウハウランキング

このエントリーをはてなブックマークに追加