サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年8月27日 11:01
URL https://simpleandwellblog.com/
記事URL https://simpleandwellblog.com/rebecca/
相談内容
スマホにおいて、もしもかんたんリンク広告表示の中の Amazon・楽天・Yahooショッピング のリンクボタンのカスタマイズをしたいのですが、可能なのでしょうか。
詳細は添付ファイルを確認いただけるとうれしいです。
お手数おかけしますが、何卒よろしくお願いします。
ファイル内のカラーコードはこちらです↓
カラー# ECサイト
#f79256 Amazon
#f76956 楽天
#66a7ff Yahoo
2022年8月27日 13:35
もしもかんたんリンク広告表示
使った事がないので分かりませんが。
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
2022年8月27日 13:53
●注意
もしもかんたんリンク広告表示を使っての動作確認していません。
●方法
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
Topic starter
2022年8月27日 17:15
chu-yaさん
こんにちは!
早速のご回答ありがとうございます。
Javascriptの方法を試してみました。
1.アイコン画像をWordPressのメディアライブラリに保存
2.ファイルのURLをJavascriptのコードに入力
3.CSSにコード入力
したのですが、アイコンがデフォルトの文字表示から変化しません。
詳細は添付資料確認いただけると助かります。
お時間いただき恐縮なのですが、問題点を見つけていただけますとうれしいです。
申し訳ございませんが、何卒よろしくお願いします。
2022年8月27日 18:09
●回答
実際に「もしもかんたんリンク広告」のコードを貼り付けて確認したわけでないので、上記の通り動作は保証できないです。
申し訳ない。
一旦、削除して元に戻して下さい。
別の方法を思い付いたので少し時間を下さい。
●注意
ファーラムの注意書きの通り、高速化の解除願います。コードが圧縮され、解析しずらく。
わいひら reacted
2022年8月27日 19:00
上記の通り、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
Topic starter
2022年8月27日 21:18
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;
}
2022年8月27日 21:54
●原因
ボタンが50×50pxを大きく、広告枠が広がってしまい、はみ出した。
●対策
- ボタンのサイズを40×40pxに変更する。
- ボタン間の隙間をmarginでなくgapに変更する。
- 中央配置→均等配置(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
Topic starter
2022年8月28日 00:21
追加ですみません。
いま高速化の中のCSSの縮小化にチェックを入れたのですが、カスタマイズした表示が崩れてしまいました。
CSSの縮小化は有効にしなくても、問題はありませんか。
無知ですみません。教えていただけますと助かります。。
Topic starter
2022年8月28日 08:39
chu-yaさん
おはようございます。
いまCSS縮小化にチェック入れて、問題の状態にいたしました。
すみませんが、何卒よろしくお願いいたします。
2022年8月28日 09:50
●原因
プロパティの前に半角スペース以外のコードがありエラーとなっている。
- ボタンの並びが横並び(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
Topic starter
2022年8月28日 10:17
chu-yaさん
解析ありがとうございます。
スペース削除したところ、Amazonなどのボタンは表示されるようになりましたが
以下2点気になります。
1.ボタンが横並びではなく、縦並びに表示される
2.スマホの2カラム表示が、はみでる
何度もすみません。
何卒よろしくお願いいたします。
2022年8月28日 10:35
@simpleandwell さん
.easyLink-info-btnの前に半角スペース以外の文字が残っています。(■の部分)
削除願います。
●質問
この手の不当コードの問題が結構あり。
どうの様な手順でコードを入れていますか?PC(mac?)は何ですか?
わいひら reacted
2022年8月28日 10:45
●補足
[外観]→[テーマファイルエディター]の該当ファイルに、フォーラム掲載のコードを直接コピペすると、意図しないコードが混入する場合があります。
この為、一旦、notepadなどPC上のテキストエディタ上で編集した上で、上記にコピペして下さい。
わいひら reacted
Topic starter
2022年8月28日 15:55
chu-yaさん
ありがとうございます。
一度コードをPCテキストエディタ上にコピペしてやり直したところ、ちゃんと横並びになりました!
ただ、リンクの画像が大きくなってしまっています。(添付ファイル参照)
不当コードの問題が結構あるんですね。…
補足のご指摘の通り
[外観]→[テーマファイルエディター]の該当ファイルに、フォーラム掲載のコードを直接コピペしておりました。
今後はメモに一旦貼付してからコピペします。
PCは、サーフェスLaptopです。
どうぞよろしくお願いいたします。
2022年8月28日 16:29
●原因
以下の部分も手を加えていませんか?
スペース以外の文字コードがプロパティの前にあり、エラーとなっています。(図参照)
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
Topic starter
2022年8月28日 17:29
chu-yaさん
格闘してしまいましたが、無事に表示が完成いたしました!涙
長々と私の相談に答えていただき本当にありがとうございます。
感謝の気持ちでほんとうにいっぱいです。
ありがとうございました。
わいひら reacted
2022年8月28日 17:37
格闘してしまいました
それは原因調査の為、私も同じです笑、お疲れ様でした。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。