ポップアップ画面のサムネイル画像のアスペクト比を修正
前回は、以下の記事で「All-in-One Event Calendar」に新しいカレンダーテーマを作りました。
この記事では、新しく作成したカレンダーテーマのスタイルを変更し、ポップアップ画面に表示されるサムネイル画像のアスペクト比が変わってしまう点を修正します。
修正前のポップアップ画面のサムネイル画像
修正前と修正後の変化が分かりやすくなるように、新しいイベントを1つ追加します。
追加した新規イベントは、「Friday Night ライブ」という架空のライブイベントです。
アイキャッチ画像には、満月をバックに、魔女が魔法の箒に乗って、お城からライブに出かけるイメージの画像を選びました。
新規イベントを追加した後、メインページを表示すると、上のように、メインページとサイドバーのイベント情報に追加したイベントが表示されます。
では、以下のように、サイドバーのイベント情報の部分にマウスを重ねて、ポップアップ画面を表示させてみましょう。
残念なことに、ポップアップ画面のサムネイル画像は、元のアイキャッチ画像のアスペクト比と異なり、縦長になってしまっています。
満月が縦に伸びて、卵のようになっていますね。
これを修正するには、ポップアップ画面のサムネイル画像に関するスタイル属性を変更すれば良さそうです。
カレンダーテーマのスタイル変更
ここからは、実際にカレンダーテーマのスタイルを変更する手順を説明します。
前回の記事では、
https://○○○…wp-contentpluginsall-in-one-event-calendarpublic hemes-ai1ec
のフォルダの下に、「gamma」というサブフォルダをコピー/ペーストして、「MyCalendar」というフォルダ名でが新しいカレンダーテーマを作りました。
これからの説明は、新しく作った「MyCalendar」というカレンダーテーマを選択している前提で進めていきます。
「css」サブフォルダに、「override.css」というファイルを新規に作成
前回の記事でも少し説明しましたが、新しく作ったカレンダーテーマのスタイルを変更するには、まず、「子テーマ」のフォルダの直下にある「css」サブフォルダに、「override.css」というファイルを新規に作成します。
今回の場合は、
https://○○○…wp-contentpluginsall-in-one-event-calendarpublic hemes-ai1ecMyCalendarcss
の下に、「override.css」というファイルを作ります。
「override.css」というファイルを作ったら、ファイルに以下のテキストを記述します。
@charset "UTF-8";
/************************************
** レイアウト（Layout）
************************************/
.ai1ec-event-avatar img {
min-height: 1px;
}
コードの解説
ポップアップ画面のサムネイル画像には、
.ai1ec-event-avatar img
というクラスが指定されているので、このクラスの属性をオーバーライドしています。
デフォルトのクラス属性では、
min-height: 90px;
になっていて、どんなアイキャッチ画像を選んでも縦のサイズが90pxになるため、アスペクト比が変わってしまうようです。
なので、
min-height: 1px;
にして、元のアイキャッチ画像のアスペクト比で表示されるようにします。
アスペクト比が修正を確認
「override.css」で、ポップアップ画面のサムネイル画像のクラス属性をオーバーライドしたら、サムネイル画像のアスペクト比が修正されているか確認してみましょう。
スタイル属性のキャッシュをリセットする
修正後の結果を確認する前に、スタイル属性のキャッシュをリセットします。
下の図のように、WordPressの管理メニューから、
「イベント」-「テーマオプション」
を選びます。
すると、「カレンダーテーマのオプション」画面が表示されます。
この画面で、［リセットしてデフォルトに］ボタンを押して、修正後のスタイル属性にリセットします。
修正後のポップアップ画面を確認
では、ポップアップ画面を確認してみましょう。
上のように、ポップアップ画面のサムネイル画像は、元画像のアスペクト比になり、正しく表示されました。
まとめ
今回の記事では、「All-in-One Event Calendar」に新しく作成したカレンダーテーマのスタイルを変更し、ポップアップ画面に表示されるサムネイル画像のアスペクト比を元画像に合わせる修正をしました。
次回は、イベントの本文がポップアップ画面に表示されないようにします。
コメント