Adobe MUSEで、スマホサイトの「トップへ戻る」をつけることができました。
下までスクロールしたのはいいが、最初に戻るのが面倒。
なので、「トップへ戻る」ってのをつけたいと思っていました。
しかし、私が作っている大阪市北区の印刷会社・タップハウスのサイトは、Adobe MUSEを使っています。
どのようにして、「トップへ戻る」をつければいいのかわかりませんでした。
「大阪市北区の印刷会社 タップハウス 製本もデザインもできる おすすめ」
（スマホサイトのトップページ）
http://homepage3.nifty.com/tapphouse/phone/index.html?devicelock=phone
ページの一番下に「トップへ戻る」のアイコンを置いて、そこをクリックするとトップに戻すことはわかります。
でも、私がしたかったのは、いつも右下に「トップへ戻る」のアイコンがあって、そこをクリックすると、どの場所からでもトップへ戻るという方法。
ようやくわかりました。
教えてくれたのはこちらのサイト。
「「ページの先頭へ戻る」の常駐表示：CSS小技」さん
http://kumacrow.blog111.fc2.com/blog-entry-497.html
（ありがとうございます）
この中に書かれているHTMLやCSSのコードを少し変えさせていただくとうまくいきました。
具体的にどういうことをしたかというと（以下に長々と書き込みます）。
●
（1）スマホサイトの全ページに「トップへ戻る」をつけたいので、MUSEの「スマートフォン」の中にある「マスターページ」を表示させる。
（2）トップに戻したいところにリンクアンカーを配置する。
配置の仕方は、「オブジェクト」→「リンクアンカーを挿入」をクリックし、カーソルのところにイカリのマークがでてきたら、それを「マスターページ」のドキュメントの上にクリック。
「アンカー名を変更」と出てくるので、どんな名前でもいいですが、私の場合、「トップへ戻る」をクリックすると、ヘッダーの一番上に出したかったので、「header」と英字で名前を入れました。そして、「ＯＫ」をクリック。
「トップへ戻る」を押した時に戻した場所のヘッダーの一番上に、イカリのマークをつかんで移動させる。
（3）「トップへ戻る」のアイコンをクリックするとトップへ戻る仕組みをHTMLで書いて、それを配置する。
「オブジェクト」→「HTMLを挿入」をクリック。
「HTMLを編集」の画面が出てきたら、私の場合、次のHTMLのコードを書き込みました。
<div class="page-back"><a href="#header"><img src="http://homepage3.nifty.com/tapphouse/top-return.jpg"></a></div>
これはどういう意味のHTMLなのかの詳しいことや正解は全然わかってないのですが、私なりの解釈では、次のような意味ではないかと思います。
<div class="page-back">というのは、たぶん、この部品の名前を「page-back」ってつけているのだと思います。だから、「page-back」じゃなくても、他の名前とだぶらなければ何でもよさそう。
<a href="#header">は、さっき、戻りたいところのイカリのマークにつけた「header」のこと。この「header」のところに戻りますよ、ってことじゃないかと思います。
<img src="http://homepage3.nifty.com/tapphouse/top-return.jpg">は、「トップへ戻る」のアイコンのURL。
私が作った「トップへ戻る」のアイコンのファイルの名前は「top-return.jpg」で、そのファイルを、タップハウスのホームページのサーバーに置いてます、ってことだと思います。
だから、ここは、それぞれのサイトで、それぞれのファイル名とサーバーの場所を記入すればいいのではないでしょうか。
</a></div>は、前に出てきたHTMLのコードを閉じている記号ですね。
で、こんなのをHTMLを編集に書き込むと、こんな表示になります。
三角の注意マークと「サムネールを生成できません」と表示されます。
でも、これはこれでＯＫ。
このHEMLを挿入した場所は、マスターページのドキュメントの中だと、どこでもOKみたいです。
「トップへ戻る」のアイコンを表示したい位置は、次のCSSで指定します。
（4）マスターページの「ページプロパティ」でCSSを記入し、「トップへ戻る」のアイコンを表示させる位置を決めます。
マスターページのドキュメントのどこでもいいので、適当なところで右クリック。
「ページプロパティ」ってのが真ん中より下にあるので、そこを選択。
「<head>に挿入するHTML」ってところに、次のCSSを記入。
<style type="text/css">
.page-back {
position: fixed;
bottom: 10px;
right: 10px;
}
/* IE6用ハック */
* html, * html body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
}
* html div#body-inner {
height: 100%;
overflow-y: scroll;
}
* html div.page-back {
position: absolute;
right: 30px;
}
</style>
このCSSの意味は、私はほとんどわかりません。
ただ、
.page-back {
position: fixed;
bottom: 10px;
right: 10px;
}
のところは、
HTMLで名前をつけていた「page-back」のところは、位置を動かさないようにするんだよ（position: fixed）、下から10ピクセル（bottom: 10px）、右から10ピクセル（right: 10px）のところで。
ってことでしょうか。
他のところは、教えていただいたサイトのそのままです。
あ、そうそう。
教えたいただいたサイトには、一番最初の
<style type="text/css">
ってのと、一番最後の
</style>
ってのが入っていません。
その最初と最後のコードは、CSSですよって宣言しているコードらしいので、入れないとだめみたいです。
●
で、以上で出来上がりっぽいのですが、「トップへ戻る」をいつも一番上に出すために、レイヤーパレットを開きます。
そして、マスターページのドキュメントに挿入したHTMLをクリック。
レイアーパレットの「<>埋め込みHTML」ってところが赤くチェックが入ると思うので、それをつかんでグググッと一番上に持ってきます（もし、「トップへ戻る」のアイコンより上に表示したいのがあれば、その下で）。
これでＯＫ。
●
以上です。
Webを専業でしている人から見れば、簡単で単純なことなんだろうけれど、これでもDTPオペレーターにしてはひと苦労しました。
ま、でも、できたから、よしと、しときましょうか。
（Ｔ）
