もしもの「かんたんリンク」をスマホでも横長(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;
}
}