Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

もしもかんたんリンクの広告のスマホ表示...
 
共有:
通知
すべてクリア

[解決済] もしもかんたんリンクの広告のスマホ表示のAmazonや楽天ボタンをカスタマイズしたい

21 投稿
2 ユーザー
10 Likes
235 表示
simpleandwell
(@simpleandwell)
Eminent Member Registered
結合: 7か月前
投稿: 20
Topic starter  

URL  https://simpleandwellblog.com/

記事URL  https://simpleandwellblog.com/rebecca/

相談内容

スマホにおいて、もしもかんたんリンク広告表示の中の Amazon・楽天・Yahooショッピング のリンクボタンのカスタマイズをしたいのですが、可能なのでしょうか。

詳細は添付ファイルを確認いただけるとうれしいです。

お手数おかけしますが、何卒よろしくお願いします。

 

ファイル内のカラーコードはこちらです↓

カラー#  ECサイト
#f79256  Amazon

#f76956  楽天

#66a7ff  Yahoo


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 
投稿者:: @simpleandwell

もしもかんたんリンク広告表示

使った事がないので分かりませんが。
importantを用い少し汚いコードです。

@media screen and (max-width: 480px) {
  /* ボタンの並びを中央配置 */
  .easyLink-info-btn {
    display: flex!important;
    justify-content: center!important;
  }
  /* 元のボタン文字を消す */
  .easyLink-info-btn a {
    width: 40px!important;
    font-size: 0!important;
    margin: 0 10px 10px 0!important;
  }
  /* 新しい文字 */
  .easyLink-info-btn a:before {
    color: #fff;
    font-size: 20px;
  }
  /* amazon */
  .easyLink-info-btn-amazon:before {
    content: "A";
  }
  /* 楽天 */
  .easyLink-info-btn-rakuten:before {
    content: "楽";
  }
  /* Yahoo */
  .easyLink-info-btn-yahoo:before {
    content: "Y";
  }
  /* hover時の文字色 */
  .easyLink-info-btn-amazon:hover:before {
    color: #f79256;
  }
  .easyLink-info-btn-rakuten:hover:before {
    color: #f76956;
  }
  .easyLink-info-btn-yahoo::hover:before {
    color: #66a7ff;
  }
}

   
わいひら reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

●注意
もしもかんたんリンク広告表示を使っての動作確認していません。

●方法
JavaScriptで文字をアイコン画像に置き換える事もできると思います。
楽天のアイコンフォントが無い為、メディアに登録した画像(ご自分で作成)としています。
画面幅に関係なく画像表示となります。

●JavaScript

$(function() {
  $('.easyLink-info-btn-amazon').html('<img src=amazonアイコン画像URL>');
  $('.easyLink-info-btn-rakuten').html('<img src=楽天アイコン画像URL>');
  $('.easyLink-info-btn-yahoo').html('<img src=Yahooアイコン画像URL>');
});

●CSS

.easyLink-info-btn {
  display: flex!important;
  justify-content: center!important;
}

.easyLink-info-btn a {
  border: 1px solid #ccc!important;
  border-radius: 0!important;
  height: 50px!important;
  margin: 0 10px 10px 0!important;
  padding: 0!important;
  width: 50px!important;
}

   
わいひら reacted
simpleandwell
(@simpleandwell)
Eminent Member Registered
結合: 7か月前
投稿: 20
Topic starter  

 chu-yaさん

こんにちは!

早速のご回答ありがとうございます。

Javascriptの方法を試してみました。

 

1.アイコン画像をWordPressのメディアライブラリに保存

2.ファイルのURLをJavascriptのコードに入力

3.CSSにコード入力

 

したのですが、アイコンがデフォルトの文字表示から変化しません。

詳細は添付資料確認いただけると助かります。

 

お時間いただき恐縮なのですが、問題点を見つけていただけますとうれしいです。

申し訳ございませんが、何卒よろしくお願いします。

 

 


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

●回答
実際に「もしもかんたんリンク広告」のコードを貼り付けて確認したわけでないので、上記の通り動作は保証できないです。

申し訳ない。
一旦、削除して元に戻して下さい。
別の方法を思い付いたので少し時間を下さい。

●注意
ファーラムの注意書きの通り、高速化の解除願います。コードが圧縮され、解析しずらく。


   
わいひら reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

上記の通り、CSS、JSは削除し元に戻し
以下をCSSを追加して下さい。

@media screen and (max-width: 480px) {

  /* ボタンの並びを中央配置 */
  .easyLink-info-btn {
    display: flex!important;
    justify-content: center!important;
  }

  /* 元のボタン文字を消す */
  .easyLink-info-btn a {
    border: 0!important;
    border-radius: 0!important;
    font-size: 0!important;
    height: 50px!important;
    margin: 0 10px 10px 0!important;
    width: 50px!important;
  }

  /* 画像に変更 */
  .easyLink-info-btn a:before {
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
  }

  /* amazon */
  .easyLink-info-btn-amazon:before {
    background-image: url( https://simpleandwellblog.com/wp-content/uploads/2022/08/031577c6ff2c44c19531bcc7282b37a7.jpg );
  }

  /* 楽天 */
  .easyLink-info-btn-rakuten:before {
    background-image: url( https://simpleandwellblog.com/wp-content/uploads/2022/08/3692d7f1e6f1d3241b404142fe4fd595.jpg );
  }

  /* Yahoo */
  .easyLink-info-btn-yahoo:before {
    background-image: url( https://simpleandwellblog.com/wp-content/uploads/2022/08/0e16a230b8eab7c4c6efa1677c840d88.jpg );
  }
}

   
わいひら reacted
simpleandwell
(@simpleandwell)
Eminent Member Registered
結合: 7か月前
投稿: 20
Topic starter  

chu-yaさん

 

ありがとうございます!

実装できました!!感動しています。

 

ただ。。スマホ表示2カラムが画面から見切れてしまうようになってしまいました。

広告自体を小さくすることは可能でしょうか。

 

トピックひとつルールですので、別に立ち上げが必要な場合、そのようにいたします。

 

高速化解除しておらず大変申し訳ありません。

現在、高速化解除しております。

 

ファイル内のCSSコードはこちら↓

/***** 2カラム間余白 ****/

.column-wrap {
gap: 5px;
}
/* もしもアフィリエイト かんたんリンク カスタマイズ */
/* — 商品タイトル — */
p.easyLink-info-name a {
color: #2098a8 !important; /* 文字色 */
 font-size: 8px !important;
font-weight:bold;
}
/* — ボタンサイズ — */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a{
padding:1px !important;
}
@media screen and (min-width: 704px) { div.easyLink-box div.easyLink-info p.easyLink-info-btn a{
 margin-bottom:9px !important;
}}
/* — ボタン下空白を削除 — */
div.easyLink-box{padding:10px;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
margin-bottom: 0 !important;
}
/* — ボタン色 — */
a.easyLink-info-btn-amazon {
background: #f6a306 !important; /* 背景色 */
border: 2px solid #f6a306 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
background: #cf4944 !important; /* 背景色 */
border: 2px solid #cf4944 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
background: #51a7e8 !important; /* 背景色 */
border: 2px solid #51a7e8 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/* — マウスオーバー時のボタン色 — */
a:hover.easyLink-info-btn-amazon {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #f6a306 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #cf4944 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #51a7e8 !important; /* 文字色 */
}
/* — 画像サイズ — */
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht{
 max-width: 100px !important;
 max-height: 100px !important;
margin: auto;
}


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

●原因
ボタンが50×50pxを大きく、広告枠が広がってしまい、はみ出した。

●対策

  1. ボタンのサイズを40×40pxに変更する。
  2. ボタン間の隙間をmarginでなくgapに変更する。
  3. 中央配置→均等配置(space-around)に変更

●CSS
以下の赤字の部分を修正して下さい。

.easyLink-info-btn {
  display: flex!important;
  gap: 10px;←追加
  justify-content: space-around!important;
}

.easyLink-info-btn a {
  border: 0!important;
  border-radius: 0!important;
  font-size: 0!important;
  height: 40px!important; 
  margin: 0 10px 10px 0!important;←削除
  width: 40px!important;
}


   
わいひら reacted
simpleandwell
(@simpleandwell)
Eminent Member Registered
結合: 7か月前
投稿: 20
Topic starter  

chu-yaさん

 

完成しました!

いますごく感激しています。

 

とても分かりやすい回答でほんとうに感謝しかありません。

ありがとうございました!!


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

@simpleandwell さん
恐れ入りますが、フォーラムのマナーとして解決の場合、「解決済み」をクリック願います。


   
simpleandwell
(@simpleandwell)
Eminent Member Registered
結合: 7か月前
投稿: 20
Topic starter  

追加ですみません。

いま高速化の中のCSSの縮小化にチェックを入れたのですが、カスタマイズした表示が崩れてしまいました。

CSSの縮小化は有効にしなくても、問題はありませんか。

無知ですみません。教えていただけますと助かります。。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

@simpleandwell さん
CSSを圧縮して問題の状態にして下さい。

 


   
simpleandwell
(@simpleandwell)
Eminent Member Registered
結合: 7か月前
投稿: 20
Topic starter  

chu-yaさん

おはようございます。

いまCSS縮小化にチェック入れて、問題の状態にいたしました。

すみませんが、何卒よろしくお願いいたします。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

@simpleandwell さん

●原因
プロパティの前に半角スペース以外のコードがありエラーとなっている。

  • ボタンの並びが横並び(easyLink-info-btn)が無視されている。
  • ボタンサイズ35×35pxが無視されている。

@media screen and (max-width: 480px) {__←★改行前にスペースがある?か①前か?
_.easyLink-info-btn {←★①
    display: flex!important;
    gap: 10px;←追加
    justify-content: space-around!important;
  }

  .easyLink-info-btn a {
    border: 0!important;
    border-radius: 0!important;
    font-size: 0!important;
__height: 35px!important;←★
__width: 35px!important;←★
  }

●対策
上記赤字のプロパティ前の文字を削除しスペースを空けないで下さい
一旦これで確認して下さい。
表示され、コーディングの見栄えが気になるなら、半角スペースを入れインデントを調整して下さい。


   
わいひら reacted
simpleandwell
(@simpleandwell)
Eminent Member Registered
結合: 7か月前
投稿: 20
Topic starter  

chu-yaさん

解析ありがとうございます。

スペース削除したところ、Amazonなどのボタンは表示されるようになりましたが

以下2点気になります。

 

1.ボタンが横並びではなく、縦並びに表示される

2.スマホの2カラム表示が、はみでる

 

何度もすみません。

何卒よろしくお願いいたします。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

@simpleandwell さん
.easyLink-info-btnの前に半角スペース以外の文字が残っています。(■の部分)
削除願います。

●質問
この手の不当コードの問題が結構あり。
どうの様な手順でコードを入れていますか?PC(mac?)は何ですか?


   
わいひら reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

●補足
[外観]→[テーマファイルエディター]の該当ファイルに、フォーラム掲載のコードを直接コピペすると、意図しないコードが混入する場合があります。
この為、一旦、notepadなどPC上のテキストエディタ上で編集した上で、上記にコピペして下さい。


   
わいひら reacted
simpleandwell
(@simpleandwell)
Eminent Member Registered
結合: 7か月前
投稿: 20
Topic starter  

chu-yaさん

ありがとうございます。

 

一度コードをPCテキストエディタ上にコピペしてやり直したところ、ちゃんと横並びになりました!

ただ、リンクの画像が大きくなってしまっています。(添付ファイル参照)

 

不当コードの問題が結構あるんですね。…

補足のご指摘の通り

[外観]→[テーマファイルエディター]の該当ファイルに、フォーラム掲載のコードを直接コピペしておりました。

今後はメモに一旦貼付してからコピペします。

PCは、サーフェスLaptopです。

 

どうぞよろしくお願いいたします。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

●原因
以下の部分も手を加えていませんか?
スペース以外の文字コードがプロパティの前にあり、エラーとなっています。(図参照)
div.easyLink-box div.easyLink-img, div.easyLink-box div.easyLink-img p.easyLink-img-box,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht

この為、画面幅480px(モバイル表示の時)
画像サイズがmax240×240pxとなり、画面からはみ出てしまう。

●対策
上記と同様に見直し、修正して下さい。


   
わいひら reacted
simpleandwell
(@simpleandwell)
Eminent Member Registered
結合: 7か月前
投稿: 20
Topic starter  

chu-yaさん

格闘してしまいましたが、無事に表示が完成いたしました!涙

長々と私の相談に答えていただき本当にありがとうございます。

感謝の気持ちでほんとうにいっぱいです。

ありがとうございました。

 


   
わいひら reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 
投稿者:: @simpleandwell

格闘してしまいました

それは原因調査の為、私も同じです笑、お疲れ様でした。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な回答があった場合は「いいね!」もご活用ください。回答者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました