ヘッダーフレーム内にGIF画像を自動で、リサイズ調整する手順

  • MENU●●●●
  • ヘッダーフレーム内にGIF画像を自動で、リサイズ調整する手順


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    トップヘッダーへの導入障害を取り除いた正常作動設定の工程

    シリウスサイトのトップページのヘッダーに、機能外指示により
    GIfアニメーション画像を正常作動するよう設置する

     

    また、どんな大小サイズの画像でもHTML記載によりフレーム内に
    自動で合わせ調整される指定を説明いたします

     

    その前にヘッダーで、GIfアニメーション画像を表示すると言っても
    通常操作手順ではなくHTMLテンプレートに記述追加で
    指定することになるのですが、操作画面で通常設定されたヘッダー画像に
    ついて説明がございます

     

     

    操作画面で設定されたヘッダー画像の縦サイズが、ほかの下層ページ
    およびトップページで指定されているわけですね

     

    大小のランダムな画像でもすべてのフレーム内である程度サイズは
    変化するものの

     

    縦サイズがデフォルトの250PXですとかなり圧迫されたイメージに
    なるかもしれません

     

    できれば、300PX以上が望ましいかと....

     

    当ページは、250PXほどですが

     

    デフォルトサイズは以下ですが 拡張されるといささか....苦しいかな?

     

     

    良いスタイルをお考え下さい

     

     

    MTMLでの指定

     

    反映されるスタイルは、TMLテンプレートでの指定ですので、

     

    トップページで指定すればトップのみ 

     

    カテゴリーで指定すればカテゴリーページはすべて統一
    エントリーページでも同様です

     

     

    初めにGIF画像をシリウス記事欄に読み込んでください

     

    <img src="<% pageDepth %>img/dans.gif" alt="" />

     

    記述が確認されましたら 自動調整されるサイズの指定を追加します
    width heightともにPX指定では制限アリなので 制限なし記号%で
    支持します...と枠内いっぱいに自動で拡張される...デス

     

    追加記載を確認
    <img src="<% pageDepth %>img/dans.gif" style="width:100%;height:100%;" alt="" />

     

    トップHTMLの原本記載ですが、ここ に追加します

     

    <!-- ★ヘッダーここから★ -->
    <% pageTopic %>
    <div id="header">
    ここです
    <% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
    <% pageDescription %>
    </div>
    <!-- ★ヘッダーここまで★ -->

     

     

     

    追加後
    <!-- ★ヘッダーここから★ -->
    <% pageTopic %>
    <div id="header">
    <img src="<% pageDepth %>img/aifo1.gif" style="width:100%;height:100%;" alt="" />
    <% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
    <% pageDescription %>
    </div>
    <!-- ★ヘッダーここまで★ -->

     

    保存を選択してください

     

     

    カテゴリー エントリーHTMLでは多少記述に違いがありますね

     

    原本
    <!-- ★ヘッダーここから★ -->
    <% pageTopic %>
    <div id="header"<% pageHeaderImage %>ここが違う>
    <% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
    <% pageDescription %>
    </div>
    <!-- ★ヘッダーここまで★ -->

     

    しかし、同様に書き換えてください

     

    画像コードを書き換えなければトップと同じとなりますので
    異なる画像を置く際は画像コードのみ書き換えです

     

    <% pageTopic %>
    <div id="header">
    <img src="<% pageDepth %>img/aifo1.gif" style="width:100%;height:100%;" alt="" />

     

    書き換え完了後、保存を選択して...

     

    ここでプレビュー確認しますと作動する画像は適合表示されてはいるが
    ヘッダータイトルが表示されていない...という確認がされると思います

     

    GIF画像は、今あなたのサイトで設定してあるヘッダー画像の上に重なり
    表示されるので何ら支持を付け加えることはありませんが....

     

    html指定だけではヘッダータイトルがどこかへ押しやられ表示されないのです

     

    ですので、スタイルシートで表示されるよう指定します

     

     

    スタイルシートの以下項目へ到達

     

    原本の position: relative;を絶対ここ動かん指定 
    position: absolute;に書き換え

     

    もう一つ left: 30px;指定を
    left: 300px;に書き換え

     

     

     

    原本
    #header h2 ,#header .title {
    width: 550px;
    font-size: 36px;
    line-height: 36px;
    position: relative; ここ
    left: 30px; ここ
    top: 50px;
    <% pageTitleFontSize %>
    <% pageTitlePlace %>
    }

     

     

     

    書き換え後
    ここから
    #header h2 ,#header .title {
    width: 550px;
    font-size: 36px;
    line-height: 36px;
        position: absolute;
    left: 300px;
    top: 50px;
    <% pageTitleFontSize %>
    <% pageTitlePlace %>
    }
    ここまで

     

    で...表示は正常に確認できるはずです

     

     

    GIF画像のリサイズカスタマイズでした

     

    今後も気が付いたことがあれば追記いたします

     

     

    ページTOP
    ヘッダーフレーム内にGIF画像を自動で、リサイズ調整する手順
    GIFアニメ 動く画像をシリウスサイトに設置する方法のご案内
    シリウスカスタマイズTOP

     

     

    ヘッダーフレーム内にGIF画像を自動で、リサイズ調整する手順関連解説
    YouTube動画やMP4からGIF画像を作成する方法のご案内
    シリウスサイト内にGIFアニメファイル 動く画像をyoutube動画やMP4から簡単に設置するカスタマイズ方法ご案内です
    シリウスサイトへ3D GIFアニメーション画像を設置してみよう
    シリウスサイト内に3D GIFファイルのアニメーション画像を設置.❔.3次元として脳が理解する立体化 スタイルとは?詳細カスタマイズのご案内です
    一部分だけを動かすGIF画像加工シネマグラフ参考まとめ
    一部分だけを動かす加工を施し魅力的なスタイルを表現するGIF画像シネマグラフをご覧いただき製作の手本として参照ください シリウスに洗練されたシネマグラフをカスタマイズしてナイスなサイトへ....
    GIF画像の編集が思うように進まれない方へ|ずるっこカスタマイズ
    シリウス内にGIF画像を自主制作して設置しようとしても思うようにことが進まれない方は 多少ずるっこですがいいカスタマイズ手法がございます 思考を変えてみましょう
    シリウスヘッダーをGIFアニメーション画像に切り替える設置方法
    シリウスサイトのヘッダーをGIFアニメーション画像に切り替えて表示するには 通常設定ではなくスタイルシートで指定することで対応が可能です
    すべてのページヘッダーで異なるGIFアニメーション表示を設定方法
    シリウスサイトでは、すべてのページヘッダーで異なるGIFアニメーションの適合表示は、デフォルト指定ではできませんが、CSSに指示を加えれば簡単にできます
    ヘッダーレイアウトにロゴタイプのアニメーションを設置する方法
    シリウスサイトのヘッダーレイアウトにイメージ向上か?お遊び心か?目的は様々な要素で使えるロゴタイプサイズの動くアニメーションを設置する方法のご案内です
    シリウスのサイト背景をGIFアニメーション|シネマで表示する方法
    シリウスのサイト背景をすべてのページでワイドサイズのGIFアニメーション、シネマグラフで個別設定する方法のご案内です、よりハイレベルなデザインカスタマイズへお進みください
    シリウスのトップページ背景をGIFシネマで全体表示する設定方法
    シリウスのトップページ専用で背景をGIF画像シネマグラフで全体表示する簡単な設定方法のご案内です、下層には対応いたしませんが海外サイトのような構築が可能です
    シリウス機能でGIF画像ファイルのリサイズが反映される保存方法
    シリウスのデフォルト機能?、かと思われますがGIF画像ファイルの構造を失うことなく抽出から保存までの手順をご案内します

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト