WordPress個別サポート

WordPressの予約プラグイン「MTS Simple Booking」のカレンダーには、予約状況を示す「○」や「×」が表示されます。通常は次のように文字で表示されますが、画像に変更することもできます。

予約カレンダーに表示される文字の「○」「×」

予約カレンダーに表示される文字の「○」「×」

「○」「△」「×」「-」を画像に変更するには、「予約システム」‐「各種設定」メニューで設定します。通常は予約状況を示す文字が入っています。

予約状況を示す「○」「△」「×」「-」

予約状況を示す「○」「△」「×」「-」

この「空きマーク」などに入っている文字を画像に変更します。たとえば、「○」の代わりに「<img src="http://-----.com/ok.png">」という画像のimgタグを入力します。

「○」「△」「×」「-」を画像に変更する

「○」「△」「×」「-」を画像に変更する

imgタグを簡単に作成するには、投稿や固定ページの編集画面で「メディアを追加」から画像を挿入してテキストエディタでコピーする方法があります。

テキストエディタでimgタグをコピー

テキストエディタでimgタグを作成してコピー

※編集画面を一時的に使っただけなので、このページは保存する必要はありません。

「空きマーク」などを画像に入れ替えて予約カレンダーを表示すると、「○」「△」「×」「-」が画像に置き換わります。

「○」「△」「×」「-」を画像に変更

「○」「△」「×」「-」を画像に変更

画像のサイズによっては、ウィジェットに表示するカレンダーやスマホ対応のときに個別に画像表示サイズの修正が必要になる場合があります。スマホ表示のときに「○」「△」「×」「-」の画像サイズを設定するCSSの例を以下に紹介します。

/* スマホでは画像を小さく */
@media (max-width: 480px) {
    #content .calendar-mark img {
        width:30px;
    }
}

※「#content」はBizVektorのCSSセレクタです。それ以外のテーマでは適当に修正してご利用ください。

スマホでの予約カレンダー

スマホでの予約カレンダー

あとは試行錯誤をお願いします。よくわからなければ「WordPress個別サポート」にご相談ください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク