TOP
Sirius.customize
Sirius.customize

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

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

 

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

 

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

 

画像です

 

上例は、videolightboxの操作で二つ目の動画を読み込みｐｕｂｉｓｈで
確認できます

 

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

 

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

 

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

 

 

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

 

 

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

 

レイアウト枠が何かしらの事情で表示されない
反映されない場合はテーブル機能　横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操作画面は編集が
正常確認出来るまで閉じないで置きましょう

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

記事カラム幅は　５９０

 

画像幅は２４０ｘ２なので　わずかの隙間が若干空きすぎました

 

 

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

 

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

 

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

 

<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 -->ここ削除

 

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

 

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

 

 

 

 

スポンサーリンク

 

 

 

 

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

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