SWELLで使えるトマレバのような旅行先(ホテル・旅館)リンク作成ツール【カスタマイズ】

トマレバのようなホテルリンクをカスタマイズするためのツールになります。

出力ボタンを押すと、以下のような見た目のボタンができあがります。
(クリックで拡大します)

バリューコマースのLinkSwitch機能を使うことで、URLが自動的にアフィリエイトリンクに変換されます。

ご自身のブログで使用する場合は、以下のCSSをコピーして設定してみてください。

CSSを見る

.hotel-container {
    width: 100%;
    margin: auto;
    display: flex;
    border-top: solid 3px #04384c;
    border-bottom: solid 3px #04384c;
    padding-bottom: 15px;

}
.hotel-image {
    width: 40%;
    display: flex;
    flex-direction: column;
    
}
.hotel-image img {
    padding-top: 5px;
    max-width: 100%;
    max-height: 100%;
    margin-bottom:0px;
}
.hotel-text div {
    text-align: center;
}
.hotel-link-buttons {
    width: 66%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-evenly;
    margin-top: 15px;
}
.hotel-column {
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.hotel-link-buttons a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    margin: 10px 15px;
    border-radius: 5px;
    text-align: center;
    width: 200px;
    height: 40px;
    display: flex;
    justify-content: center;
    gap: 5px;
    line-height: 1.4;
}

.hotel-link-buttons img {
    height: 1em;
    width: auto;
    margin-right: 5px;
    vertical-align: middle;
    transform: translateY(20%); 
}

.hotel-link-buttons a:hover {
    opacity: 0.8;
}
.hotel-link-buttons .site-rakuten-travel {
    background-color: green;
}
.hotel-link-buttons .site-jaran {
    background-color: orange;
}
.hotel-link-buttons .site-jtb {
    background-color: maroon;
}
.hotel-link-buttons .site-ikkyu {
    background-color: gold;
}
.hotel-link-buttons .site-rurubu {
    background-color: navy;
}
.hotel-link-buttons .site-yahoo-travel {
    background-color: red;
}

@media only screen and (max-width: 1199px) {
  .hotel-container {
    flex-direction: column;
  }
  .hotel-image, .hotel-link-buttons {
    width: 100%;
  }
  .hotel-link-buttons {
    flex-direction: row;
    justify-content: space-evenly;
  }
  .hotel-column {
    width: 45%; 
    margin: 0 auto; /* ボタン列を中央寄せにする */
  }
  .hotel-link-buttons a {
    width: 100%; /* ボタンの幅を固定する */
    margin: 10px auto; /* 上下のマージンを設定し、左右のマージンを自動にする */
  }
  .small-text-size {
    font-size: 90%;
  }
}