【もしもアフィリエイト】かんたんリンクをカスタマイズ【コピペでOK!】

ブログ運営のメモ もしもアフィリエイト

もしもアフィリエイトのかんたんリンクがリニューアル!手軽で便利だけど、新しいデザインがちょっと気になるので、、、サイトに合ったデザインにカスタマイズしたい!

このようなリクエストにお応えします。

かんたんリンクのアレンジ完成形はコチラです。こちらのデザインはstyle.cssにコピペで完成なので、是非使ってみてください↓

sponser link

かんたんリンク

もしもアフィリエイトのかんたんリンクがリニューアルされ、カエレバのように手軽にAmazon、楽天、ヤフーショッピングへのリンクを作成できるようになりました。(かんたんリンクはコチラのページで作成できます→https://af.moshimo.com/af/shop/service/easy-link-card

かんたんリンクは、デフォルトではこのようなデザインです。少し角ばっていてページ全体の雰囲気と合わない気がします。

修正後のデザインはコチラです↓

画像のスライドやそれぞれのボタンも、きちんと機能しています。また、レスポンシブデザインにも対応してますので確認してみてください。

style.css

style.cssに以下を貼り付けるだけです。(※適用前にstyle.cssのバックアップをお願いします。)

/********************************
もしもかんたんリンク
*********************************/
/*================ box */
div.easyLink-box{
margin: 0 auto !important;
padding: 1em 1.5em !important;
background-color: #fafafa!important;
border:none!important;
border-radius: 2px;
box-sizing: border-box;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
height:auto;
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’,Helvetica, Meiryo, sans-serif;
line-height: 1.5;
max-height:none!important;
width:100%;
max-width:630px!important;
}
@media screen and (max-width: 703px){
div.easyLink-box {
text-align:center;
max-height:none!important;
padding: 10px!important;
}}
@media screen and (max-width: 620px){
div.easyLink-box{
display:block!important;
}
}
/*===============name */
div.easyLink-box div.easyLink-info p.easyLink-info-name{
text-align:center;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
color: #545454!important;
text-decoration: none;
transition: 0.3s ;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a:hover {
color:#FFCA28!important; /* テキストリンクカラー(マウスオーバー時) */
text-decoration: none !important;
}

@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
}
}
@media screen and (max-width: 480px){
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
}
}
/*================== image */
@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-img p.easyLink-img-box {
align-items: start!important;
}}

div.easyLink-img{
height: 200px!important;
}
.easyLink-img-box {
height: 200px!important;
}
.easyLink-img-box span > img {
max-height: 200px!important;
}
@media screen and (min-width:481px) and (max-width: 620px){
div.easyLink-box div.easyLink-img{
margin-right: 0px!important;
display:inline-block!important;
}
div.easyLink-box div.easyLink-img p.easyLink-img-box {
display:inline-block!important;
}
}
div.easyLink-box div.easyLink-img a.easyLink-arrow-left img, div.easyLink-box div.easyLink-img a.easyLink-arrow-right img {/*左右矢印の影非表示*/
box-shadow:none;
}
/*================ btn */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
transition: 0.4s ease-out!important;
padding:.3em 0!important;
border-radius: 20px!important;
}

@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .5em!important;
justify-content: center!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin: .5em 0 0 0 !important;
padding: 8px 0!important;
border-radius: 20px!important;
width:65%!important;
}
}

div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-amazon {background: #ff9901;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-amazon:hover{background: #FEBD69;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-rakuten {background: rgb(191,0,0);}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-rakuten:hover{background: #FA5858;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-yahoo {background: #FF0033;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-yahoo:hover{background: #F7819F;}

@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .2em!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin-top: .5em!important;
margin-bottom: 0!important;
padding: 8px 0!important;
border-radius: 20px!important;
width:65%!important;
}
}
@media screen and (max-width: 620px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin-top: .3em!important;
padding: 8px 0!important;
border-radius: 20px!important;
width:85%!important;
}
}
p.easyLink-info-model{/*モデル非表示*/
display:none;
}

ごらんの通り、初心者ながらデザイン変更に挑戦したので、〈!important〉で優先順を上げて対応している箇所が多いです。

修正案がありましたら、是非コメントにてご教授ください。

こちらの記事もよく読まれています

【WordPress】目次のおすすめカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの目次をカスタマイズします。スキンは、takasakiさん作「ホワイトラーメン」をベースにちょこちょこ自分でカスタマイズしてます。
【Googleアドセンス】自動広告を今すぐ導入すべき理由!
Googleアドセンス公式ブログには、今後数か月にわたって自動広告のアップデートに力を入れることが書かれており、この流れに乗っておくことが吉だと考えたので実際に導入してみました。広告設定を画像付きで詳しく解説します。
おすすめのフリー素材サイト9選!!【気になる著作権も徹底的に解説します】
おすすめのフリー素材サイトを紹介します。また、サイト運営者やクリエイターなら誰しもが気になる「著作権」についても、掲載サイトごとに徹底的にまとめました。

コメント

タイトルとURLをコピーしました