質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1060閲覧

イメージマップへのアンカーリンクの設定

wnkh

総合スコア2

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/07/14 08:51

編集2022/07/15 13:51

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です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

a.anchor

p.anchor

ではないでしょうか。
pタグのclass属性も2つあるので整理したほうがいいかと思います。

投稿2022/07/14 12:18

norando

総合スコア113

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wnkh

2022/07/15 00:58

返答感謝です。 自分のやり方が悪いのか変わらないままなので回答を参考にまた調べ直してみます。
norando

2022/07/15 02:18 編集

HTMLのpタグの class="anchor"をclass="sample" に編集されたのでしょうか。 > pタグのclass属性も2つあるので整理したほうがいいかと思います。 と書きましたがそういう事ではなくて、 現状の <p class="has-text-align-center" id="aomori" class="sample"> だと class が2つあるので、1つにまとめないと2つ目のクラスには効きません。 そしてCSSをあてる対象のclass名を変更してしまったら、当然ですが効くものも効かなくなります。 .sampleで行くなら HTML <p class="has-text-align-center sample" id="aomori"> CSS p.sample{ } になるかと思います。 参考になれば幸いです。
wnkh

2022/07/15 04:51

classのまとめ方が間違っていました、ご指摘通りに試したら成功しました。 本当に助かりました、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問