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でお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート