HTMLに生成されるstyleについて
-
gblsmさん
ありがとうございます。Wordpressを学習中でして、どの観点から追っていけば良いかわからなかった為、大変助かりました。
テンプレートタグや関数が原因であるという線で調査してみます。例えば wp_get_attachment_image() を使うと img タグに width や height 属性が出力されますが、代わりに wp_get_attachment_image_src() を使って画像の URL を取得し、自分で img タグを出力することができます。
- この返信は6年、 5ヶ月前にgblsmが編集しました。
gblsmさん
具体例ありがとうございます。
wordpress関数が余計なstyleを付与していると考えphpファイルを見ていました。
今回、特定のカテゴリで投稿している記事を「<?php if(have_posts()): while(have_posts()): the_post(); ?>」にて一覧表示させることで画像一覧のページを作っております。
この「<?php if(have_posts()): while(have_posts()): the_post(); ?>」がHTMLに出力する際にstyleを付与していると考え対策を調べております。
もし似たような経験や、”こうすべきである”といった点がありましたら、ご教授いただけたら幸いです。
私も現在調べておりますので自己解決しましたらクローズいたします。以下にソースコードと出力例を記載させていただきます。
———————————————
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<article class=”portfolio-box”>
<div class=”inner-box”>
<div <?php post_class( ‘thumb-img’ ); ?>>
“>
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail(‘full’); ?>
<?php else: ?>
/add/no-image.gif” alt=”no-img”/>
<?php endif; ?>
</div>
<div class=”info-space”>
<dl>
<dt class=”article-title”><?php the_title(); ?></dt>
</dl>
</div>
</div>
</article>
<?php endwhile; endif; ?>
———————————————<article class=”portfolio-box style=”height: 397.44px;”>
<div class=”inner-box”>
<div class=”thumb-img post status-publish format-standard has-post-thumbnail hentry category-portfolio”>
</div>
<div class=”info-space”>
<dl>
<dt class=”article-title”>hogheoge</dt>
</dl>
</div>
</div>
</article>※<article class=”portfolio-box”>に意図していないstyleが付与されている
事象について追記いたします。
google chromeの「ページの出力」にて確認すると「<article class=”portfolio-box」となっております。
しかしgoogle developer toolsにて確認すると「<article class=”portfolio-box style=”height: 397.44px;”>」のように表示されていることを確認しました。google developer toolsのstyleタブにて確認すると「element.style」に「height: 379.44px;」が付与されておりこのstyleを削除したいと考えております。
wordpress関数の影響ではないような気もしてきたのですが、どなたか似た事象に遭遇したことはありますでしょうか…
コードが崩れて読めませんから、貼り付けたコードを(送信する前に)範囲選択して code ボタンをクリックしましょう。するとバッククォートで囲まれて投稿され、崩れなくなります。または、コード共有サイト (pastebin.com など) へアップロードしてそのリンクをここに投稿しましょう。
ところで style 属性が追加されたタイミングを正確に把握しませんか。
WordPress が出力したときに追加済みなら、他の Web ブラウザーでもソースを見れば追加済みのはずですよね。例えば Internet Explorer なら「右クリック → ソースの表示」、Firefox なら「右クリック → ページのソースを表示」で。
参考 https://faq.cybozu.info/alphascope/cybozu/web/office10/Detail.aspx?id=2143- この返信は6年、 5ヶ月前にgblsmが編集しました。
ページのソース上では存在しない要素が、デベロッパーツール上で存在するのであれば、スクリプト(JavaScript)で追加されたのものではと思われます。
自作テーマということですが、なにか別のテーマをベースにしたり、テーマの雛形やジェネレーターで作成したテーマを使用していませんか?gblsmさん
返信遅くなり、申し訳ありません。
仰るようにstyleが追加されたタイミングを確認してwordpress関数による影響ではなくishitakaさんのコメントにあるようにjavascriptが影響していることがわかりました。ですので、javascriptを編集して無事解決することが出来ました。
ご協力いただき大変助かりました。
- トピック「HTMLに生成されるstyleについて」には新たに返信することはできません。