ホーム / Tools /

カッテネでAmazonと楽天のアフィリエイトリンクを並べてみた

2019/11/22 2019/12/01

Tools

複数のアフィリエイトを並べるには、もしもアフィリエイトやカエレバ、ヨメレバなどいろいろなサービスがあるみたいです。

よく使い方がわからなかったので、サービスに頼らず、できるだけ効率良くできる方法を探してみました。

Contents[非表示]

カッテネ

みつけたのはカッテネでした。

カッテネは5つまでのリンクボタンが並べられて、レスポンシブに対応しててスマホでみてもキレイに表示されます。

WordPressにはプラグインがあり、簡単にできるそうですが、それ以外の人は手入力で、ちょっと大変ですが、サービス元に影響を受けずに使えるのでありがたいです。

BloggerでもCSSをテンプレートに入れておけば、あとは投稿のときに貼り付けるだけです。

カッテネリンク自動生成ツール

とはいっても、毎回ひとつひとつ貼り付けるのは手間なので、簡単な方法はないかなーと探してみると、効率化できる方法を発見しました。

「カッテネリンク自動生成ツール」フォームに入力するだけでHTMLを表示してくれて、とっても便利です。

デザイン変更

CSSを変更することで自由にデザインを変えられます。

Rinkerというサービス用のカスタマイズのようですが、デザインはこちらの方のを参考にして変更してみました。


完成！

この方法だと、たくさんアフィリエイトを貼り付けたい人はちょっと手間かもしれませんが、それ以外の人は便利に使えるのではないでしょうか。

Kindle フロントライト搭載 Wi-Fi 4GB ブラック 広告つき 電子書籍リーダー
Amazon

ロウソクの科学 (角川文庫)
文庫 – 2012/5/27
ファラデー (著), 三石 巌 (翻訳)

CSSのソースコードが長いので、ボタンの色は今のところ3色分しか記載していません。
ボタンの下に余白があった方が良いと思ってボタンを上げすぎたので、写真が小さい場合、説明文とボタンが重なってしまうかもしれないです。
まあでもしばらくこのままで使ってみようと思います。

  1. .kattene {
  2. border: solid 2px #e5e5e5;
  3. border-radius: 5px;
  4. box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);
  5. padding: 10px;
  6. padding-bottom: 7px;
  7. padding-right: 10px;
  8. padding-left: 20px;
  9. margin-bottom: 1em;
  10. box-sizing: border-box;
  11. }
  12. .kattene a {
  13. color: rgb(61,63,68) !important;
  14. text-decoration: none;
  15. }
  16. .kattene .kattene__btns a:link {
  17. color:fff;
  18. font-size: .8em;
  19. }
  20. .kattene div{
  21. margin: 0;
  22. }
  23. .kattene__imgpart {
  24. text-align: center;
  25. }
  26. .kattene__description {
  27. font-size: 0.7em;
  28. }
  29. .kattene .kattene__btns {
  30. width: 100%;
  31. margin-top: 0.5em;
  32. }
  33. .kattene__btns:after {
  34. display: block;
  35. clear: both;
  36. height: 0px;
  37. visibility: hidden;
  38. content: ".";
  39. }
  40. .kattene__btns > div {
  41. float: left;
  42. margin-bottom: 5px;
  43. }
  44. .kattene__btns .kattene__btn {
  45. width: 95%;
  46. padding-left: 0;
  47. padding-right: 0;
  48. }
  49. .kattene__btns.__three > div {
  50. width: 32.66667%;
  51. }
  52. .kattene__btns.__three > div:not(:last-child) {
  53. margin-right: 1%;
  54. }
  55. .kattene__btns.__two > div {
  56. width: 49.5%;
  57. }
  58. .kattene__btns.__two > div:nth-child(odd) {
  59. margin-right: 1%;
  60. }
  61. @media screen and (max-width: 900px) {
  62. .kattene__imgpart {
  63. padding-bottom: 1em;
  64. }
  65. .kattene .kattene__btns {
  66. margin-top: 0.5em;
  67. }
  68. .kattene__btns.__five > div {
  69. width: 49.5%;
  70. }
  71. .kattene__btns.__five > div:nth-child(odd) {
  72. margin-right: 1%;
  73. }
  74. .kattene__btns.__five > div:last-child {
  75. margin-right: 0;
  76. float: right;
  77. }
  78. .kattene__btns.__four > div {
  79. width: 49.5%;
  80. }
  81. .kattene__btns.__four > div:nth-child(odd) {
  82. margin-right: 1%;
  83. }
  84. .kattene__btns.__one > div {
  85. width: 50%;
  86. margin-left: 25%;
  87. }
  88. }
  89. @media screen and (min-width: 901px) {
  90. .kattene {
  91. display: table;
  92. width: 100%;
  93. }
  94. .kattene__imgpart {
  95. display: table-cell;
  96. width: 20%;
  97. padding-bottom: 5px;
  98. 　}
  99. .kattene__infopart {
  100. display: table-cell;
  101. vertical-align: top;
  102. position: relative;
  103. padding-left: 10px;
  104. width: 80%;
  105. }
  106. .kattene__infopart a:active{
  107. text-decoration: none;
  108. }
  109. .kattene__infopart a:visited{
  110. text-decoration: none;
  111. }
  112. .kattene .kattene__description {
  113. margin-bottom: 4em;
  114. }
  115. .kattene__btns {
  116. position: absolute;
  117. bottom: 0;
  118. box-sizing: border-box;
  119. padding-right: 10px;
  120. }
  121. .kattene__btns.__five > div {
  122. width: 19.2%;
  123. }
  124. .kattene__btns.__five > div:not(:last-child) {
  125. margin-right: 1%;
  126. }
  127. .kattene__btns.__four > div {
  128. width: 24.25%;
  129. }
  130. .kattene__btns.__four > div:not(:last-child) {
  131. margin-right: 1%;
  132. }
  133. .kattene__btns.__two > div {
  134. width: 49.5%;
  135. }
  136. .kattene__btns.__two > div:not(:last-child) {
  137. margin-right: 1%;
  138. }
  139. .kattene__btns.__one > div {
  140. width: 49.5%;
  141. float: right;
  142. }
  143. }
  144. .kattene .kattene__btn {
  145. appearance: none;
  146. background-color: #fff;
  147. border: 0;
  148. border-radius: 1;
  149. color: #fff;
  150. cursor: pointer;
  151. display: inline-block;
  152. font-size: .9em;
  153. -webkit-font-smoothing: antialiased;
  154. font-weight: 600;
  155. line-height: 1.7;
  156. padding: 0.75em;
  157. text-decoration: none;
  158. transition: background-color 150ms ease;
  159. user-select: none;
  160. vertical-align: middle;
  161. white-space: nowrap;
  162. }
  163. .kattene__btn:hover, .kattene__btn:focus {
  164. background-color: #439aa7;
  165. text-decoration: none;
  166. color: #fff !important;
  167. }
  168. .kattene__btn:disabled {
  169. cursor: not-allowed;
  170. opacity: 0.5;
  171. }
  172. .kattene__btn:disabled:hover {
  173. text-decoration: none;
  174. background-color: #54c0d1;
  175. }
  176. .kattene__btn.__small {
  177. padding: 0.55em;
  178. font-size: 0.9em;
  179. }
  180. .kattene__btn.__orange {
  181. background-color: #FFC266;
  182. margin-bottom: 5px;
  183. border-radius: 3px;
  184. text-align: center;
  185. }
  186. .kattene__btn.__orange:hover {
  187. background-color: #ffa011;
  188. }
  189. .kattene__btn.__orange i {
  190. font-weight: bold;
  191. }
  192. .kattene__btn.__orange i:before {
  193. vertical-align: middle;
  194. font-size: 1.2em;
  195. margin-right: 0.2em;
  196. }
  197. .kattene__btn.__orange:after {
  198. position: absolute;
  199. right: auto;
  200. padding-left: 5px;
  201. font-family: "Font Awesome 5 Free";
  202. font-weight: 900;
  203. content: "\f138"!important;
  204. transition: .1s ease-in-out;
  205. }
  206. .kattene__btn.__red {
  207. background-color: #ff7c74;
  208. margin-bottom: 5px;
  209. border-radius: 3px;
  210. text-align: center;
  211. }
  212. .kattene__btn.__red:hover {
  213. background-color: #ff2c1f;
  214. }
  215. .kattene__btn.__red i {
  216. font-weight: bold;
  217. }
  218. .kattene__btn.__red i:before {
  219. vertical-align: middle;
  220. margin-right: 0.2em;
  221. }
  222. .kattene__btn.__red:after {
  223. position: absolute;
  224. right: auto;
  225. padding-left: 5px;
  226. font-family: "Font Awesome 5 Free";
  227. font-weight: 900;
  228. content: "\f138"!important;
  229. transition: .1s ease-in-out;
  230. }
  231. .kattene__btn.__blue {
  232. background-color: #90CAF9;
  233. margin-bottom: 5px;
  234. border-radius: 3px;
  235. text-align: center;
  236. }
  237. .kattene__btn.__blue:hover {
  238. background-color: #3fa4f5;
  239. }
  240. .kattene__btn.__blue i {
  241. font-weight: bold;
  242. }
  243. .kattene__btn.__blue i:before {
  244. vertical-align: middle;
  245. margin-right: 0.2em;
  246. }
  247. .kattene__btn.__blue:after {
  248. position: absolute;
  249. right: auto;
  250. padding-left: 5px;
  251. font-family: "Font Awesome 5 Free";
  252. font-weight: 900;
  253. content: "\f138"!important;
  254. transition: .1s ease-in-out;
  255. }

自分の写真

mimito

世界中を旅するノマドなミニマリストに憧れているものの、デザインとプログラムの間で迷子になったあげく、たくさんの物に囲まれ、引きこもりがちな生活を送っております。複雑系とか多世界解釈とかよくわからないけど、興味津々です。

Archive

Label

QooQ