• MENU●●●●
  • ライトボックス表示 動画の縦並びを横並びへと変更する


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

    スポンサー広告

    関連記事


    ライトボックスでメニュー画像表示を横並びにする

    2014 1216記載 2017 0322更新
    シリウスカスタマイズテーマ ライトボックス画像横並び

     

    前頁の解説関連の続きとなります
    動画の縦並びを横並びへと変更する
    記事内スペースでしたら、ライトボックスウインドウは、別動画で二つ表示
    することもできます

     

    一つでは、スペースが空いてしまう..と思うなら二つ並べも一つの表示法かと..

     

    画像です

     

    上例は、videolightboxの操作で二つ目の動画を読み込みpubish
    確認できます

     

    この時点では確かに横並びなんですね

     

    しかし、シリウスに導入しまして、アップ意向確認すると、なぜか縦並びの
    表示となってしまうのです

     

    なぜだろうと..ここであれこれいじりましてもファイルの再導入仕様とも
    効果に変わりはございません

     

     

    シリウスというソフトが原因なのかは不明ですが、やりようを変えてみれば
    簡単に横並びへと変更できます

     

     

    シリウス機能レイアウト枠をお使いください

     

    レイアウト枠が何かしらの事情で表示されない
    反映されない場合はテーブル機能 横2列でも上下どちらかの枠を
    取り除けばレイアウト枠同様のスタイルにできます

     

    二つ以上を並べる場合は、余りお勧めしませんがテーブルをお使いください

     

     

    レイアウト枠採用で進めますね

     

    参考(組み合わせた例) 
    <div class="layout_l" style="width:49%;">
    <a class="voverlay" href="http://www.youtube.com/v/va4PsLQHisk?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="【Coke ON(コーク オン)】使い方「ドリンクを買ってスタンプをためる」Coca-Cola"><img src="index_videolb/thumbnails/1.png" alt="【Coke ON(コーク オン)】使い方「ドリンクを買ってスタンプをためる」Coca-Cola" /><span></span></a>
    </div>
    <div class="layout_r" style="width:49%;">
    <a class="voverlay" href="http://www.youtube.com/v/rQYXMQuM6IU?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="【Coke ON】 Switch on everyday篇"><img src="index_videolb/thumbnails/0.png" alt="【Coke ON】 Switch on everyday篇" /><span></span></a></div>

     

    ここで上記コードをよくご確認していただきたいのですが全体の呼び出し
    コードの上部と下部がレイアウト枠の外にありますね

     

    レイアウト枠は以下
    <div class="layout_l" style="width:49%;">

    </div>
    <div class="layout_r" style="width:49%;">

    </div>

     

     

    そして、二つの動画コードを個別に入れ込んでいるのです

     

    <a class="voverlay" href="http://www.youtube.com/v/va4PsLQHisk?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="【Coke ON(コーク オン)】使い方「ドリンクを買ってスタンプをためる」Coca-Cola"><img src="index_videolb/thumbnails/1.png" alt="【Coke ON(コーク オン)】使い方「ドリンクを買ってスタンプをためる」Coca-Cola" /><span></span></a>

     

     

    <a class="voverlay" href="http://www.youtube.com/v/rQYXMQuM6IU?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="【Coke ON】 Switch on everyday篇"><img src="index_videolb/thumbnails/0.png" alt="【Coke ON】 Switch on everyday篇" /><span></span></a>

     

    以外のコードは、レイアウト枠の外に置きましょう
    出ないと横に整列しません

     

     

    取り付け後
    横並びにするつもりであっても スペース内に収まらずサイズが多少大きく
    ずれる

     

    ライトボッツクス表示の画像が小さい等の場合もあるかと思います

     

    後図けで 申し訳ないのですが videolightbox操作画面は編集が
    正常確認出来るまで閉じないで置きましょう

     

    なぜかといいますと記事内に張り付けた記述はそのままにしておいて
    操作画面上で再編集して再度ファイルを取り込みアップすることができるから..

     

     

    最終確認の表示に納得がいかない場合

     

    サーバー内のファイルを削除
    パソコン内ファイルを削除して(上書き)でもOk

     

    サイズや背景を修正して再度パソコンにファイル挿入します

     

    そのファイルを再度サバーにアップロードしてください

     

    管理人はその工程をもう200回ほどしてますので
    ご安心を...(わずかな気に食わん箇所の変更を何度も,,,です)

     

    デモ 動画を入れ替える場合は再度最初からやらなければなりません

     

    レイアウト枠を入れると 記述コードが作動不能になるかと不安でしたが
    以下のように きちんと表示されました

    記事カラム幅は 590

     

    画像幅は240x2なので わずかの隙間が若干空きすぎました

     


     

    記事との間、スペースが現れてしまう...について

     

    記事内表示のライトボックスの上下に空きスペースが見られますが
    不要なコードを削除すると詰めることができます

     

    以外のコードで削除しても大丈夫な箇所は以下

     

    <body bgcolor="#7c7c7c"> ここ削除

     

    <!-- Start VideoLightBox.com BODY section --> ここ削除
    <div class="videogallery">
    <a class="voverlay" href="http://www.youtube.com/v/rQYXMQuM6IU?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="【Coke ON】 Switch on everyday篇"><img src="index_videolb/thumbnails/0.png" alt="【Coke ON】 Switch on everyday篇" /><span></span></a><span class="videolb"><a href="http://videolightbox.com">video overlay</a> by VideoLightBox.com v3.1</span>
    </div>
    <script src="index_videolb/jquery.tools.min.js" type="text/javascript"></script> ここは<head>に移動
    <script src="index_videolb/videolightbox.js" type="text/javascript"></script> ここは<head>に移動
    <!-- End VideoLightBox.com BODY section -->ここ削除

     

    削除した箇所に記事を詰めてみましょう

     

    以下コードは、フリーで使う場合は削除すると機能不全
    (有料ステージなら削除してもOK)
    <span class="videolb"><a href="http://videolightbox.com">video overlay</a> by VideoLightBox.com v3.1</span>
    下記でしたら削除できます
    (この行も削除するとややスペースを狭められます9

     

     

     


     

    スポンサーリンク

     

     

     

     

    ライトボックス表示 画像の縦並びを横並びへと変更する
    ライトボックス フリーソフト
    シリウスカスタマイズ

    ライトボックス表示 動画の縦並びを横並びへと変更する関連解説
    ライトボックス障害 ある日突然作動の変化? 
    当サイトでご案内のライトボックスで動画を表現させていたはずが ある日子画面をクリックするとパソコン画面サイズに表示されてしまう障害が発生 対処法はこちらで

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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