PR
スポンサーリンク

wp-rakuten-linkをレスポンシブっぽくカスタマイズ

WordPressはブログ作成ツール

頑張らない筋トレ管理人のさっちんです。

このブログはWordpressを使って作っています。

この”Wordpress”ってやつは簡単に言うとブログ作成ツールなのですが、結構フレキシブルで、カスタマイズの自由度が高いですし、プラグインも色々なモノがあって自分好みにしていけるところが良いです。

そのプラグインの一つに楽天関係で『wp-rakuten-link』というものがあり、今回はこのプラグインをレスポンシブっぽくカスタマイズしてみようと思います。

それでは、そろそろ行きましょう。

プロテインを調べているとき

とても役に立つプラグイン

このwp-rakuten-linkっていうプラグインは『楽天市場の商品を検索して記事に挿入する』というプラグインです。

実は、普通に楽天の商品をブログに掲載しようとするといちいち楽天のホームページに飛んで、定型から選ぶという形でした。例えばこんな感じのもの。

悪くはないのですが、いかにも標準っぽいビジュアルでどうにかならないかなぁ、って感じ。

それをこのwp-rakuten-linkを使うと、楽天のホームページに行くことなく、

好評につき売切れです

こういう感じのものを張ることが出来ます。
多少おしゃれで、見やすくなりましたよね？

カスタマイズしてみる

そんな感じで重宝しつつあるのですが、ちょっとCSSのソースを確認すると横幅(width)が固定されていて、スマホ用サイトを見ると合わなくて少し残念。

ので、レスポンシブっぽく少しだけカスタマイズしてみました。

やり方は簡単

wp-rakuten-linkフォルダ内の『rew-san.css』の一番下に、下のコードを張り付けるだけです。

/* responsive っぽくする */
@media (max-width: 639px) {
    div.rakuten_details {
	  width:100%;
	}
    div.rakuten_details div.rakuten_image {
	  margin : 2px;
	  padding: 2px;
    }
    div.rakuten_details div.rakuten_image a img {
      width:80px;
    }
    div.rakuten_details div.rakuten_info {
      width:auto ;
      float:none;
	  margin-left:90px;
	  padding:0;
	  font-size:0.8em;
    }
}

ちなみに、私はテーマにsimplicityを使っているので、ブレークポイントはその幅に合わせています。

それと、商品タイトルなどのフォントサイズを少し小さくしたりアンダーラインを引いたりするためにrew-san.cssの他の個所を多少いじっています。
まぁおそらくここら辺は知っていると思いますので、ここでは割愛。

なお、私はCSSなどの言語は勉強したことがなく、ただ触りまくって動きから推測している人なので、何か不備有りましたら指摘いただけると有り難いです。
ｍ(＿＿)ｍ

ではでは

コメント