お問い合わせ内容

 

はじめまして！rinkと申します

 

シリウス購入後、こちらのサイトでいつも勉強させていただいております
為になる情報ありがとうございます♪

 

１つ質問させてください

 

私は今 作成中のサイトのヘッダー画像の１部分のみにbxsliderで
フェード自動ループを設置できないかと　色々と試行錯誤しております
この１ヶ月ずっと…^^;

 

ヘッダー画像全体をフェードさせるのではなく ヘッダーの右１/３程の空間に
サイトに合ったイメージ画像を複数ループさせたいのです

 

（左側は会社のロゴを入れているので 固定しておきたい）

 

ビジネステンプレートを使用中です

 

web初心者が無謀な事を…と思われるかも知れませんが
お知恵をお借りしたく、ダメ元でメールさせていただきました

 

もしも何らかの方法がありましたら、是非ご教授くださいませ m(__)m

 

どうぞよろしくお願いいたします

 

 

---

 

スポンサーリンク

 

 

 

---

 

お便り　ありがとうございます

 

ヘッダー画像内　左位置でしたら面倒もないはずが

 

右配置　空間にBXスライダーを設置するということですね

 

このような配置でよろしいのでしょうか

 

以下例

 

ＢＸスライダー画像の白枠は削除しておりませんが　枠を消す場合は
ローカルにあるＢＸスライダーＣＳＳファイルからカスタマイズ指定して
ください

 

掲載のスライダーのサイズ　位置指定もCSS指定により変更可能ですが

 

今回スタイルシートへ追加するCSS記述でもサイズは変更可能です

 

 

 

では　
質問者様の言われるヘッダー画像右空間えBXスライダーを配置する
作業のご案内です

 

 

最初は　HTMLテンプレート　トップページを開きます

 

原本

 

ヘッダー内で表示するには以下の行へ進みます

 

<!-- ★ヘッダーここから★ -->
<div id="top">
<div class="inner">
<% pageTopic %>
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>

 

ここにBXスライダー画像コードを配置します

 

</div>
</div>
<!-- ★ヘッダーここまで★ -->

 

上記位置にBXスライダー画像コードを置くことは理解して
おられるようですね

 

ヘッダー内で右位置とするにはスタイルシートで位置指定をしますが

 

元となる要素が必要になるので　とりあえずは　id　記述を作ります

 

cccの名称は任意ですので他名称でもOK

 

 

 

<div id="ccc">

 

スライダー用画像ード

 

</div>

 

 

 

で

 

 

配置例ですが　追加行をよくご確認ください

 

URL　画像コードは書き換えてください

 

<!-- ★ヘッダーここから★ -->
<div id="top">
<div class="inner">
<% pageTopic %>
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>

 

<div id="ccc">
<div id="slider">
<div><img src="http://xn--dlqu4km4qq.com/img/1airako4.jpg"style="width:225px;;"></div>
<div><img src="http://xn--dlqu4km4qq.com/img/1airako6.jpg"style="width:225px;;"></div>
<div><img src="http://xn--dlqu4km4qq.com/img/1az.png"style="width:225px;;"></div>
<div><img src="http://xn--dlqu4km4qq.com/img/1airako5.jpg"style="width:225px;;"></div>
</div>
</div>

 

</div>
</div>
<!-- ★ヘッダーここまで★ -->

 

 

HTMLトップページ記載追加はここで終了

 

 

---

 

 

スタイルシートを開きましょう

 

念押しですが　質問内容にサイト幅の詳細はありませんでしたので
デフォルトの９００PXとして理解します

 

CSS記述はコピーして使えます

 

headerの位置へ到達
原本と書き換え後を掲載してます
ご確認ください

 

 

原本
#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: 900px;
margin-right: auto;
margin-left: auto;
}

 

 

 

 

書き換え後

 

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
position: absolute;　追加行
background-repeat: no-repeat;
background-position: left top;
width: 900px;
margin-right: -225px;　書き換え
margin-left: 225px　;書き換え
z-index: 10;追加行
}

 

 

書き換え　追加の意味

 

 

position: absolute;　追加行

 

ヘッダー内右位置にBXスライダ－を移動煤指定をすると
ヘッダー画像が左へ押し出されてしまうので　動かないよう絶対位置の
指定をします

 

 

 

margin-right: -225px;　書き換え
margin-left: 225px　;書き換え
絶対位置の固定指定です
左位置へ押しだされたヘッダー画像を元に戻した数値

 

 

z-index: 10;追加行
重なりの階層です

 

 

 

 

 

次　headerboxへ移動します

 

原本
#headerbox {
background-image: url(./img/headerbox_bg.jpg);削除
background-repeat: repeat-x;
background-position: left bottom;
padding-bottom:15px;
text-align:center;
<% headerBox_fix %>
}

 

この記述は　ヘッダー画像両サイドのドット柄でが

 

今回のカスタマイズの障害物　邪魔になるので削除します
background-image: url(./img/headerbox_bg.jpg);削除

 

 

 

書き換え後
#headerbox {

 

background-repeat: repeat-x;
background-position: left bottom;
padding-bottom:15px;
text-align:center;
<% headerBox_fix %>
}

 

 

 

以下を項目の下へ追加してください

 

HTMLで追加した<div id="ccc">コードを
以下CSSで読み込みます

 

数値変更で調整可能です

 

上記の取り付け例画像は以下の数値です

 

 

 

#ccc {
float: right;top: 150px;　高さ位置
　　　　position: relative;
left: -30px;左位置
width: 150px;BXスライダーのサイズ
　　　　z-index: 20;
}

 

 

以上で完了です

 

 

BXスライダーファイルおよびjQueryをシリウスデータファイルに
置いている場合は　プレビューですぐ確認ができますが

 

アップロードするサーバーのみ　の場合はアップロード以降の
反映確認となります

 

 

 

---

 

編集後記

 

管理人の場合
ビジネステンプレートは　以前は一つのサイトで使用しておりましたが
現在は使用しておりませんのでカスタマイズの経験不足？？

 

 

そんなことで
しばらくぶりのビジネステンプレートカスタマイズとなったわけですが？？

 

何とかやってみました

 

 

左配置なら簡単ですが右配置は　ＣＳＳ指定しないと収まりません

 

グローバルメニューの上とかタイトル欄に表示されたり

 

位置固定がずれたりと　完成まで2時間費やし

 

久しぶりに難儀致しましたが　これでよかったのか
との不安も残っています

 

ヘッダー画像そのものをタイトル位置と勘違いしていないかとか？

 

 

 

作業途中で　ヘッダー画像内ではなく　その横の位置
背景の位置にBXスライダーやユーチューブ動画を置く配置方法にも
気付かされました

 

これもいいなと...

 

で........ページを追加しました

 

解説はこちらをご覧下さい
ビジネステンプレート右背景に小さなBXスライドや動画配置

 

 

ヘッダー画像の右空間にＢＸスライダーを設置したいのですが？

 

シリウスカスタマイズサポートフォーラム一覧
シリウスカスタマイズサポートフォーラム
シリウスカスタマイズ