WordPressで日本地図のイメージマップ内に同ページの都道府県まで移動するリンクを作るとこまではできたのですが、固定されているヘッダーが移動先を隠してしまう状態で、位置を調整しようとしたのですが反映されません。
ページ内リンクに飛んだらリンク先が画面中央ぐらいにくる様に調整したいです。
該当のソースコード
日本地図内のHTML(全体)
HTML
1<!-- wp:html --> 2<div align="center"><img src="https://sinpar.co.jp/wp-content/uploads/2022/05/map-white-0531.jpg" usemap="#ImageMap" alt="map"> 3<map name="ImageMap"> 4 <area shape="poly" coords="376,25,495,25,495,102,407,104,408,114,373,116,373,116" href="#hokkaido" alt="hokkaido"> 5 <area shape="rect" coords="374,130,468,158" href="#aomori" alt="aomori"> 6 <area shape="rect" coords="422,161,467,195" href="#iwate" alt="iwate"> 7 <area shape="rect" coords="372,161,420,195" href="#akita" alt="akita"> 8 <area shape="rect" coords="421,198,467,233" href="#miyagi" alt="miyagi"> 9 <area shape="poly" coords="374,200,420,199,420,231,396,231,396,223,374,222,376,220" href="#yamagata" alt="yamagata"> 10 <area shape="rect" coords="392,234,468,268" href="#fukushima" alt="fukushima"> 11 <area shape="rect" coords="444,272,468,320" href="#ibaraki" alt="ibaraki"> 12 <area shape="rect" coords="408,271,443,306" href="#tochigi" alt="tochigi"> 13 <area shape="rect" coords="371,272,406,306" href="#gunma" alt="gunma"> 14 <area shape="rect" coords="371,309,442,337" href="#saitama" alt="saitama"> 15 <area shape="rect" coords="445,320,468,405" href="#chiba" alt="chiba"> 16 <area shape="poly" coords="392,341,444,341,444,356,429,356,429,368,394,368,394,368" href="#tokyo" alt="tokyo"> 17 <area shape="poly" coords="379,372,428,372,428,406,392,406,392,387,381,388,381,385" href="#kanagawa" alt="kanagawa"> 18 <area shape="poly" coords="374,227,390,227,390,267,346,267,344,237,373,237,373,237" href="#niigata" alt="niigata"> 19 <area shape="rect" coords="305,235,340,269" href="#toyama" alt="toyama"> 20 <area shape="rect" coords="279,223,302,268" href="#ishikawa" alt="ishikawa"> 21 <area shape="poly" coords="280,272,302,272,301,304,257,305,258,285,283,284,283,284" href="#fukui" alt="fukui"> 22 <area shape="rect" coords="353,339,388,368" href="#yamanashi" alt="yamanashi"> 23 <area shape="poly" coords="332,273,372,273,371,337,350,337,349,367,334,366,334,366" href="#nagano" alt="nagano"> 24 <area shape="rect" coords="305,271,327,368" href="#gifu" alt="gifu"> 25 <area shape="poly" coords="344,373,378,372,378,392,389,392,390,406,344,404,344,404" href="#shizuoka" alt="shizuoka"> 26 <area shape="rect" coords="305,370,338,404" href="#aichi" alt="aichi"> 27 <area shape="rect" coords="279,346,302,427" href="#mie" alt="mie"> 28 <area shape="rect" coords="279,308,301,344" href="#shiga" alt="shiga"> 29 <area shape="poly" coords="232,284,254,286,256,311,278,310,278,342,232,343" href="#kyoto" alt="kyoto"> 30 <area shape="rect" coords="230,345,252,384" href="#osaka" alt="osaka"> 31 <area shape="rect" coords="204,283,226,354" href="#hyogo" alt="hyogo"> 32 <area shape="rect" coords="255,344,277,399" href="#nara" alt="nara"> 33 <area shape="poly" coords="231,389,252,391,253,406,278,405,278,427,231,427,231,427" href="#wakayama" alt="wakayama"> 34 <area shape="rect" coords="180,283,202,317" href="#tottori" alt="tottori"> 35 <area shape="rect" coords="155,283,177,318" href="#shimane" alt="shimane"> 36 <area shape="rect" coords="180,320,202,355" href="#okayama" alt="okayama"> 37 <area shape="rect" coords="155,320,175,353" href="#hiroshima" alt="hiroshima"> 38 <area shape="rect" coords="130,283,151,354" href="#yamaguchi" alt="yamaguchi"> 39 <area shape="rect" coords="174,399,217,428" href="#tokushima" alt="tokushima"> 40 <area shape="rect" coords="174,366,217,397" href="#kagawa" alt="kagawa"> 41 <area shape="rect" coords="130,367,172,396" href="#ehime" alt="ehime"> 42 <area shape="rect" coords="129,399,172,428" href="#kochi" alt="kochi"> 43 <area shape="poly" coords="59,285,117,285,117,307,92,307,92,336,59,337,59,337" href="#fukuoka" alt="fukuoka"> 44 <area shape="rect" coords="31,283,55,337" href="#saga" alt="saga"> 45 <area shape="rect" coords="7,284,30,338" href="#nagasaki" alt="nagasaki"> 46 <area shape="rect" coords="57,337,91,391" href="#kumamoto" alt="kumamoto"> 47 <area shape="rect" coords="94,308,119,348" href="#oita" alt="oita"> 48 <area shape="rect" coords="93,351,116,391" href="#miyazaki" alt="miyazaki"> 49 <area shape="rect" coords="57,394,117,428" href="#kagoshima" alt="kagoshima"> 50 <area shape="rect" coords="57,441,80,475" href="#okinawa" alt="okinawa"> 51</map> 52</div> 53<!-- /wp:html -->
リンク先のHTML
HTML
1<!-- wp:html --> 2<p class="has-text-align-center" id="aomori" class="sample"><br><span class="serif-font"><span style="font-size: 20px" class="font-size"><a href="https://sinpar.co.jp/sinpar-salesoutlet-aomori/">青森</a></span></span></p> 3<!-- /wp:html -->
CSS
1p.anchor{ 2 display: block; 3 padding-top: 70px; 4 margin-top: -70px; 5}
CSSを追加CSS部分に入力しましたが反映されずにヘッダーメニュー内に隠れてしまいます。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
7月15日、地図のHTMLを全体にしてCSSを指摘された通りに<p anchor>に変更しました、使用しているテーマはLuxeritas Child Themeです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/15 00:58
2022/07/15 02:18 編集
2022/07/15 04:51