サポート » プラグイン » 同じページ内リンク(スクロール)について

  • 解決済 shoshinnsha

    (@shoshinnsha)


    お世話になります。

    最近よくある1ページだけの縦型のホームページを作成したいです。

    そこで、プラグインの「Smooth Scroll Links」をダウンロードし有効化にして使った所、
    固定ページで編集できる文書内のリンクであれば、問題なくできたのですが、

    TOPページの上部にあるメニュー(会社概要やサービスなどのボタン)から、
    それぞれ該当する場所へスクロールで移動させたいのですが、
    そのやり方が分かりません。

    WordPressのカスタムリンクで(URLに#アンカー名)設定すると、移動はするのですが、
    スクロールではありません。

    ご教示頂けますようお願い申し上げます。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • 메텔

    (@digitmaetel)

    状況把握に2点情報をください。

    1. 固定ページでは遅延してスクロールできるんですね?
    2. TOPページは、「フロントページの表示」を『最新の投稿』と『固定ページ』のどちらを選択していますか?

    ご返信頂きまして誠にありがとうございます。
    記載の仕方が悪くて申し訳ございません。

    1.固定ページでのスクロールというのは、固定ページで編集できる部分(本文?)で
    スクロールできるという意味です。
    良くある企業のホームページで、上部(ヘッダーというのでしょうか?)に「会社概要」やら
    「サービス内容」などからスクロールさせたいんですが、どうすればいいのか分かりません。

    2.フロントページの表示は「固定ページ」です。
    ブログじゃないページを作成したいので「投稿」は使っておりません。

    どうぞ宜しくお願い致します。

    메텔

    (@digitmaetel)

    を用意しました。
    Section-One から Section-Four までのナビゲーションでスムーズ・スクロールさせています。

    これが、shoshinnsha さんのケースでは、固定ページは動作するが、フロントページは動作しないのですか?

    色々とありがとうございます。

    ご用意頂きまして「例」のようにしたいんです。

    Section-ONEの本文内(背景が黄色)に、スクロールリンク元とリンク先を記述して
    スクロールするのは、固定ページに以下のタグを記述してやっています。
     ~  …リンク元
     ~  …リンク先

    ただ、メニューからのスクロール(「Section-ONE」をクリックしてスクロール)が
    出来ません。

    それには固定ページでないどこかに記述が必要だと思うのですが、
    どうすれば出来るのかが分かりません。

    何分、素人なもので、色々なサイトを見ながら手探りでやっています。

    どうぞ宜しくお願い致します。

    메텔

    (@digitmaetel)

    アンカーのタグが「#ラベル」と1バイト文字ではないからってことはないですか

    お付き合い頂いており誠にありがとうございます。

    私の記載が悪くて申し訳ございません。
    そもそも、そのタグをどうやって「メニュー(頂いた例で言うと「Section-ONE」)」
    に設定したいいのかが分からないんです。
    固定ページからでは、記載ができないようで、テンプレートの編集が必要そうなんですが、
    どのテンプレートに設定したらいいかが分かりません。

    度々申し訳ございませんが、どうぞ宜しくお願い致します。

    메텔

    (@digitmaetel)

    固定ページと理屈は同じですよ。フロントページの各セクションにアンカー、あるいは ID タグを入れるだけです。
    例では、Section ID として「section-one」〜「section-four」を入れています。

    グローバルメニューの方には、「#section-one」〜「#section-four」を入れているだけです。

    以上のことは承知のうえだと思います。

    しかし、課題は

    移動はするのですが、スクロールではありません。

    ではなかったでしょうか?

    遅くなり誠に申し訳ございません。

    >移動はするのですが、スクロールではありません。

     そうでした。
     今やっているのは、各セクションにアンカーを入れ、
     Wordpressのメニュー → カスタムリンクで、○○.com/#アンカー名 
     で設定しています。
     ただこれがスクロールせずに、画面遷移してしまいますし、
     URLも「○○.com/#アンカー名」になるので、ならない方法でやりたいのです。

    >グローバルメニューの方には、「#section-one」〜「#section-four」を
    >入れているだけです。
     
     これを、どこで設定するのかが分からないのです。
     テンプレートの「header.php」に追加するのか、追加するとしてもどこの部分に
     追加すればいいのか分かりません。

    色々とご対応頂いてありがとうございます。

    메텔

    (@digitmaetel)

    今やっているのは、各セクションにアンカーを入れ、
     Wordpressのメニュー → カスタムリンクで、○○.com/#アンカー名 
     で設定しています。
     ただこれがスクロールせずに、画面遷移してしまいますし、
     URLも「○○.com/#アンカー名」になるので、ならない方法でやりたいのです。

    カスタムリンクの URL をID(#アンカー名)にしましょう。
    つまり、「○○.com/#アンカー名」ではなく「#アンカー名」にすることでページの再読み込みにならないので「○○.com/#アンカー名」となりません。

    これで解決しますよね。

    >移動はするのですが、スクロールではありません。
     そうでした。

    掲題には戻りましたが、WordPress固有のことからズレてきました。

    さて、フロントページでのアンカーは、フロントページのテンプレートにIDを追加すると良いでしょう。
    あるいは、既にあるIDを流用できます。
    それは、運用中のサイトで確認済みです。

    >カスタムリンクの URL をID(#アンカー名)にしましょう。
    >つまり、「○○.com/#アンカー名」ではなく「#アンカー名」にすることでページの
    >再読み込みにならないので「○○.com/#アンカー名」となりません。

     できました~!!スクロールしました。
     やりたかったのが、これです。
     説明不足でご迷惑をお掛けしたにも関わらず、ご親切にお付き合い下さり感謝です。
     本当にありがとうございます。

     もう一ついいでしょうか?
     スクロールすると、ヘッダー画像があり、文字が隠れてしまいますが、
     これを少しずらすにはどうすればいいのでしょうか?
     ハードル高ければ諦めます。

    どうぞ宜しくお願い致します。

    메텔

    (@digitmaetel)

    ログアウトした状態でも同様でしょうか?

    >ログアウトした状態でも同様でしょうか?

     はい。色々と申し訳ございません。

    テーマによって詳細は異なるので省略しますがこういうのですねー

    position:fixedでヘッダ固定時のページ内リンクのずれを解消したい

    出来ました!!
    padding-topでピクセル数入れて実行したら出来ました!

    本当にありがとうございます。感謝です。

    後程、解決済みに致します。

    お世話になりました。本当にありがとうございます。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「同じページ内リンク(スクロール)について」には新たに返信することはできません。