投稿者:: @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;
  }
}

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

●方法
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;
}

 chu-yaさん

こんにちは！

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

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

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

２．ファイルのURLをJavascriptのコードに入力

３．CSSにコード入力

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

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

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

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

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

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

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

上記の通り、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 );
  }
}

chu-yaさん

ありがとうございます！

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

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

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

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

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

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

ファイル内の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;
}

●原因
ボタンが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;
}

chu-yaさん

完成しました！

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

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

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

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

追加ですみません。

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

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

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

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

chu-yaさん

おはようございます。

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

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

@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;←★
  }

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

chu-yaさん

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

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

以下2点気になります。

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

２．スマホの２カラム表示が、はみでる

何度もすみません。

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

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

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

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

chu-yaさん

ありがとうございます。

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

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

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

補足のご指摘の通り

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

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

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

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

●原因
以下の部分も手を加えていませんか？
スペース以外の文字コードがプロパティの前にあり、エラーとなっています。（図参照）
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となり、画面からはみ出てしまう。

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

chu-yaさん

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

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

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

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

投稿者:: @simpleandwell

格闘してしまいました

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