くるみ
ということで今回は
- もしものかんたんリンクをオシャレにカスタマイズしたい
- モバイルだと縦長すぎるからPCみたいに横長にしたい
という方に向けて、「もしものかんたんリンクをカスタマイズするスマホでも横長(1列)にする方法」をまとめてみました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
かんたんリンクの完成イメージ
当記事のカスタマイズをすると以下のようになります。
スマホver
before
after
スマホから見てもこのように横長の2列になります。これであまり記事を圧迫せずにさりげなく貼ることができますね。
更にボタンの色を変えて影を付けたり、スライドの矢印を消したりしてよりシンプルに見栄えを良くしています。
パソコンver
before
after
勿論パソコン版もいい感じになります。
ボタンに影をつけることでクリックしたくなるようにしています。
実物
実物はこんな感じ。
てことで早速カスタマイズに移っていきましょう。
カスタマイズ手順
手順はいたってシンプルかつ簡単。
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
もしものかんたんリンクをおしゃれにカスタマイズする方法
手順1:CSSをコピペ
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ

コピペするコード
/************************************
** もしものかんたんリンク
************************************/
/*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の「ボタンの色を変えたい時はここ」とコメントアウトしてあるところのカラーコードをお好みのものに変えます。
ブログ主
商品画像のサイズを変えたい場合
上のCSSの「画像のサイズを変える時はここ」とコメントアウトしてあるところの数値を変えてあげると、商品の画像のサイズを変えることができます。
「画像が大きすぎるな(小さすぎるな)」と感じた場合に適宜変えてあげてください。
以上でカスタマイズは終了です。
くるみ
CSSの変更が反映されない場合
「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。キャッシュ系プラグイン
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
上のショートカットキーで削除できます。
まとめ
他にもカスタマイズ記事を書いているので参考にしてみてください。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝