無料ホームページテンプレート Template Party無料ホームページテンプレート Template Party

clinic3更新|2018/07/02

「ページの上部へ戻る」ボタンをフッター固定からスクロール中の自動出力に変更。

※不具合修正ではなく、機能の変更となります。作業が必須となる内容ではありません。

修正方法

  1. 必要なファイルを持ってくる必要があるので、最新のテンプレートをダウンロードして下さい。
  2. 以下のファイルをお手元のテンプレートにコピーして下さい。
    css/fixmenu_pagetop.css
    js/fixmenu_pagetop.js
    js/fixmenu.js
    (※このファイルのみ、上書きとなります。)
  3. コピーしたcssとjsファイルの読み込みタグを全html(head内)に入れます。
    (場所がわからない場合は最新のテンプレートを参考にして下さい。)
    <link rel="stylesheet" href="css/fixmenu_pagetop.css">
    <script type="text/javascript" src="js/fixmenu_pagetop.js"></script>
  4. css/style.cssの
    /*fixmenu設定(メニューが画面上部に到達した際のスタイル)
    に以下を追加。
    /*上の3つのスタイルの「.is-fixed」を「.is-fixed-menu」と変更して同じスタイルを設定して下さい。*/
    body.is-fixed-menu #menubar.nav-fix-pos {
    position: fixed;
    width: 100%;
    top: 0px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    border-bottom: 1px solid #9c9c9c; /*下の線の幅、線種、色*/
    }
    body.is-fixed-menu #menubar.nav-fix-pos ul {
    background: rgba(255,255,255,0.95);
    }
    body.is-fixed-menu .inner#first {
    margin-top: 72px; /*メニューの高さ(「#menubar ul li aのline-height: 50px;」と「marginの計20px分」と、「#menubarのborderの上下2px分」)を合計した数字を設定する*/
    }
  5. html側の下の方にある、
    <!--メニュー開閉ボタン-->
    の上の行に以下(「↑」のボタンタグ)を追加。※全htmlに追加して下さい。
    <p class="nav-fix-pos-pagetop"><a href="#">↑</a></p>
  6. 最後に、元々あったフッター内の「↑」のタグを削除しておきます。※これは残したままでも問題はありません。
    <p id="pagetop"><a href="#">↑</a></p>