Q&A
id="main"で複数出てきているのであれば省略している箇所のコードも含めて検索してみると、もう少し絞られるかもしれません。
また、載せている画像だけだと、検索結果のうち1つしか表示されていないので結果で出てきた箇所すべてのコードや画像を載せると回答がもらいやすくなるかもしれません
wordpressで作成されたサイトに
デベロッパーツールを用いて、以下のようなコードが表示されました。
html
1 <div id="page"> 2 省略 3 </div> 4 <div id="main"> 5 省略 6 </div> 7 <div id="side"> 8 省略 9 </div>
上記を以下のように書き換えたいのですが、WordPressのどこから編集すればいいのかわかりません。
HTML
1 <div id="page"> 2 <div id="main"> 3 省略 4 </div> 5 <div id="side"> 6 省略 7 </div> 8 </div>
ご教授いただきたく質問いたしました。
情報不足な場合はご指摘ください。
id="page"で検索した時は以下のファイルのみでした。こちらを編集すればいいでしょうか？
また、編集する場合はどのように編集すればいいでしょうか？
空のコンテンツを投稿
タイトルだけの投稿
回答2件
0
ベストアンサー
リンク先のサイトを見て
ソース上は
HTML
1<div id="page"> 2 <div id="main"> 3 省略 4 </div> 5</div>
となるはずがデベロッパーツール上では
<div id="page"> </div> <div id="main"> 省略 </div>
となるのを何とかしたいという質問だと想定して回答します。
リンク先のサイトのHTMLの構造をチェックするとかなりエラーがでます。
構造的におかしい部分をchromeが補完した結果div#pageからdiv#mainが弾かれたのではないかと思います。
＊また直接は関係ないですがCSSのコメントアウト設定も変な場所がありました。
一度コンテンツが空のページを表示してデベロッパーツールで確認してそれでもおかしいか確認しましょう。
コンテンツが空の状態でも表示がおかしい場合はテーマ自体の構造が間違っています。
多分ですがdiv#ResponsiveNavOverlayの下の閉じDIVがいらないんじゃないかなあ。
投稿2020/08/06 02:43
総合スコア1426
大変詳しくありがとうございます。やはり、構造上おかしいですよね。
１つ質問です。空のコンテンツを生成はどのように行えば良いでしょうか？
一応、WPのダッシュボードから空のコンテンツを投稿する。という形を考えているのですが、
はい。空のコンテンツを投稿してそのページを確認してみてください。
それでも表示が崩れるならテーマの方に問題があることになりますし、それで正常な場合コンテンツ部分の記述がおかしいことになります。
ありがとうございます。
空のコンテンツとタイトルだけの投稿、２通り試してみたのですが、
１つ目はページが見つかりません。とでてレイアウトも崩れていました。（質問に添付）
２つ目もレイアウトが崩れていました。（質問に添付）
以上より、仰ってくださった様に、テーマに問題があると判断しました。
テーマのどこをどう編集すればいいのか知りたいです。
提示しなければならない情報があればご指摘ください。
>多分ですがdiv#ResponsiveNavOverlayの下の閉じDIVがいらないんじゃないかなあ。
おっしゃる通り、ここが原因でした！
本当にありがとうございます。
時間があればで構わないのですが、以下の質問に答えてくださると幸いです。
なぜ閉じdivがあると上手くいかなかったのでしょうか？
本来は
<div id="hdr">の閉じDIVはその下の</div><!-- div#hdr / -->の予定だったのでしょう。
それがその前に閉じDIVが一つ余計にあったのでそちらのほうで閉じられました。
となると</div><!-- div#hdr / -->はどこのDIVを閉じるかといいますと、
その上の要素である<div id="page"><!-- / wrapper -->が閉じられます。
そしてそのあと<div id="main">が始まるのでおかしなことになっていました。
なるほど！理解できました！
本当にありがとうございます！
0
テーマによるのですが、以下のフォルダの中で「id="main"」など
文字列検索してみてください。
/wp-content/themes/テーマ名/
テーマによって、管理画面から修正すべきかもしれません。
変更を加える場合はバックアップを取ったうえで試してください。
投稿2020/08/05 10:51
総合スコア4528
FTPツールを使って文字列検索してみたのですが、提示していただいたファイルからではファイル名に関しての文字列検索しかできませんでした。どうすれば良いでしょうか？
Visual Studio Code、Atom、Sublime Textなどのエディタを使っているなら
「プロジェクト内検索」などのキーワードで調べてみるとよさそうです。
Mac: 「command + shift + f」
Win: 「ctrl + shift + f」
上記ショートカットでエディタの「プロジェクト内検索」ができることが多い印象です。
Visual Studio Codeの場合
https://qiita.com/sosukeokubo/items/46436d30d967f9f5030b
Atomの場合
https://qiita.com/knt45/items/86086f910aa125b88739
MacやWindowsのファインダ (フォルダ) 内検索を使っても、
見つけられるかもしれません。
----
コマンドを使用できるなら、以下を参考にしてみてください。
https://www.wakuwakubank.com/posts/337-linux-grep/
----
以下の情報があると、精度が高めの回答してもらいやすくなると思います。
・テーマ名
→ダウンロードして確認してもらえるかも?
・フォルダ内をキャプチャ
→このファイルとこのファイルは怪しい、と言ってもらえやすくなるかも?
大変詳しく、ありがとうございます。
id="main"とプロジェクト内検索をしたらいくつか見つかりました。（質問に添付）が、どこをどう修正すればいいのかわかりません。教えてくれると幸いです。
https://shiga-takayakoumuten.jp/blog こちらのページからデベロッパーツールを用いてソースをみました。テーマは自作です。
あなたの回答
tips
プレビュー
