ウィジェットの使い方（アフィリエイト対応）

受付中の案件情報一覧を出力するウィジェットを提供しています。
JavascriptのコードをHTML上に掲載するだけで、新着案件一覧などを好きなページに配置することができます。
ラッコIDアフィリエイトにも対応しているので、あなたのサイトやシステムに組み込んで報酬獲得に繋げることもできます！

ラッコツールズのように案件一覧を好きな場所に配置することができます！
バランスよく出力されるtype未指定がおすすめ！

設置タグ（レスポンシブ）

<script class="rakkoma-widget" src="https://api.rakkoma.com/js/widget.js"></script>

リクエストパラメータ（オプション）

パラメータ名 説明/値
type 出力タイプ
pickup=ピックアップ案件のランダム
new=新着順
random=ランダム
default=おすすめ案件+PICKUP+ランダムの混合（デフォルト値）
limit 最大出力数
int(2) / max:50 default:10
r あなたのアフェリエイトコードを指定する
アフィリエイトリンクとして出力されます
アフィリエイトコード（英2文字+数字8文字）の確認はこちら

サンプル（新着・5件・アフィリエイトコード付与）

設置タグ

<script class="rakkoma-widget" src="https://api.rakkoma.com/js/widget.js?type=new&limit=5&r=TN88969039"></script>

見た目変更（CSS編集）

設置タグを記載した位置に、javascriptが以下のHTMLタグ/CSSを動的に出力しています。
出力されるHTMLタグには特定のclassを割り振っているので、詳細度の高いcssセレクタを指定することにより、適用されるcssを上書きすることができます。
設置サイトのデザインに合ったカスタマイズを試してみてください。

<div class="rakko_ma_list">
  <div class="rakko_ma_head">
    <img src="https://rakkoma.com/img/rakko_ma_balloon.png" alt="M&Aラッコ" class="ma_rakko_img">
    <p>「サイト売買」売り出し中案件</p>
  </div>
  <ul class="title-list-box">
    <li>
      <a href="{案件詳細ページURL}" target="_blank" rel="noopener nofollow">{案件名}（希望売却価格：
        <strong>{希望売却価格}円</strong>）</a>
    </li>
    .
    .
    .
    .
  </ul>
  <div class="rakko_ma_footer">
    <a href="https://rakkoma.com?r=TN88969039" target="_blank" rel="noopener nofollow">Powered by サイト売買のラッコM&A</a>
  </div>
</div>

<style type="text/css">
html,
body,
img,
div,
a,
ul,
li {
  margin: 0px;
  padding: 0px;
  border-width: 0px;
  line-height: 1;
  font-size: 100%;
  transition-property: none;
}

body {
  font-size: 15px;
  letter-spacing: 0.03em;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  font-feature-settings: "pkna";
  -webkit-text-size-adjust: 100%;
}

@media screen and (min-width: 0px) and (max-width: 480px) {
  body {
    font-size: 13px;
  }
}

.rakko_ma_list {
  border: 1px solid #ccc;
  border-radius: 5px;
}

.rakko_ma_list ul.title-list-box {
  margin: 0px;
  padding: 0px;
}

.rakko_ma_list ul.title-list-box li {
  list-style-type: none;
  border-top: 1px solid #e0e0e0;
  background-color: #fff;
}

.rakko_ma_list ul.title-list-box li a {
  text-decoration: none;
  display: block;
  padding: 0.4em 1em;
  line-height: 1.4;
  cursor: pointer;
  text-align: justify;
  color: #0d64cc;
}

.rakko_ma_list ul.title-list-box li:first-child a {
  padding-top: 0.8em;
}

.rakko_ma_list ul.title-list-box li a:hover {
  text-decoration: underline;
  background-color: #f2f8fe;
}

.rakko_ma_list ul.title-list-box li.rakko_ma_see_more {
  border-top: none;
  padding: 0.4em 1em 0.8em;
}

.rakko_ma_list ul.title-list-box li.rakko_ma_see_more a {
  color: #222;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 40px;
  letter-spacing: 1px;
  max-width: 400px;
  margin: 0 auto;
  padding: 0.5em 1em;
  text-align: center;
}

.rakko_ma_list ul.title-list-box li.rakko_ma_see_more a:hover {
  text-decoration: none;
  background-color: #f2f8fe;
}

.rakko_ma_list .rakko_ma_head {
  background-color: #f2f2f2;
  color: #333;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 5px 5px 0px 0px;
  padding: 0px 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rakko_ma_list .rakko_ma_head p {
  line-height: 1.3;
  margin-left: 7px;
}

.rakko_ma_list .rakko_ma_head .ma_rakko_img {
  width: 14vw;
  max-width: 55px;
  align-self: flex-end;
}

@media screen and (min-width: 0px) and (max-width: 480px) {
  .rakko_ma_list .rakko_ma_head {
    font-size: 1.1em;
  }

  .rakko_ma_list .rakko_ma_head .ma_rakko_img {
    max-width: 45px;
    min-width: 45px;
  }
}

.rakko_ma_list .rakko_ma_footer {
  text-align: right;
  border-radius: 0px 0px 5px 5px;
  border-top: 1px solid #e0e0e0;
  background-color: #f2f2f2;
  padding: 0.5em 1em;
  line-height: 1.7;
}

.rakko_ma_list .rakko_ma_footer a {
  text-decoration: none;
  color: #0d64cc;
}

.rakko_ma_list .rakko_ma_footer a:hover {
  text-decoration: underline;
}

.icon_triborder {
  position: relative;
  display: block;
  padding-left: 17px;
}

.icon_triborder:after {
  content: "";
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  margin-top: -3.5px;
  height: 6px;
  width: 6px;
  position: absolute;
  top: 50%;
  right: 5%;
  -webkit-transform: rotate(135deg);
  transform: rotate(45deg);
}
</style>