読者です 読者をやめる 読者になる 読者になる

できるだけ リアルタイム・タップハウス 2.0

大阪市北区浮田にある印刷会社・タップハウスのブログ。 アメーバブログから引っ越しました。

タップハウスのホームページはこちら → http://homepage3.nifty.com/tapphouse/

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」と英字で名前を入れました。そして、「OK」をクリック。

「トップへ戻る」を押した時に戻した場所のヘッダーの一番上に、イカリのマークをつかんで移動させる。

 

f:id:tapphouse:20150728104430p:plain



(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を編集に書き込むと、こんな表示になります。

f:id:tapphouse:20150728104544p:plain



三角の注意マーク「サムネールを生成できません」と表示されます。
でも、これはこれでOK。


この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」ってところが赤くチェックが入ると思うので、それをつかんでグググッと一番上に持ってきます(もし、「トップへ戻る」のアイコンより上に表示したいのがあれば、その下で)。

これでOK。

   ●

以上です。

Webを専業でしている人から見れば、簡単で単純なことなんだろうけれど、これでもDTPオペレーターにしてはひと苦労しました。

ま、でも、できたから、よしと、しときましょうか。

(T)