...

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

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

どうもおはようポテト(@ohayoupoteto22)です。


当サイトでも利用させていただいている、もしもアフィリエイトの「かんたんリンク」。

Amazon・楽天・Yahooo!ショッピングから同時に商品を検索し、リンクをパパッと貼れちゃうのでとても便利です。

 

しかしちょっとした問題があり、まず一つはデフォルトのデザインがちょっと微妙なこと。

もう一つが…

 

縦長すぎん?

そう、PC版はデフォルトで横長(商品とボタンの2列)になっているのですが、スマホから見ると縦長(1列)なってしまいちょっと不恰好になってしまうことです。

記事の中にさりげなーく貼りたいはずの商品リンクが、こんな感じで縦長にドンとあったらなんか「うっ…」ってなりますよね。記事書いてる側ですらなります。

このままじゃよろしくないね!

ソロモン

ということでそれを解決すべく試行錯誤したところ、かなりいい感じにカスタマイズできました。

ということで今回は

「もしものかんたんリンクをオシャレにカスタマイズしたい」

「スマホでも横長になるようにしたい」

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

コピペですぐ真似できるのでぜひ試してみてくださいね⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう!

 

もしものリンクの完成イメージ

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

スマホver

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

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

 

パソコンver

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

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

 

実物

実物はこんな感じ。

ブログ主

ということでカスタマイズしていこう!

 

カスタマイズ手順

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

手順
step1
CSSをコピペする!
step2
好きな色・画像のサイズに調整する(任意)
レッツゴー!

ソロモン

 

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

手順1:CSSをコピペ!

「外観」→「テーマエディター」にいき、style.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;
}
}

 

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

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

 

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

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

ブログ主

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

 

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

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

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

 

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

お疲れ様!

ソロモン

 

最後に

以上となります。

他にも色々カスタマイズの記事を書いていますのでぜひ!

Cocoonのサイドバーのカスタマイズ【Cocoon】サイドバーの見出しを可愛くカスタマイズする方法!コピペで簡単!

 

Cocoonの目次のカスタマイズする方法【コピペでOK】Cocoonの目次を見やすくカスタマイズする方法

 

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA