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

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

当サイトでも利用させていただいている、もしもアフィリエイトの「かんたんリンク」。Amazon・楽天・Yahooo!ショッピングから同時に商品を検索し、リンクをパパッと貼れちゃうのでとても便利です。

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

なんというか…縦長すぎん？

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

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

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

くるみ

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

ということで今回は

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

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

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

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

ブログ主

早速いってみよう！

お品書き

もしものリンクの完成イメージ
カスタマイズ手順
- バックアップを忘れずに
もしものかんたんリンクをおしゃれにカスタマイズする方法
CSSの変更が反映されない場合
- キャッシュ系プラグイン
- プラウザのキャッシュを削除
まとめ

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

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

スマホver

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

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

パソコンver

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

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

実物

実物はこんな感じ。

リンク

ブログ主

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

カスタマイズ手順

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

手順

step1

CSSをコピペする！

step2

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

(※任意)

すぐ終わりそうだね！

くるみ

バックアップを忘れずに

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

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

【WordPress】CSSをカスタマイズする際のバックアップの取り方

ブログ主

備えあれば何とやらだね

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

手順1：CSSをコピペ！

「追加CSS」に追加

「テーマエディター」を使って追加

FTPソフトを使って追加

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

ブログ主

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

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

【初心者向け】WordPressでCSSコードを追加する3つの方法

/************************************
** もしものかんたんリンク
************************************/
/*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;
}
}