teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問ページ内リンクが飛ばなくなった

編集履歴

質問編集履歴

5

内容の整理

2017/05/11 05:38

投稿

hirotaka612
hirotaka612

スコア32

title CHANGED
File without changes
body CHANGED
@@ -1,69 +1,23 @@
1
1
  #困っていること
2
- ```html
3
- <ul class="nav nav-pills active">
4
- <li><a href="#contact">Contact</a></li>
5
- <li><a href="#about">About</a></li>
6
- <li><a href="#portfolio">Portfolio</a></li>
7
- </ul>
8
- ```
9
2
 
10
- ```php
11
- <?php get_header(); ?>
3
+ 現在index.php内でページ内リンクを実装しています。
12
-
13
- <section id="top" class="block">
14
- <div class="col-xs-12">
15
- <img src="<?php echo get_template_directory_uri(); ?>/img/sample.jpg" class="img-responsive">
16
- <p class="title">Hirotaka Origuchi Photography</p>
17
- </div>
18
- </section>
19
4
 
20
- <section id="portfolio" class="block">
21
- <div class="container">
22
- <div class="row mainlink">
5
+ [portfolio]と[contact]のリンクはうまく移動してくれるのですが、
23
- <div class="col-md-6 col-xs-12"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/test.jpg"></a></div>
24
- <div class="col-md-6 col-xs-12"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/test.jpg"></a></div>
25
- <div class="col-md-6 col-xs-12"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/test.jpg"></a></div>
26
- <div class="col-md-6 col-xs-12"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/test.jpg"></a></div>
27
- </div>
28
- </div>
29
- </section>
6
+ なぜか[about]だけサイトのトップにリンクしてしまいます。
7
+ (一番上までスクロールした状態では動かず、最下部でクリックすると最上部に飛ぶ)
30
8
 
31
- <div class="info">
32
- <section id="about" class="block">
33
- <h2 class="ab">About</h2>
34
- <h4>~Hirotaka Origuchi~</h4>
35
- <p>1995年生まれ、岡山県在住<br>2016年にカメラを始め、同年5月に<a href="https://lovegraph.me/">Lovegraph</a>にジョイン。<br>その夏からポートレート撮影を開始。<br>2017年10月より<br><a href="http://www.studioaim.jp/harajuku.html">creative photostudio aim</a>原宿店に勤務</p>
36
- <h4>~Equipment~</h4>
37
- <p>Canon EOS 6D<br>Canon EOS 80D<br>Sigma Art 135mm<br>Sigma Art 30mm<br>iPhone6S</p>
38
- </section>
9
+ 先ほどまでは正常に動いていて、
10
+ フォントの単位指定を変更した後、確認していたら動かなくなっていました。
39
11
 
40
- <section id="contact" class="block">
41
- <h2 class="co">Contact</h2>
42
- <h4>~E-Mail~</h4>
43
- <a href="mailto:lostsymbol612@gmail.com" class="mail">メールで連絡する</a>
44
- <h4>~SNS Link~</h4>
45
- <div class="table-responsive">
46
- <table class="table">
47
- <tr>
48
- <td><a href="https://instagram.com/hirotaka612" class="sns">Instagram</a></td>
49
- <td><a href="https://www.facebook.com/hocuspocusphotographer/" class="sns">Facebook</a></td>
50
- </tr>
51
- <tr>
52
- <td><a href="https://500px.com/hirotaka612" class="sns">500px</a></td>
53
- <td><a href="https://twitter.com/HocusPocusPhoto" class="sns">Twitter</a></td>
54
- </tr>
55
- <tr>
56
- <td><a href="https://mstdn.tokyocameraclub.com/@HirotakaOriguchi" class="sns">Mstdn</a></td>
57
- <td></td>
58
- </tr>
59
- </table>
60
- </div>
61
- </section>
62
- </div>
63
12
 
13
+ ※ちなみに画面サイズを大きくすれば動きます。
14
+ ※スマホサイズぐらいにすると動きません。
64
- <?php get_footer(); ?>
15
+ ※ローカル環境のみで発生 サーバーに上げると解消
16
+ ※問題の[id="About"]に対してフォント以外のCSS(borderやpadding等)が効かない現象も併発しています。
17
+
18
+
65
- ```
19
+ ページ内リンクが動かなくなる可能性としてはどんな原因が考えられるのでしょうか？
66
- 下がHTML変換後のソースです。
20
+ よろしくお願いします。
67
21
  ```html
68
22
  <!DOCTYPE html>
69
23
  <html>
@@ -190,18 +144,4 @@
190
144
  <script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/lib/js/bootstrap.min.js?ver=1.0.0'></script>
191
145
  </body>
192
146
  </html>
193
- ```
147
+ ```
194
- 現在index.php内で上記のように指定し、
195
- ページ内リンクを実装しています。
196
-
197
- [portfolio]と[contact]のリンクはうまく移動してくれるのですが、
198
- なぜか[about]だけ動きません。
199
- 先ほどまでは動いていて、
200
- フォントの単位指定を変更した後、確認していたら動かなくなっていました。
201
-
202
- ※ちなみにブラウザサイズを小さくした時のみ動きません。
203
-
204
- ページ内リンクが動かなくなる可能性としてはどんな原因が考えられるのでしょうか？
205
- よろしくお願いします。
206
-
207
- ![イメージ説明](f8a2895f481ef4a85164d12ec8eedd6c.png)

4

情報の追加

2017/05/11 05:38

投稿

hirotaka612
hirotaka612

スコア32

title CHANGED
File without changes
body CHANGED
@@ -63,7 +63,134 @@
63
63
 
64
64
  <?php get_footer(); ?>
65
65
  ```
66
+ 下がHTML変換後のソースです。
67
+ ```html
68
+ <!DOCTYPE html>
69
+ <html>
70
+ <head>
71
+ <meta charset=UTF-8">
72
+ <meta name="description" content="Hirotaka OPriguchiのポートフォリオ">
73
+ <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
74
+ <title>Hocus Pocus</title>
75
+ <link href="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/style.css" rel="stylesheet" media="screen">
76
+ <link rel="stylesheet" href="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/genericons/genericons.css" type="text/css" />
77
+ <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative" rel="stylesheet">
78
+ <link href="https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy" rel="stylesheet">
79
+ <script type="text/javascript">
80
+ window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/127.0.0.1:4001\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.4"}};
81
+ !function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
82
+ </script>
83
+ <style type="text/css">
84
+ img.wp-smiley,
85
+ img.emoji {
86
+ display: inline !important;
87
+ border: none !important;
88
+ box-shadow: none !important;
89
+ height: 1em !important;
90
+ width: 1em !important;
91
+ margin: 0 .07em !important;
92
+ vertical-align: -0.1em !important;
93
+ background: none !important;
94
+ padding: 0 !important;
95
+ }
96
+ </style>
97
+ <link rel='stylesheet' id='bootstrap-css-css' href='http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/lib/css/bootstrap.min.css?ver=4.2.4' type='text/css' media='all' />
98
+ <script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
99
+ <script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
100
+ <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://127.0.0.1:4001/wordpress/xmlrpc.php?rsd" />
101
+ <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://127.0.0.1:4001/wordpress/wp-includes/wlwmanifest.xml" />
102
+ <meta name="generator" content="WordPress 4.2.4" />
103
+ <link rel="shortcut icon" type="image/x-icon" href="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/favicon.ico" />
66
104
 
105
+ <script>
106
+ //スムーズスクロール
107
+ jQuery(function(){
108
+ // #で始まるアンカーをクリックした場合に処理
109
+ jQuery('a[href^=#]').click(function() {
110
+ // スクロールの速度
111
+ var speed = 350; // ミリ秒
112
+ // アンカーの値取得
113
+ var href= jQuery(this).attr("href");
114
+ // 移動先を取得
115
+ var target = jQuery(href == "#" || href == "" ? 'html' : href);
116
+ // 移動先を数値で取得
117
+ var position = target.offset().top;
118
+ // スムーズスクロール
119
+ jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
120
+ return false;
121
+ });
122
+ });
123
+ </script>
124
+
125
+ </head>
126
+ <body>
127
+
128
+ <div id="header">
129
+ <ul class="nav nav-pills active">
130
+ <li><a href="#contact">Contact</a></li>
131
+ <li><a href="#about">About</a></li>
132
+ <li><a href="#portfolio">Portfolio</a></li>
133
+ </ul>
134
+ </div>
135
+ <section id="top" class="block">
136
+ <div class="col-xs-12">
137
+ <img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/sample.jpg" class="img-responsive">
138
+ <p class="title">Hirotaka Origuchi Photography</p>
139
+ </div>
140
+ </section>
141
+
142
+ <section id="portfolio" class="block">
143
+ <div class="container">
144
+ <div class="row mainlink">
145
+ <div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div>
146
+ <div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div>
147
+ <div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div>
148
+ <div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <div class="info">
154
+ <section id="about" class="block">
155
+ <h2 class="ab">About</h2>
156
+ <h4>~Hirotaka Origuchi~</h4>
157
+ <p>1995年生まれ、岡山県在住<br>2016年にカメラを始め、同年5月に<a href="https://lovegraph.me/">Lovegraph</a>にジョイン。<br>その夏からポートレート撮影を開始。<br>2017年10月より<br><a href="http://www.studioaim.jp/harajuku.html">creative photostudio aim</a>原宿店に勤務</p>
158
+ <h4>~Equipment~</h4>
159
+ <p>Canon EOS 6D<br>Canon EOS 80D<br>Sigma Art 135mm<br>Sigma Art 30mm<br>iPhone6S</p>
160
+ </section>
161
+
162
+ <section id="contact" class="block">
163
+ <h2 class="co">Contact</h2>
164
+ <h4>~E-Mail~</h4>
165
+ <a href="mailto:lostsymbol612@gmail.com" class="mail">メールで連絡する</a>
166
+ <h4>~SNS Link~</h4>
167
+ <div class="table-responsive">
168
+ <table class="table">
169
+ <tr>
170
+ <td><a href="https://instagram.com/hirotaka612" class="sns">Instagram</a></td>
171
+ <td><a href="https://www.facebook.com/hocuspocusphotographer/" class="sns">Facebook</a></td>
172
+ </tr>
173
+ <tr>
174
+ <td><a href="https://500px.com/hirotaka612" class="sns">500px</a></td>
175
+ <td><a href="https://twitter.com/HocusPocusPhoto" class="sns">Twitter</a></td>
176
+ </tr>
177
+ <tr>
178
+ <td><a href="https://mstdn.tokyocameraclub.com/@HirotakaOriguchi" class="sns">Mstdn</a></td>
179
+ <td></td>
180
+ </tr>
181
+ </table>
182
+ </div>
183
+ </section>
184
+ </div>
185
+
186
+ <div id="footer">
187
+ <p class="copy">&copy;2017 Hirotaka Origuchi</p>
188
+ <a class="genericon genericon-collapse" href="#top"></a>
189
+ </div>
190
+ <script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/lib/js/bootstrap.min.js?ver=1.0.0'></script>
191
+ </body>
192
+ </html>
193
+ ```
67
194
  現在index.php内で上記のように指定し、
68
195
  ページ内リンクを実装しています。
69
196
 

3

情報の追加

2017/05/11 03:42

投稿

hirotaka612
hirotaka612

スコア32

title CHANGED
File without changes
body CHANGED
@@ -7,15 +7,61 @@
7
7
  </ul>
8
8
  ```
9
9
 
10
- ```html
11
- <section id="portfolio">
12
- </section>
13
- ...
14
- <section id="about">
15
- </section>
16
- ...
17
- <section id="contact">
18
- </section>
10
+ ```php
11
+ <?php get_header(); ?>
12
+
13
+ <section id="top" class="block">
14
+ <div class="col-xs-12">
15
+ <img src="<?php echo get_template_directory_uri(); ?>/img/sample.jpg" class="img-responsive">
16
+ <p class="title">Hirotaka Origuchi Photography</p>
17
+ </div>
18
+ </section>
19
+
20
+ <section id="portfolio" class="block">
21
+ <div class="container">
22
+ <div class="row mainlink">
23
+ <div class="col-md-6 col-xs-12"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/test.jpg"></a></div>
24
+ <div class="col-md-6 col-xs-12"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/test.jpg"></a></div>
25
+ <div class="col-md-6 col-xs-12"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/test.jpg"></a></div>
26
+ <div class="col-md-6 col-xs-12"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/test.jpg"></a></div>
27
+ </div>
28
+ </div>
29
+ </section>
30
+
31
+ <div class="info">
32
+ <section id="about" class="block">
33
+ <h2 class="ab">About</h2>
34
+ <h4>~Hirotaka Origuchi~</h4>
35
+ <p>1995年生まれ、岡山県在住<br>2016年にカメラを始め、同年5月に<a href="https://lovegraph.me/">Lovegraph</a>にジョイン。<br>その夏からポートレート撮影を開始。<br>2017年10月より<br><a href="http://www.studioaim.jp/harajuku.html">creative photostudio aim</a>原宿店に勤務</p>
36
+ <h4>~Equipment~</h4>
37
+ <p>Canon EOS 6D<br>Canon EOS 80D<br>Sigma Art 135mm<br>Sigma Art 30mm<br>iPhone6S</p>
38
+ </section>
39
+
40
+ <section id="contact" class="block">
41
+ <h2 class="co">Contact</h2>
42
+ <h4>~E-Mail~</h4>
43
+ <a href="mailto:lostsymbol612@gmail.com" class="mail">メールで連絡する</a>
44
+ <h4>~SNS Link~</h4>
45
+ <div class="table-responsive">
46
+ <table class="table">
47
+ <tr>
48
+ <td><a href="https://instagram.com/hirotaka612" class="sns">Instagram</a></td>
49
+ <td><a href="https://www.facebook.com/hocuspocusphotographer/" class="sns">Facebook</a></td>
50
+ </tr>
51
+ <tr>
52
+ <td><a href="https://500px.com/hirotaka612" class="sns">500px</a></td>
53
+ <td><a href="https://twitter.com/HocusPocusPhoto" class="sns">Twitter</a></td>
54
+ </tr>
55
+ <tr>
56
+ <td><a href="https://mstdn.tokyocameraclub.com/@HirotakaOriguchi" class="sns">Mstdn</a></td>
57
+ <td></td>
58
+ </tr>
59
+ </table>
60
+ </div>
61
+ </section>
62
+ </div>
63
+
64
+ <?php get_footer(); ?>
19
65
  ```
20
66
 
21
67
  現在index.php内で上記のように指定し、

2

情報の追加

2017/05/11 03:23

投稿

hirotaka612
hirotaka612

スコア32

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- #困っている事
1
+ #困っていること
2
2
  ```html
3
3
  <ul class="nav nav-pills active">
4
4
  <li><a href="#contact">Contact</a></li>
@@ -29,4 +29,6 @@
29
29
  ※ちなみにブラウザサイズを小さくした時のみ動きません。
30
30
 
31
31
  ページ内リンクが動かなくなる可能性としてはどんな原因が考えられるのでしょうか？
32
- よろしくお願いします。
32
+ よろしくお願いします。
33
+
34
+ ![イメージ説明](f8a2895f481ef4a85164d12ec8eedd6c.png)

1

情報の追加

2017/05/11 02:58

投稿

hirotaka612
hirotaka612

スコア32

title CHANGED
File without changes
body CHANGED
@@ -23,8 +23,10 @@
23
23
 
24
24
  [portfolio]と[contact]のリンクはうまく移動してくれるのですが、
25
25
  なぜか[about]だけ動きません。
26
- ちなみに先ほどまでは動いていて、
26
+ 先ほどまでは動いていて、
27
27
  フォントの単位指定を変更した後、確認していたら動かなくなっていました。
28
28
 
29
+ ※ちなみにブラウザサイズを小さくした時のみ動きません。
30
+
29
31
  ページ内リンクが動かなくなる可能性としてはどんな原因が考えられるのでしょうか？
30
32
  よろしくお願いします。