スライドショー用の画像登録に関するTips

インストール後の運用中に生じた質問などはこちら。
管理画面の操作方法でわからないところやTipsなども

スライドショー用の画像登録に関するTips

投稿記事by polka on 2017年3月17日(金) 11:47

画像登録にカスタムフィールド「リッチテキスト」を使う方法をご紹介したいと思います。
画像の数を可変にしたい時に手軽でおすすめです。


スライドショー用にリストタグで
次のようにHTMLを組むことが多いのですが、

<ul id="hoge">
<li><img /></li>
<li><img /></li>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>


記事として画像を更新できるようにする場合、
各画像にカスタムフィールド「画像」を使う方法があります。

<ul id="hoge">
<li><img cms:id="gufu01" /></li>
<li><img cms:id="gufu02" /></li>
<li><img cms:id="gufu03" /></li>
<li><img cms:id="gufu04" /></li>
<li><img cms:id="gufu05" /></li>
</ul>


上記例は画像が5つで固定です。
カスタムフィールド「画像」を設定した数だけになります。

この方法では、記事詳細(編集)画面で
カスタムフィールドと画像の関係がわかりやすくなるのですが、
表示させる画像の数を増やすのにテンプレートを変更する必要があります。

また、画像を登録しない場合には空の<li></li>ができてしまうので、
スライドショー用のスクリプトが動作する前に
次のようなjQueryなどで補う必要が出ることもあると思います。

<script>
$(function(){
$("#hoge li:not(:has(img))").remove();
});
</script>




以下は、カスタムフィールド「リッチテキスト」を使って、
<ul></ul>ごと入力する方法です。
テンプレートでの記述は次のようになります。

<!-- cms:id="poyo" -->
<ul>
<li><img /></li>
<li><img /></li>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
<!-- /cms:id="poyo" -->


更新方法(新規記事作成方法)は、
記事詳細画面の、ひもづけした(上記例ではcms:id="poyo")リッチテキストの入力エディタにおいて、
「箇条書き(丸付き)リスト」をクリックし、
各行(丸の後)に「イメージを挿入」をクリックで画像をアップロードしてから改行すれば、
複数の画像を次々にスライドショー用に登録できます。




この方法でのポイントは次の3点になると思います。
1)<ul><li><img>にid=""やclass=""を付けないこと。(新規で記事作成する際にHTMLを編集せずにすみます)
2)<li>に対し、必要に応じてCSSで「width: 000px;」「height: 000px;」で表示領域の幅と高さを固定し、
「overflow: hidden;」で画像がはみ出さないようにしておくこと。
3)<img>に対し、必要に応じてCSSで max-width: 100%; height: auto; (display: block;も必要かも?)として、
レイアウトの範囲より大きい画像が登録された場合に自動で縮小するようにしておくこと。




リッチテキストのエディタで大きな画像をアップロードすると、
慣れるまで改行がわかりにくい(画像を追加しにくい)かもしれないですが、
おおむね使用に関して好評です。


ここではカスタムフィールド「リッチテキスト」でご案内していますが、
記事詳細「本文」を使わないのであれば、
入力機能的には一緒なので「本文」を使うのもありだと思います。


ご紹介以上です。




上記内容に関して、
過不足・間違い(その他もっと効率の良い方法)がございましたら、
教えて頂ければ幸いです。
polka
 
記事: 270
登録日時: 2013年5月20日(月) 08:15
所在地: 大阪府泉大津市二田町1-20-30-2F

Return to 運用・操作方法

オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[2人]

cron