シリウスサイトではあまり見かけないものの、他では見かけますが..
小さなマスのサイト内に置くプルダウンメニュー
..ですが、

 

ここでは通常皆さんが理解するものと

 

デザインは、ほとんど同じながらもメニュークリックで画像をぺーじ内の
同位置で切り替え表示する　

 

または、ユーチューブ画像を複数保存しておけば、選択ごとに
同位置で切り替えが可能という...
使い方を考えればいろいろ使えるかも
...というプお役立ちのログラムみたいなもんをご案内します

 

 

一つ目

 

通常のリンク発動型メニュー

 

ブログなどにはよく取り付けてあるのを目にしますが、当該記事から
直接関連するサイトやページに移動する手段として配置すれば

 

何とかつかえるかな～？....とは思っています

 

すべてのページに配置する必要もありませんが、その時の
環境で使い分けてみてはいかがでしょう

 

 

以下が取り付け例です
作動をご確認ください

 

▼ メニューから選択してください１....
シリウスカスタマイズ
Yahoo Japan
Google
goo

 

 

以下コードをコピーしてお使いください

 

ＵＲＬは　他のサイトかアフィリリンクでも　お好きなリンクに入れ替えてください
ＵＲＬを追加してもＯＫです

 

 

横サイズは、トップテキストの文字数に合わせ拡張されます

 

---

 

スポンサーリンク

 

 

---

 

 

 

ファイル読み込み型プルダウンメニューと配置手順

 

 

当サイトご利用のs様より、シリウスに搭載したいという..javascriptの
依頼があり、皆さんがすぐに使うかは不明ですが、いつの日かに...

 

必要とするかもしれない....

 

ほとんど備忘録程度はありますが追記しときます

 

初期段階は、メニュー表でしたが、ほとんど使う方もおりませんし

 

で、画像やユーチューブも使えるに変更しましたら何に使っているかは

 

全然知りませんが利用者多いみたいです

 

 

ＤＥＭＯをここに置きたいんですけど構造上、事情がありもう少し
下においてます

 

 

ここから解説

 

 

まず、DEMOをご確認ください

 

 

ご確認いただけましたか？

 

 

画像を置いてますが、ユーチューブでも可能です

 

ユーチューブなら、表示で即作動する自動再生にしてくださいね

 

例に限らずですが、この手法を使えばほかにもいろいろ使用法は
あると思いますが、それは自己判断でカスタマイズされてください

 

 

取り付け方法

 

その前にこの仕組みはシリウスに限ることかもしれませんが
特殊事情がっ御座いますのでそれも含めてお勧めします

 

読み込みコード
以下の記載は、ページの最下部置いてください

 

<div id="panbase"><p class="pan">スタート</p></div>
<div id="plbase" class="clearfix">
<p>画像選択してください？</p>
<div id="plu">
<form action=".">
<select onchange="document.getElementById('pulldown'+pulldownNo).style.display='none';document.getElementById('pulldown'+(pulldownNo=(this.selectedIndex+1))).style.display='block'">
<option selected>以下でご確認ください</option>
<option>画像１</option>
<option>画像2</option>
<option>画像３</option>
</select>
</form>
</div>
</div>

 

メニューを増やす場合は記述の追加

 

 

 

画像を配置している記述のソース

 

読み込みの順位は、メニューの1が、ソースでは2になります
一つ、ずれるのですね

 

<% textTitle2 %>
ここから
<div id="tabbase2">

 

<script type="text/javascript">
var pulldownNo=1;
</script>

 

<div id="pulldown1"></div>
<div id="pulldown2" style="display:none">

 

 

<table cellpadding="0" cellspacing="0">

 

<img src="<% pageDepth %>img/fotolia_50509577_xs.jpg" style="width:390px;" alt="" />

 

</table>
</div>
<div id="pulldown3" style="display:none">
<table cellpadding="0" cellspacing="0">

 

<img src="<% pageDepth %>img/aikyatch1.jpg" style="width:390px;" alt="" />

 

</table>
</div>

 

<div id="pulldown4" style="display:none">
<table cellpadding="0" cellspacing="0">

 

<img src="<% pageDepth %>img/ahcoduhcdhicdhci.jpg" style="width:390px;" alt="" />

 

</table>
</div>
</div>
ここまで
<% textBody2 %>

 

 

 

トップのプルメニューは記事内に置きますが、読み込まれるコードは
シリウスの記事内においても不動で動きませんので、呼び出すメニューを置く
該当HTMLへ置くのですが、置く場所にご注意です

 

 

ページ内メニューは、巻末へといいましたが、呼び出される場所は、
なぜかページの最上部となるのです

 

ですので、サイト下部に出現させるためには、シリウスの記事2が
該当します

 

でも、記事挿入の２へおいても出現しないので

 

ＨＴＭＬテンプレート内の

 

<% textTitle2 %>

 

ここにおいてください

 

<% textBody2 %>

 

 

ＨＴＭＬテンプレートへ置いたら、どこのページでも表示されてしまう？

 

という不安もあるでしょうが、構造上呼び出しをしなければ現れないので
ご心配なく

 

 

で、<% textTitle2 %>に置けば記事１より下の記事2に表示されるので
読者様には全然わからないことですがちょうどよい位置になるのです

 

 

 

ページトップに戻るリンクは、記事2で書き込んでください

 

ページトップ
コード読み込み＆リンク可能なプルダウンメニュー簡単取り付けコード
シリウスの番外編カスタム＆はてな？と思うご利用方法
シリウスカスタマイズTOP