[コピペOK]トマレバのカスタマイズ「カード表示」っぽくするCSSを作成しました

ブログ運営・ウェブ運営をしている人むけに「トマレバ」のカスタマイズをご紹介します。
私たちが運営している沖縄の観光サイト「ODAY」でも、実際に使っているカスタマイズ。コピペで使えるようになっているのでご活用くださーい!

トマレバってなに?

トマレバCSS
トマレバとは、ブログ・サイト上で、宿やホテルを紹介するためのブログパーツです。楽天トラベル、じゃらん、JTBなどの宿泊予約サイトへのリンクを、簡単に表示できるようになります。
宿泊関係のリンクって生成するのが手間ですが、トマレバを使うと作業が一気に効率アップしますよ!

ちなみにトマレバは宿泊用のツールですが、同じようなもので、ネット通販用の「カエレバ」、書籍の紹介用「ヨメレバ」なんかもあります。

どれも便利でよく使わせていただいております。

わかったブログのかん吉さん、いつも素敵なツールをありがとうございます!)

トマレバのカスタマイズ

今回、ご紹介するのはこんな感じのカスタマイズ。

トマレバ サンプル

DEMO

トマレバで生成したホテルのリンクをシンプルな表示に切り替えます。各旅行サービスへのリンクはブランドカラーに寄せた色合いのボタンにしてあります。

カスタマイズCSSの注意点

トマレバでリンクを生成する際に注意点があります。

トマレバCSSのカスタマイズ
デザインは、「amazlet風-2(cssカスタマイズ用)」を選択してお使いください!
(これに合わせてCSSを作っていますので、これ以外で表示確認していません)

カスタマイズ用CSSコード(コピペOK)

こちらがCSSコード。

これをコピペしてスタイルに加えれば、そのまま適用されます。CSSが分かる方は、あとはお好みで調整しても良いと思います。

記事中のコードは、動作を保証するものではございません。コードを利用したことで起きた一切の負債について当方は責任を負いません。必ず自己責任にてご利用くださいませ。

スポンサーリンク
スポンサーリンク

記事を書いたひと

みなみのひげ記事数 32本
南の島のヒゲ系ウェブデザイナー。風景とオカヤドカリ写真家。

また読みたいと思ったひとはいいね!

後回しにしているお買い物はありませんか?