• MENU●●●●
  • 記事リンクをクリックで下記事へスクロールするシリウスカスタマイズ


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    関連記事


     スポンサーリンク

    記事リンククリックで下記事へスクロールする設定

    2015 0112...2017 0825更新
    シリウス外部カスタマイズ 途中記事をぶっ飛んで目的地へ着陸

     


    ここの2行はページ戻る指定のテスト位置例です…無視してください

    シリウスカスタム3
    逆設定着地点

     

     

    今回の解説はjqueryを必要とします
    こちらのサイトのステップアップカスタマイズとなりますので
    詳細をご確認ください...
    ページトップにスクロールするボタン1.4.3/jquery採用

     

    こちらはHTMLテンプレートに設置する解説です
    シリウスぺージラストへスクロースするボタン取り付カスタマイズ方法

     

     

    jqueryダウンロード HTML HERD内記載スタイルシート記載までは
    同手順ですが、ここでは記事内に個別に設定する方法となります

     


     

     

    記事の上部のページ目次や上部の記事内リンクをクリックすると

     

    記事中段や下段...その目的の位置まで瞬間自動スクロールするサイトを

     

    ご覧になった経験はございませんか?

     

    ブログなどでよくあるロング記事の場合 読者が目的地まで

     

    手動スクロールなしで到達できる手段です

     

     

    上記の関連サイトで1.4.3_jqueryの手順は終了していれば作動します

     

    以下のリンクポチで作動確認いただけます

    シリウスカスタム1

     

    シリウスカスタム2

     

     

    一つのページに複数の配置も可能..

     

    以下にコードを二つ用意しました

     

    出発点はサイト上部に張り付け

     

    着地点は記事中段か..どこか?好みの位置に張り付け

     


     

    出発点

     

    <p id="back-whatsnew"><a href="#sirius1">シリウスカスタム1</a></p>
    <p id="back-whatsnew"><a href="#sirius2">シリウスカスタム2</a></p>

     

    出発地点の sirius1 と着地点のid記載を同じにしてください sirius1
    出発地点のリンク内で sirius1 と指定しておけば
    同じIDのあるコード地点で着地します

     

     

    着地点 別々の箇所へ貼り付けてください
    <div id="sirius1">シリウスカスタム1</div>
    <div id="sirius2">シリウスカスタム2</div>

     


     

    中段 記事 下段記事で着地点コードは好みの位置に記載してください

     

    着地点コードの文字
    シリウスカスタム1
    シリウスカスタム1
    は 記載したくない場合は記載せずとも動きますので削除OKです 

     

    div要素はサイト上では認識できませんがHTMLの読み取りでは
    確認されます

     

     

    sirius1の記載は例えの記載ですので好みに変更してください

     

    3つでも4つでも配置は可能ですが IDは個別に書き換えてください

     

     

    ここで着地

    シリウスカスタム1

    移動が確認できましたか?
    ここに..全ては見えませんが<div id="sirius1">シリウスカスタム1</div>の記述を置いているのですね

     

     

    作動確認するため..意味もなくスペース開けてます..

     

     

     

     

     

    参考
    記事がロングランの場合上部、柄戻るも大切ですね

     

    そんな場合は逆の設定を追加すればサイト上部にスクロ―ルする
    設定をしましょう

     

     

    以下のメニューで詳細をご覧ください

     

     

     

     

    ここでも着地してます

    シリウスカスタム2

     


     

    ページトップへ戻る逆バージョンは以下

     

    サイトにページトップへ戻るスクロールボタンを設置されていない場合でも

     

    逆バージョンを追加すれば..中段..下段で記事を読み終えてから

     

    リンクポチで記事上部へスクロールします

     

     

    出発地点記載コードを下段か中段のメニュー項目ラストへIDを変えて追加

     

     

     

    着地点をサイト上部に記載すると

     

     

    上にスクロールします

     

     

    以下例 クリックしてみてください

    シリウスカスタム3

     

     

    逆バージョン等と言ってますが

     

    単に上下....逆の配置をしただけのことです

     

    1.4.3/jqueryは設定しておけば各個別ページ どこでも作動します

     

     

    ロング記事を書く方は読者へのサービスに採用すると良いですね

     

     

    スポンサーリンク

     

     

    記事リンクをクリックで下記事へスクロールするシリウスカスタマイズ
    ページのトップに戻るスクロールボタンを取り付ける手順解説
    シリウスカスタマイズトップ

    記事リンクをクリックで下記事へスクロールするシリウスカスタマイズ関連解説
    ページトップにスクロールするボタン1.4.3/jquery採用
    jqueryプラグイン 1.4.3/jquery.min.jsでサイト左にスクロールボタンを取り付けます ボタン画像はシリウス画像ですので好みに変えられます
    シリウスぺージラストへスクロースするボタン取り付カスタマイズ方法
    SIRIUS.シリウスカスタマイズ サイトの記事欄上部から サイト巻末まで逆スクロールするテキストボタン取り付けのカスタマイズで エントリーメニューへすぐ到達できます

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト