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

くるみ

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

ということで今回は

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

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

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

お品書き

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

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

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

スマホver

before

after

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

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

パソコンver

before

after

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

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

実物

実物はこんな感じ。

リンク

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

カスタマイズ手順

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

手順

step1

CSSをコピペする

step2

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

(※任意)

すぐ終わりそうだね！

くるみ

バックアップを忘れずに

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

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

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

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

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

手順1：CSSをコピペ

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

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

「追加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;
}
}