【sango】プロフィールにAmazonと楽天ROOMのボタンを追加する方法!コピペOK!

Amazon 楽天マーク

この記事はSaruwakaさんが作成した有料テーマ【SANGO】の方向けの記事になります。

SANGO有料テーマ公式ページはこちら。
参考 SANGOSANGO

Amazonウィッシュリストや楽天Roomは登録していますか?

私はつい先日登録したばかりです。

ココ最近、個人スポンサー様が増え、スポンサーへのリンクを貼ってAmazonのウィッシュリストに登録されたものを支払っていただくという方法が増えています。

楽天Roomは、自分のROOMから商品が購入された場合、ポイントが還元される仕組みになっています。

登録していない方はこの際いかがでしょうか?

今回は当サイトでも使用しています【SANGO】のプロフィール欄に表示されるSNSのボタンにAmazonウィッシュリストと楽天Roomへのリンクを作りました。

その方法について記事にしたいと思います。

また、当サイトはマサオカブログさん作成のSANGO公認クイック子テーマ【PORIPU tears】を使用しています。

SANGO子テーマでもPORIPU tearsでも動作は確認していますので、【たぶん】PORIPU通常版でも問題なく可動するはずです。

下準備
  • Fontawesome4.7から5.0への変更

注意点

先に注意点を説明します。

標準のSNSボタン(Twitter、Facebook、Instagram、Feedly、LINE)に付け加えると、行送りされてしまい、見栄えが悪くなりました。

なので、1つ追加するごとに、1つのボタンを犠牲にしなければなりません。

例えば
Amazonだけ追加するならLINEを犠牲にする。両方追加するならFacebookとLINEを犠牲にするなど。

小さくして並ばせようとしたら、今度はタップしづらいという欠点が生まれてしまいましたので、ここでは5個の横並びとさせていただきます。

私はインスタグラムをやっていないので、インスタグラムとLINEを犠牲にしました。

完成図がこちら

実際の搭載した感じがこちらになります。

プロフィール画像

amazonのwishlistと楽天Roomマークのcss完成

スマホのハンバーガーメニューの中

スマホのメニューの中

サイドバーのプロフィールへの追加

サイドバーのプロフィール設定が終わっているものとしてお話を進めますので、終わっていない方はこちらへ。
参考 サイドバーや記事下にプロフィール(この記事を書いた人)を設置するSANGOカスタマイズガイド

Amazonボタンとリンクの追加

プロフィール用HTML

プロフィール用HTMLは以下のようになっています。


<div class="yourprofile">
   <p class="profile-background"><img src="★背景画像のURL★"></p>
   <p class="profile-img"><img src="★プロフィール画像のURL★" width="80" height="80"></p>
   <p class="yourname dfont">★名前★</p>
</div>
<div class="profile-content">
  <p>★プロフィール文★</p>
</div>
<ul class="profile-sns dfont">
    <li><a href="★twitterのURL★"  target="_blank" rel="nofollow" ><i class="fab fa-twitter"></i></a></li>
    <li><a href="★facebookのURL★" target="_blank" rel="nofollow"><i class="fab fa-facebook"></i></a></li>
    <li><a href="★instagramのURL★" target="_blank" rel="nofollow"><i class="fab fa-instagram" ></i></a></li>
    <li><a href="★feedlyのURL★"  target="_blank" rel="nofollow"><i class="fas fa-rss"></i></a></li>
    <li><a href="★LINEのURL★" target="_blank"><i class="fab fa-line"></i></a></li>
</ul>

この15行目(LINEの部分)を下のように書き換えます。


<li><a href="★AmazonほしいものリストのURL★" target="_blank"><i class="fab fa-amazon"></i></a></li>

css

子テーマのstyle.cssに以下を貼り付けます。

css

//amazonボタンの色
i.fab.fa-amazon {

    background-color: #febe31!important;

}

cssを使わない方向け

サイドバーの中のプロフィールでしかAmazonボタンを使わないのであれば、spanタグで色を指定しても良いかも知れません。

その場合はこちら。


<li><a href="★AmazonほしいものリストのURL★" target="_blank"><span style="color:#febe31!important;"><i class="fab fa-amazon"></i></span></a></li>

これでAmazonほしいものリストへのボタンが完成したはずです。

スマホ用のハンバーガーメニューへ入れ込みたい方は、ハンバーガーメニューウィジェットの中にカスタムHTMLを入れて、ボタンのコードを5種類入れれば簡単にできます。

Amazonボタンも簡単にできちゃう。
そう、SANGOならね。

楽天ボタンとROOMへのリンク

今度は少しハイレベルになります。

というのは、を使用するのですが、このすでに丸いのです

丸を丸で囲むと、非常に見栄えが悪くなってしまうため、若干丸くした四角のボタンに強制的に変更するようにしました。

ウィジェットに入れるコードがこちら。

HTML

	<li><a href="https://room.rakuten.co.jp/room-conayuki/items" target="_blank" rel="nofollow"><i class="fas fa-registered fa-2x"></i></a></li>

クラスにfa-2x入ってることにお気づきでしょうか?

これはスマホのハンバーガーメニューの中にシェアボタンを入れるための差別化です。

スマホのハンバーガーメニューにSNSボタンを表示させない方は、fa-2xの指定を外しても全く問題ありません。

は?
なに言ってっか全然わかんねーよっ
て方は、まるっとコピペしてください。

ただし、これだけでは上手く表示されません。

子テーマのstyle.cssへの追記が必要になります。

追記するcssがこちら。

css

i.fab.fa-amazon {
    background-color: #febe31!important;
}

.profile-sns li i {
    border-radius: 20%!important;
    
}

i.fas.fa-registered {
    background: #f00!important;
    color: #fff!important;
}

i.fas.fa-registered.fa-2x {
    display: inherit;
    border-radius: 20%;
    font-size: 30px;
    text-align: center;
    padding: 5px;
}

これで、丸みを帯びた四角に変更し、かつちょうどいい大きさで楽天マークが出力されます。

注意
本体のcssファイルを変更しないでください。
また、編集はバックアップをとってから編集してください。
また、自己責任でお願いします。

いかがでしたでしょうか?

楽天マークは、今の楽天マークとは若干違いますが、あー楽天だーと思ってもらえるには十分な出来かなと思います。

最後までお読みいただき、ありがとうございました。

次回予告!
この記事を書いた人にamazonマークと楽天マークを表示させます