イベントの日付を下の画像のように重ねて表示したい場合は、いくつかのカスタムJavaScriptとカスタムCSSスニペットを使用することで可能です。
日付と月だけ、または日付全体です。それぞれの方法は以下をご覧ください:
曜日と月だけを表示する
1) 投稿のレイアウトが「サムネイル」に設定されていることを確認してください。プラグインの投稿レイアウトページの設定を使うか、以下のショートコードオプションを使ってください: layout=thumb
2) イベントの日付フォーマットを、"イベント日付 "カスタマイズ・セクションの最初のオプションに設定する(Facebookフィード > カスタマイズ > スタイル投稿 > イベントの日付フォーマット)はこのような書式になっている: 7月25日午後5時30分.を使うこともできます。 eventdateformat=14
をショートコードに追加してください。
3)次に、プラグインのカスタムJavaScriptセクション(Facebook Feed > Customize > Misc)に以下を追加します:
$('.cff-event').each(function(){
var $self = $(this),
cff_sd_arr = $self.find('.cff-start-date').text().split(" ");
$self.find('.cff-start-date').html( '<span class="cff-month">' + cff_sd_arr[0] + '</span><span class="cff-day">' + cff_sd_arr[1].replace(/\,/g,"") + '</span>' );
$self.find('.cff-photo').html( $self.find('.cff-date') ).removeAttr('href').css('cursor', 'default');
});
4) Custom CSSセクションに追加します:
.cff-start-date, .cff-month, .cff-day { display: block; }
.cff-start-date { text-align: center; }
.cff-end-date, .cff-more-dates, .cff-multiple-dates, .cff-lightbox-link { display: none !important; }
.cff-month{ font-size: 20px; }
.cff-day{ font-size: 30px; }
日付全体を表示する
1) 投稿のレイアウトが「サムネイル」に設定されていることを確認してください。プラグインの投稿レイアウトページの設定を使うか、以下のショートコードオプションを使ってください: layout=thumb
2) ショートコードに以下を追加する: eventdatecustom='
.
3)次に、プラグインのカスタムJavaScriptセクション(Facebook Feed > Customize > Misc)に以下を追加します:
$('.cff-event').each(function(){
var $self = $(this),
cff_sd_arr = $self.find('.cff-start-date k').text().split(" ");
$self.find('.cff-start-date k').html( '<span class="cff-dayweek">' + cff_sd_arr[0] + '</span><span class="cff-day">' + cff_sd_arr[1] + '</span><span class="cff-month">' + cff_sd_arr[2].replace(/\,/g,"") + '</span><span class="cff-year">' + cff_sd_arr[3].replace(/\,/g,"") + '</span>' );
$self.find('.cff-photo').html( $self.find('.cff-start-date k') ).removeAttr('href').css('cursor', 'default');
});
4) Custom CSSセクションに追加します:
.cff-dayweek{ font-size: 30px; }
.cff-day{ font-size: 50px; }
.cff-month{ font-size: 25px; }
.cff-year{ font-size: 20px; }
.cff-end-date k, cff-more-dates, .cff-multiple-dates, .cff-lightbox-link { display: none !important; }
.cff-photo k{ line-height: 1; text-transform: uppercase; text-align: center; }
