XO Event Calendar カレンダーのキャプションの位置

XO Event Calendar プラグインにおいて、カレンダーのキャプション(年月および月送りボタン)がカレンダーの下に表示される場合(下記の画像)があります。

これは、テーマ(Customizr、Luxeritas テーマなど)のスタイルによるものです。XO Event Calendar のカレンダーはテーブル(table)タグで構成されており、キャプション部分はテーブルのキャプション(caption)タグで表示されています。

このテーブルのキャプションを下に表示するようなスタイルの場合、カレンダーのキャプションも下に表示されます。

カレンダーキャプションを上に表示するスタイル

下記のスタイルをテーマの style.css またはカスタマイズの追加 CSS 等に記述することで、カレンダーの上に表示されるようになります。

table.xo-month caption {
    caption-side: top;
}

コメント

  • WordPressのカレンダーについて調べていたところこちらのプラグインに出会いました。かなり目的とする機能が実装されているため大変感謝しております。
    ところで、XO Event Calendarは、ショートコードなどで表示する際に、同一ページに複数月を同時に表示させることはできないのでしょうか?
    月送りがあれば良いではないかと思われますが、3ヶ月程度を一括で見ることができると先の予定が把握しやすく、利用者としては大変便利だと考えます。
    可能であれば対応方法を教えていただけますと幸いです。また不可能の場合は、仕方ありませんが、今後の機能追加のアイデアとして検討いただければと思います。
    長文、失礼いたしました。
    よろしくお願いいたします。

    • こんにちは、コメントありがとうございます。
      次のバージョンで対応したいと思います。しばらく(数日程度?)お待ちください。

    • カレンダーに複数の月を表示するオプションを追加したバージョン(1.7.0)をリリースしました。
      是非お試しください。

  • 石鷹様
    なんと素早い対応!驚きました!!
    早速、試してみたいと思います。ありがとうございます!

  • 石鷹様
    バージョン1.7.0を導入してみました。
    希望通りの動作で大変満足しております。本当にありがとうございました!
    今後は石鷹様作成の他のプラグインも試してみたいと思います。
    よろしくお願いします。

  • 石鷹様
    今回は動作についてのご質問をさせていただきます。
    ショートコードで埋め込んでいるカレンダーですが、トップページ・投稿一覧ページ・投稿詳細ページで当日日付が1日ずれて表示されます。
    具体的には、例として本日7月30日とすると、
    ・トップページ・投稿一覧ページ・投稿詳細ページ=7月31日が当日表記
    ・その他のページ=7月30日と正しく表記
    となります。
    このような現象として、何か考えられる事はありますでしょうか?
    こちらの環境もあるかと思いますが、もし何か分かればと思い相談させていただきました。
    よろしくお願いいたします。

  • 石鷹様
    お伝え漏れてしましたが、埋め込まれたカレンダーで月移動をすると正しい日付で表示されます。一番最初に表示した状態で日付がズレています。
    よろしくお願いいたします。

    • いくつかの環境で検証してみましたが、症状を再現することができませんでした。
      WordPress のタイムゾーンの設定でしょうか?
      管理画面より [設定]-[一般] を開いて、[タイムゾーン] が「東京」または「UTC+9」になっているか確認してみてください。

  • 石鷹様
    検証作業いただきありがとうございました。
    ご指摘の設定を変更してみましたが状況は改善しませんでした。
    やはり当方の環境に要因がありそうですので、いろいろと試してみたいと思います。
    今回はありがとうございました。

    • タイムゾーンを変更するようなプラグイン(Opening Hours プラグイン等)もありますので、他のプラグインの設定も確認してみてください。

  • 石鷹様
    コメントありがとうございます。またアドバイスもありがとうございます。
    当方の設定や環境などを見直してみたところ原因の一つは判明しました。
    他サイトのRSSを読み込み表示するプラグインを併用すると日付がズレてしまうようです。このプラグインを使わなければ解決しそうです。
    しかしながら別の問題を発見してしまいました。
    これもやはり当方の環境の影響と思いますが、トップページだけ、イベント情報の帯が最初は表示されないのです。月移動すれば表示されます。
    ソースを確認するとデータそのものが存在していないので、データを取得する時点で問題が発生しているような感じです。
    まだいろいろと試さなければならなそうです。

  • 石鷹様
    度々のコメントで恐れ入ります。
    いろいろと試してみまして、気になった事があります。
    今回のトップページで、カレンダー内のイベント情報帯が表示されない問題ですが、下記の設定とすると表示されました。
    [設定]→[表示設定]→「ホームページの表示」を固定ページにする。
    当方の最初の設定は上記を「最新の投稿」としておりましたが、変更してみたところ表示はされました。
    現在はこの設定で私の望む状態となるべく変更作業を行っておりますが、この設定によって何故表示されるのが疑問ではあります。
    何かお気づきの点などございますでしょうか?

    • 情報ありがとうございます。
      いくつかの環境で検証してみましたが再現しませんでした。
      なぜそのような症状になるのか、ちょっと分かりません。
      キャッシュ系のプラグインをご利用でしたら、キャッシュを削除または一時停止してみてください。

  • 石鷹様
    この度の件で追加で検証までいただきありがとうございました。
    キャッシュ系のプラグインは利用していませんので、やはりこちらの環境や設定の影響なのでしょう。
    お手数をお掛けして申し訳ありませんでした。

  • 石鷹様
    度々のコメントで申し訳ありません。何とか不具合を解消し意図する状態にできました。
    XO Event Calendarの問題ではありませんでしたので、一応コメントさせていただきました。
    ありがとうございました。

    • 報告ありがとうございます。
      コードを見直す良い機会になりました。
      リファクタリングしたいところや、他のプラグインによるタイムゾーンの変更に影響されないようにするオプションの追加など、今後のバージョンアップに活かしたいと思います。

  • こんにちは私は韓国人で、翻訳機で文を書いています。

    理解していただければありがとうございます。

    私はxo calendarを私のワードプレスサイトに設置しました。
    非常に満足しています。 けれど、
    一つの問題があります。
    それはカレンダーのnext prevボタンの整列問題です。

    (このページのカレンダーです)
    http://www.happytation.com/?page_id=825

    どのように修理することができるかどうか教えてくださればありがたいです。

    • こんにちは

      テーマの style.css またはカスタマイズの [追加 CSS] に下記のスタイルを追加してみてください。

      .xo-event-calendar .month-header button { width: 28px; }

      次のリリースでは対策したいと思います。
      報告ありがとうございます。

  • こんにちは。WordpressのCocoonテーマでホームページ初心者の私が作成したとても拙いHPなのですが、xo calendarを使わせていただいております。
    大変設定しやすく便利なプラグインです。
    あちこち触っておりましたら、PC以外でスマホ等で表示された時に日付のセル下に余白が出るようになってしまいました。
    この余白が出ないようにするにはどのように修正したら宜しいでしょうか?
    ご教授いただければ幸いです。

    • こんにちは、コメントありがとうございます。
      下記のような CSS でセル下の余白はなくなると思います。カスタマイズの [追加 CSS] またはテーマの style.css などに追加してみてください。
      @media screen and (max-width: 834px) {
      .xo-event-calendar table.xo-month .month-week,
      .xo-event-calendar table.month-dayname { height: 2.4rem; }
      .xo-event-calendar table.month-dayname { font-size: 1.2rem; }
      }

      • 石鷹様!早々にお教えくださいました内容を
        追加CSSに追記しましたところ、綺麗に余白無くなりました。
        ありがとうございました!!

サイトウ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。(スパム対策)