画像の扱い

 

☆ ヘッダー画像が「ホーム」と「その他ページ」で異なる場合

ページを追加j時、同じ画像をその度に挿入すると異なったファイル名で同じ画像がアップロードされてしまう。

結果

  • 表示遅延:同じ画像をページが読み込まれる度に別画像として読み込むので、表示速度が遅くなる。
  • 領域の無駄

回避方法

「ホーム」のヘッダー挿入時、「当ページのみのエリア」にする。

「その他ページ」のヘッダー挿入時、「パブリック共通のエリア」にする。

アップロードした画像のパス

/app/Uploads/files/upload_file/real_file_name/1/

1.ボックスの中に2つの画像を挿入し、ボックスと画像にクラスを設定。
  クラス名は任意です、この事例に添った名前で説明

1)ボックス名:img_anima_nc3_logo_front_back"

2)画像のクラス名:挿入すると多くのクラスや設定が表示されるが、気にしないでクラス名の先頭に「任意のクラス名」を入れる。(2、4行目)

HTML(アニメーション本体)

<div class="img_anima_nc3_logo_front_back ">
<img class="img_anima_nc3_logo_back
<!-- 以降にNC3が挿入するクラスや設定、URLが入る --> />
<img class="img_anima_nc3_logo_front
<!-- 以降にNC3が挿入するクラスや設定、URLが入る --> /> <p class="img_anima_nc3_logo_front" <!-- テキスト挿入と装飾 -->
style="position: absolute; top: 260px; text-align: center;
font-size: 1.75em; font-weight: bold; color: blue;
width: 100%;">ご訪問&nbsp;感謝 !</p> </div>
お知らせ

1.ボックスの中に2つの画像を挿入し、ボックスと画像にクラスを設定。
  クラス名は任意です、この事例に添った名前で説明

1)ボックス名:img_anima_nc3_logo_front_back"

2)画像のクラス名:挿入すると多くのクラスや設定が表示されるが、気にしないでクラス名の先頭に「任意のクラス名」を入れる。(2、4行目)

HTML(アニメーション本体)

<div class="img_anima_nc3_logo_front_back ">
<img class="img_anima_nc3_logo_back
<!-- 以降にNC3が挿入するクラスや設定、URLが入る --> />
<img class="img_anima_nc3_logo_front
<!-- 以降にNC3が挿入するクラスや設定、URLが入る --> /> <p class="img_anima_nc3_logo_front" <!-- テキスト挿入と装飾 -->
style="position: absolute; top: 260px; text-align: center;
font-size: 1.75em; font-weight: bold; color: blue;
width: 100%;">ご訪問&nbsp;感謝 !</p> </div>
NC3ロゴ訪問感謝

ご訪問 感謝 !