サイトマップ
jquery-tubular動画背景の位置を変更してみましょう
２０１４ １００８
jquery-tubularプラグインで動画背景を設定しますと 全面トップに
表示されることで 記事や画像ヘッダーなど覆い隠されてしまいます
その対処法は親ページで解説されてはおりますが
シリウス機能になれた方には不慣れな構成が私も含めてですが
ちと面倒です
当該解説は また異なる手段での記事挿入法となります
当該解説は親ページコンテンツの連動ですので
こちらも詳細をご確認ください
tubular採用でサイト背景をユーチューブ動画設定方法
何とかシリウス機能で記事やメニュー 画像を背景の上に表示できないものか？
...逆に
前面に表示される動画を下の下層に位置変更できないか？
色々試行錯誤してみました結果です
貴方様もあれこれ努力を擦るかもしれませんが
途方にくれないよう私の試したことを以下記載します
z-index 指定を変えてみましたが
改行すると 動画は非表示になります
screen ＣＳＳでも数値を変えると画像が非表示
その他 ネット上にある情報をもとにあれこれしても
全てだめ
そんなんで丸２日ほど １００回以上あれこれしても
すべてダメ
てなことでした
もう駄目と諦めていたのですが ひらめいたことがありまして
実行して見たら あれま？できました
お断り
トップページに設置する手順でお話は進めています
方法は至って簡単で親ページでの解説で記事内に張り付けるコード
<div id="ColorFullWrap">
を ＨＴＭＬ内のＢＯＤＹタグ下に貼り付けます
貼り付け例
</div><!-- #ColorFullWrap -->
を巻末の/ＢＯＤＹ内に追加すれば良いでけです
貼り付け例
結果として 背景画像を下に移動するのではなく
位置移動が困難ならば さらにその上に記事画像メニューを
表示できるようしたのです
記事背景ボックスを使用してみる
背景が画像で 記事が表示されても文字が認識しずらい
という背景画像の流れもございますね
動画スタート時は良くても途中で背景が文字カラーと同色してしまう等
その際は シリウス機能のユーザー定義ボックス または半透明コードを
サイト内に入れたうえで フィルター作用 ボックス枠背景の半透明化が
おすすめの方法でみなさん使ってらっしゃいます
こちらで詳細をご確認ください
reba値カラーコード半透明化指定方法
障害
プラグインCSS自体がシリウスに適合しているわけでもなく
障害もあります
tubularのscreen ＣＳＳで横サイズ および記事ＬＥＦＴが
指定されているのです
数値やＬＥＦＴ位置を変えると画像が表示されなくなるのでいじれないのです
どんな結果というと 全てのカラムでは確認してませんが
３カラムですとサイト幅１０００の場合
ページを指定してるサイドメニューが消えてしまう
又はサイトの下のほうに移動してしまう
又記事はＣＳＳでＬＥＦＴ指定されているため左寄せになります
シリウスでいえば 右メニューの２カラムみたいなスタイルです
ページ指定メニューが表示されなくとも フリースペースの
Ｈ５ Ｈ６のメニューは通常表示されますが
他のページでも ページ指定メニューが表示されないという
連鎖作用が起こります
この障害はＣＳＳでの横幅サイズ指定が原因ですので回避するために
サイト幅を１０３５にしましたところ左メニューが右へ移動して
押し出されたのでしょうね リバースメニューになってしまいました
他のページでは平常反映なので問題ないのですが？
左側のメニューが左寄せでいまいちですね
シリウスで綺麗に表示するためには トップページだけは 他ページと
異なる構成にしてみるという考え方にしてみるべきでしょう
シリウスでもできる適合例を以下追記します
デフォルト３カラム
サイト幅 ９００
３カラムですが 構成は２カラムに見えますね
ページ指定メニューを表示させるとレイアウト崩れになりますので
ページ指定メニュー に身削除
フリースペースの ３ ４は 表示しない
１１３番を削除
サイトにより準違いはありますが
ここの記述を削除するとページ指定メニューはトップページのみ
表示されなくなります
ですので ページ指定メニューは フリースペースで作るか
このページから カテゴリーでトップページみたいなカテゴリーサイト作って
そこへリンクさせるか？
海外サイトはそんな構成多いみたいですよ
以下はカテゴリーページ 表示は通常です
３カラムの場合でページ指定メニューとフリースペースを正常に
表示するには 上記での押し出しで メニューが右に表示される
説明と異なり
２列縦並びのリバスメニューでサイト構成することが出来ます
サイト幅は最低１０３５ＰＸにしなければ 正常な縦並びはしません
デモ 左から２番目のメニューは位置を変更したものの
Ｈ３とくっついてしまいます
Ｈ３を表示させなければいい構成なんですが？
リバースメニューを作成する解説はこちらです
シリウスサイドメニュー縦2列 リバースメニューへ変更
デフォルト２カラムでは ９００ＰＸで正常作動です
１０００ＰＸでもＯＫ
ただし メニューをデフォルトの右指定ですとレイアウト崩れ
メニューは右に指定しましょう
メニューは背景色がありましてサイトにデザインが合いませんね
そんな場合は背景色を透過すればよいのです
こちら参照
サイドメニューを透明化 デフォルトテンプレート対象解説
又ＣＳＳ改行が面倒と思われる方は フリースペースでメニューを
作り スタイルなしを選択すればメニューフォントのみの表示ができます
スポンサーリンク
追記
１０００PX サイズでのサイト構築
サイト横サイズが１０３５PXでは広すぎる１０００PXで
うまく構成できないものか ？とお便りがございました
上記解説とかぶる意味もございます
サイト横サイズを１０００PXのままで
サイトページ指定メニューをHTMLで削除
フリースペースの ３ ４は使わない
とすれば １０００PXのまま使用可能
２カラム構成になってしまいますが
動画背景ページは読者の方が貴方のサイトに
興味を抱かせるイメージを触発させるものであり
コンテンツを多く配置する必要はないと思われます
リンクにより誘導するページでメニューコンテンツを配置してください
お試し参考
tubularファイル CSSの中のscreenCSS内で
記事カラムサイズ指定 width６４０数値を５８０にしてみました
以下例 ３カラム ボックス枠でサイズが確認できるかと！
記事サイズを狭めると １０００PXでもページ指定メニューは
下へは行かずリバースメニューで表示されます
ですがやはりH３メニューと なぜかくっついてしまうんですね
簡単な解消法は H３メニューは表示させない 使わない
とすれば
後はメニューのデザイン次第で何とかみられるサイトになります
この程度の解説しかできませんで申し訳ありません
作業での注意ごと
まずは 解説は意味の通じないこともありますので親ページでの詳細を
よくご確認ください
プレビューではメニュー位置などカスタムした場合
編集構成が確認はできますが アップロード画像にすると
構成が変わりますので必ずアップ後の変更を確認してください
記事背景を削除した場合 プレビューでは削除が確認できるが
アップロード以降では削除されていない画面となる
記事背景を削除したはずが 動画はその下に表示される というスタイルは
ｉｎｇ画像の認識が出来ない 出来ていない ということです
対処法は シリウス機能でのアップロードサーバ―画面で
右ファイルより
ｉｎｇ
画像をいったんすべて削除
つぎに
index ファイルを削除します
ここで過去ファイルを消してしまうのです
画面閉じて 再度 生成してアップロード
これで変わるはずなんですが ....
閲覧履歴の削除
一度画面を確認して つぎに閲覧すると 前の画面が表示される場合は
閲覧履歴の削除をしてください
情報は追記してまいります
jquery-tubular動画背景の重なり位置を記事の下に変更する方法
tubular採用でサイト背景をユーチューブ動画設定方法
