Amazonとか楽天の商品をブログなどで簡単に紹介できるサービス「カエレバ」のCSSをいじってみたので載せておきます。
オープンケージ製のWordpressテーマ「ストーク
」での使用を前提に作っています。
オープンケージ系のテーマなら多分大丈夫だと思うのですが、ストーク以外のテーマでは全くテストしてないので、表示崩れとか出るかも。
また、Amazonのロゴ部分などにfontawesomeを使っていますので、こちらも合わせて導入してくださいませ。
スマホで見た時の感じを基準に作ってるので、PCやタブレットビューは結構適当。
カエレバ、こんな感じにしてみたよ
カエレバカスタマイズ用のCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
/* カエレバのスタイル */ .kaerebalink-image a[target="_blank"]:after { content:''; } .shoplinkamazon img, .shoplinkrakuten img{ display:none; } .shoplinkamazon a{ margin-top: 5px; margin-bottom: 5px; width: 100%; color: #232F3E; font-feature-settings: "palt"; background-color: #f0ad4e; border-color: #eea236; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 1.2em; font-weight: bold; line-height: 1.42857143; text-decoration: none; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .shoplinkamazon a:before{ font-family: 'FontAwesome'; content:"\f270"; font-size: 0.9em; margin: 0 0.5em 0; } .shoplinkamazon a:hover{ color: #fff; background-color: #ec971f; border-color: #d58512; } .shoplinkrakuten a{ margin-top: 5px; margin-bottom: 5px; width: 100%; color: #fff; background-color: #BF0000; border-color: #d43f3a; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 1.2em; font-weight: bold; font-feature-settings: "palt"; line-height: 1.42857143; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .shoplinkrakuten a:before{ content:'®'; font-size: 1.1em; margin: 0 0.5em 0; font-weight: bold; } .shoplinkrakuten a:hover{ color: #232F3E; background-color: #c9302c; border-color: #ac2925; } /* -------------------------------------------------- スマホ用 -----------------------------------------------------*/ @media only screen and (max-width: 414px) { .kaerebalink-box{ padding: 2em 1em 2em 1em; margin-top:2em; margin-bottom:2em; border: 1px solid #ccc; border-radius: 3px; } .kaerebalink-box img{ border:1px solid #ccc; } .kaerebalink-box .kaerebalink-name{ font-size:medium; margin-top:1em; } .kaerebalink-box .kaerebalink-image{ float: none!important; margin: 0!important; text-align: center; } .kaerebalink-box .kaerebalink-info{ line-height: 120%; overflow: hidden; display: block; margin-right: auto; margin-left: auto; text-align: center; } } |
ホントは”!important”とか使うべきじゃないんだろうけど面倒なんでこれで許してね！
使用したものなどのリンク
カエレバ
http://kaereba.com/
Fontawesome
http://fontawesome.io/
オープンケージ
WordPressテーマ「ストーク」
