こんにちは！
Yuki (@yukibnb) です。
今日は民泊やホテルなどの宿泊者様向けサイトコントローラー『Beds24』のカスタマイズ方法を紹介します。
「Beds24って何？」という民泊運営者の方は是非以下記事をご覧ください。Beds24は民泊における様々な処理を効率化・自動化できるサイトコントローラーです。
www.yukibnb.com
Beds24のデザインはCSSでカスタマイズ可能
Beds24はカスタマイズ性の高さが大きな魅力です。
標準でも様々な機能が備わっており、Settings内で細かな設定ができます。正直それだけでも十分便利ですがBeds24ではCSSの記述もできるためより便利に見やすくカスタマイズすることも可能です。
民泊運営者の方それぞれのスタイルにあったBeds24のデザインを実現できます。
この記事で紹介するカスタマイズはコピペでOKなのでCSSが苦手な方もご安心ください。
Booking Gridの土日だけ色を変更する方法
変更前 / 変更後の見た目
Beds24のBooking Gridは複数のPropertyやRoomの予約状況を一覧表示できます。
Calendarよりもすっきりしているため僕はよくBooking Gridを使用します。Booking Gridは標準では以下のような見た目です。
平日も土日も同じ色ですね。
CSSでカスタマイズすると以下のような見た目になります。
土日が一目でわかるようになりましたね！
では設定方法へと進みましょう。
コピペでOK！CSSの設定手順
Beds24の画面右上の「Sub Accounts」をクリックしてください。
画面が切り替わりMaster AccountとSub Accountsのリストが表示されます。Mater Accountの「Manage Account」をクリックしてください。
するとまた画面が切り替わります。Menu Settings内の「Control panel custom CSS」内に以下のコードをコピペしてください。
.weekend2 { background-color: #c10303; color: #ffffff; }
コピペすると以下のようになります。
「Save」をクリックすると完成です！とても単純でしたね。
ではBooking Gridに戻ってみましょう。以下のようになっているはずです。
《後日解決済み！》Calendarでは一部正しく表示されない場合があり
Beds24のBooking Gridでは土日の日付に「weekend2」というCSSで使用できるclassが設定されているため、それを使って土日の色を変更しています。
この「weekend2」はBooking GridだけでなくCalendarでも併用されているため、Calendarでも土日の色が変わります。
ですがなぜか僕のBeds24アカウントではCalendar表示にすると一部Propertyの土日の日付に「weekend2」が付与されておらず以下画像のように色が変わるPropertyと変わらないPropertyが混在します。
この現象はBooking Gridでは発生しておらず、Calendarのみで発生しています。
僕のアカウントだけなのか、もしくは単に一時的なものなのかはわかりませんがこういう場合もあることをお伝えします。
【追記】
Beds24サポートに問い合わせたところ、すぐにCSSの「weekend2」classを修正してくれたので上記問題は解決しました。
Beds24はwiki (ヘルプページ)が充実しているので問い合わせることはほとんどありませんが、たまに問い合わせると技術的な内容でもレスポンスよく対応してくれるのでありがたいです。
まとめ
今回はBeds24のBooking Gridで土日の色を目立たせるCSSカスタマイズ方法を紹介しました。
民泊運営の業務効率化に少しでもお役に立てばうれしいです！
