もしもの「かんたんリンク」をスマホでも横長(2列)にするカスタマイズ方法

もしもアフィリエイトの「かんたんリンク」のカスタマイズ方法

くるみ

もしものかんたんリンクさ、スマホの表示が縦長すぎない?

ということで今回は

  • もしものかんたんリンクをオシャレにカスタマイズしたい
  • モバイルだと縦長すぎるからPCみたいに横長にしたい

という方に向けて、「もしものかんたんリンクをカスタマイズするスマホでも横長(1列)にする方法」をまとめてみました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

かんたんリンクの完成イメージ

当記事のカスタマイズをすると以下のようになります。

スマホver

before

カスタマイズ前のもしものかんたんリンク(モバイル)

after

カスタマイズ後のもしものかんたんリンク(モバイル)

スマホから見てもこのように横長の2列になります。これであまり記事を圧迫せずにさりげなく貼ることができますね。

更にボタンの色を変えて影を付けたり、スライドの矢印を消したりしてよりシンプルに見栄えを良くしています。

パソコンver

before

カスタマイズ前のもしものかんたんリンク(PC)

after

カスタマイズ後のもしものかんたんリンク(PC)

勿論パソコン版もいい感じになります。

ボタンに影をつけることでクリックしたくなるようにしています。

実物

実物はこんな感じ。

てことで早速カスタマイズに移っていきましょう。

カスタマイズ手順

手順はいたってシンプルかつ簡単。

手順
step1
CSSをコピペする
step2
好きな色・画像のサイズに調整する
(※任意)
すぐ終わりそうだね!

くるみ

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

もしものかんたんリンクをおしゃれにカスタマイズする方法

手順1:CSSをコピペ

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

コピペするコード

/************************************
** もしものかんたんリンク
************************************/
/*cocoonの設定で付く枠を消す*/
.easyLink-img img{
  box-shadow: initial!important;
}
/*画像スライドの矢印消す*/
.easyLink-arrow-left{
  display:none!important;
}
.easyLink-arrow-right{
  display:none!important;
}
/*商品名の大きさとか*/
.easyLink-info-maker{
  font-size:10px!important;
  color:#808080!important;
}
/*ボタンをいじるよ*/
.easyLink-info-btn a{
  margin: 5px 10px 5px 0!important;
  padding: 0 12px!important;
  line-height: 35px!important;
  display: inline-block!important;
  width: 100%!important;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
}
/*アイコンを入れるよ*/
.easyLink-info-btn a:before {
  font-family: "Font Awesome 5 Free";
  content: "f0da";
  padding-right: 3px;
}
.easyLink-box {
  margin-bottom: 1.5em!important;
}
.easyLink-info-btn {
  display: inline!important;
}
/*ボタンの色を変えたい時はここから*/
.easyLink-info-btn-amazon{
  background:rgb(255,179,107)!important;
}
.easyLink-info-btn-rakuten{
  background:rgb(234,115,115)!important;
}
.easyLink-info-btn-yahoo{
  background:rgb(115,193,234)!important;
}
/*ここからスマホverの調整*/
@media screen and (max-width: 480px){
/* スマホの広告幅 */
  div.easyLink-box.easyLink-size-s {
    max-width: 340px !important;
}
/* スマホのボタン調整 */
.easyLink-info-btn a{
  margin: 5px 10px 5px 0!important;
  padding: 0 12px!important;
  line-height: 35px!important;
  display: inline-block!important;
  width: 100%!important;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
}
/*スマホでも横長にするため*/
.easyLink-img{
  float:left!important;
  width:130px;
  padding-right:20px!important;
}
.easyLink-info{
  display:flex;
  flex-wrap:wrap;
}
.easyLink-info-btn-yahoo{
  font-size:10px!important;
}
p.easyLink-info-name a {
  font-size: 16px;
}
.easyLink-info-btn {
  margin-top:-5px!important;
}
p.easyLink-img-box {
  position: initial!important;
  padding-bottom:130px!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-height: 170px !important;
  min-height:100px !important;
  max-width: 130px!important;
}
}
/************************************
** もしものかんたんリンク
************************************/
/*cocoonの設定で付く枠を消す*/
.easyLink-img img{
  box-shadow: initial!important;
}
/*画像スライドの矢印消す*/
.easyLink-arrow-left{
  display:none!important;
}
.easyLink-arrow-right{
  display:none!important;
}
/*商品名の大きさとか*/
.easyLink-info-maker{
  font-size:10px!important;
  color:#808080!important;
}
/*ボタンをいじるよ*/
.easyLink-info-btn a{
  margin: 5px 10px 5px 0!important;
  padding: 0 12px!important;
  line-height: 35px!important;
  display: inline-block!important;
  width: 100%!important;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
}
/*アイコンを入れるよ*/
.easyLink-info-btn a:before {
  font-family: "Font Awesome 5 Free";
  content: "f0da";
  padding-right: 3px;
}
.easyLink-box {
  margin-bottom: 1.5em!important;
}
.easyLink-info-btn {
  display: inline!important;
}
/*ボタンの色を変えたい時はここから*/
.easyLink-info-btn-amazon{
  background:rgb(255,179,107)!important;
}
.easyLink-info-btn-rakuten{
  background:rgb(234,115,115)!important;
}
.easyLink-info-btn-yahoo{
  background:rgb(115,193,234)!important;
}
/*ここからスマホverの調整*/
@media screen and (max-width: 480px){
/* スマホの広告幅 */
  div.easyLink-box.easyLink-size-s {
    max-width: 340px !important;
}
/* スマホのボタン調整 */
.easyLink-info-btn a{
  margin: 5px 10px 5px 0!important;
  padding: 0 12px!important;
  line-height: 35px!important;
  display: inline-block!important;
  width: 100%!important;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
}
/*スマホでも横長にするため*/
.easyLink-img{
  float:left!important;
  width:130px;
  padding-right:20px!important;
}
.easyLink-info{
  display:flex;
  flex-wrap:wrap;
}
.easyLink-info-btn-yahoo{
  font-size:10px!important;
}
p.easyLink-info-name a {
  font-size: 16px;
}
.easyLink-info-btn {
  margin-top:-5px!important;
}
p.easyLink-img-box {
  position: initial!important;
  padding-bottom:130px!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-height: 170px !important;
  min-height:100px !important;
  max-width: 130px!important;
}
}

手順2:好きな色・画像のサイズに調整する

ここはお好みで構いません。自分の好みにより合わせたいという方向けです。

ボタンの色を変えたい場合

上のCSSの「ボタンの色を変えたい時はここ」とコメントアウトしてあるところのカラーコードをお好みのものに変えます。

ブログ主

いい感じの色が思い浮かばない時は以下の記事が参考になります
参考 配色パターン見本40選:ベストな色の組み合わせを探せるツールサルワカ

商品画像のサイズを変えたい場合

上のCSSの「画像のサイズを変える時はここ」とコメントアウトしてあるところの数値を変えてあげると、商品の画像のサイズを変えることができます。

「画像が大きすぎるな(小さすぎるな)」と感じた場合に適宜変えてあげてください。

以上でカスタマイズは終了です。

お疲れ様!

くるみ

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

上のショートカットキーで削除できます。

まとめ

以上、もしもの「かんたんリンク」をスマホでも横長(2列)にするカスタマイズ方法でした。

他にもカスタマイズ記事を書いているので参考にしてみてください。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す