![見出し画像](https://assets.st-note.com/production/uploads/images/83031607/rectangle_large_type_2_368d7449b4212cd066722af28d8f2927.png?width=800)
【Beds24予約エンジン】CSSで囲み線を描いて、コンテンツを目立たせる方法
Beds24予約エンジンは、CSS*によるカスタマイズができます。
*Webページのスタイルを指定するための言語(詳細)
今回の内容は、『囲み線』の設定方法です。
CSSの知識がない人でも設定できるよう解説しています。
囲み線を使用する目的
文章を目立たせたり、表示をスッキリさせることができます。
文章を目立たせる
![](https://assets.st-note.com/img/1658306046770-JZLly4Q7mb.png?width=800)
表示をスッキリさせる
![](https://assets.st-note.com/img/1658306049555-ylw6wKMbL2.png?width=800)
囲み線を設定する前に覚える基本的な内容
CSSの仕組み
以下の形で構成されます。
![](https://assets.st-note.com/img/1658306045454-p8syPGx0mZ.png?width=800)
囲み線を設定するのに必要な3つの内容
以下の3つを覚えれば、CSSで囲み線を作ることができます。
![](https://assets.st-note.com/img/1658306038752-wYpuKAYqqP.png?width=800)
例えば、
background:#ffffff;border:2px solid #000000;padding:5px 10px;
を入力すると、以下のように反映されます。
![](https://assets.st-note.com/img/1658306035764-nlwjqXo7hl.png?width=800)
※囲み線のスタイルについては後述します。
※カラーコード(6桁)をコピーする方法はこちら
設定方法
設定は、Beds24管理画面のあらゆる箇所で実施できます。
設定箇所がご不明な場合は、メールサポートまで。
例として、ここでは『プロパティ概要1』で解説を進めます。
①予約エンジン > プロパティ予約ページ > コンテンツを開く
②プロパティ概要1の『編集』ボタンをクリック
![](https://assets.st-note.com/img/1658306047851-jbZzB9kupI.png?width=800)
③赤枠のアイコンをクリック
![](https://assets.st-note.com/img/1658306040510-Pr2rh0wUad.png?width=800)
④『Special Container』を選択
![](https://assets.st-note.com/img/1658306044139-vjsGLmY4nh.png?width=800)
⑤CSSを書き込み、『OK』
![](https://assets.st-note.com/img/1658306042248-HHc9GdS4Yw.png?width=800)
⑥枠内に文字を入力
※文字サイズや色の変更は、通常通りの操作
![](https://assets.st-note.com/img/1658306038373-KodPiqWKfo.png?width=800)
⑦枠の上や下を改行する場合は、赤い矢印ボタンを押す
![](https://assets.st-note.com/img/1658306037285-jRSolOVBjt.png?width=800)
⑧セーブ
以上で設定は完了です。
囲み線のスタイルを紹介
主に、以下のスタイルがあります。
solid(一本線)
![](https://assets.st-note.com/img/1658306034419-XFP1BqRN99.png?width=800)
double(二重線)
![](https://assets.st-note.com/img/1658306034602-ft0FD40341.png?width=800)
dotted(点線)
![](https://assets.st-note.com/img/1658306035905-fgupJHvlJB.png?width=800)
dashed(破線)
![](https://assets.st-note.com/img/1658306034386-INV9vo29Wc.png?width=800)
以下の4種類は、色によってはうまく表示されません。
groove(窪んだ枠線)
![](https://assets.st-note.com/img/1658306035319-5iK8Gootjf.png?width=800)
ridge(隆起した枠線)
![](https://assets.st-note.com/img/1658306035685-Kx3THboiTB.png?width=800)
inset(全体が凹む)
![](https://assets.st-note.com/img/1658306050080-8Y8qkZ94tw.png?width=800)
outset(全体が隆起する)
![](https://assets.st-note.com/img/1658306034992-rt7VSApkfQ.png?width=800)
枠の角を丸くする方法
『border-radius:10px;』を入力すると、枠の角を丸くすることができます。
数字が大きいほど角が丸くなります。
![](https://assets.st-note.com/img/1658306036367-PGn5IOUVZm.png?width=800)
最後に
Beds24で使用できる、CSSで囲み枠を設定する方法を紹介しました。
コンテンツを目立たせて、ゲストによる見落としを防ぎましょう。
またの機会に、CSSでできる別の設定についても紹介予定です。
この記事が気に入ったらサポートをしてみませんか?