カルーセル自体の横幅を増減させるカスタム、bodyにクラス付加するだけ

概要

1. カルーセル内の最新記事一覧で、スクロールしなくても見える記事数を３件から１２件の間で増減できます。

2. 見える記事数に合わせてカルーセルの横幅が自動調整されます。

3. このページ初見では何のことか分からないと思うので、ページ下部のデモ表示画像をご覧いただくと分かりやすいと思います。

メリット

1. body の class に追加するだけのかんたんカスタムです。

2. デフォルト設定から減らすメリットはなさそうです。ページ横幅をデフォルト設定から狭くした場合に、カルーセルがはみ出ないように調整できます。

テンプレートのHTMLを編集

1. body の class に次のクラスの内１つを追加します。

   crs3 crs4 crs5 crs6 crs7 crs8 crs9 crs10 crs11 crs12

2. crs の右の数字は、カルーセル内で見える記事数を表します。

3. 2カラム版では crs9 が既に入っているので、crs9 を入れ替えます。

4. ページの横幅が充分でないと、ページ横幅をはみ出てカルーセルが表示されたり、crs12を付加してもデフォルトと変わらなかったりします。

デモ表示

1. eyecatcherのデフォルト設定では１１件表示されています。下図内の赤丸は３件ずつを表します。数えやすいように補助線として入れました。

   

2. クラスcrs10をbodyに付加すると１０件になります。

   

3. 同様に、クラスcrs8をbodyに付加すると８件になります。

   

このページに関して

1. 予告なく変更する場合があります。

2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事

• 画像再表示エリアにブログランキング用画像などを再表示しないカスタム (2013/05/03)
• 記事ごとやカテゴリごとのサムネイルはあるがアイキャッチがない場合 (2013/05/03)
• カルーセル内サムネイル画像ホバー時にタイトル背景を変更しない設定 (2013/05/03)
• カルーセル自体の横幅を増減させるカスタム、bodyにクラス付加するだけ (2013/04/02)
• カルーセル両端の矢印クリックでスクロールする記事数や秒数をカスタム (2013/04/02)
• カルーセル内最新記事一覧の記事数を増減させる方法(最大３０件) (2013/04/02)
• bodyや記事内タグにclass付加でCSSやJavaScriptかんたん切替まとめ (2013/03/22)