twentyfourteenをカスタマイズして使っている当サイトですが、
サムネール一覧表示の本文が下に回り込んだときの左マージン設定がうまくいかず悩んでおりました。
このたび解決したので備忘録として残しておきます。
↓更新履歴一覧はこのような構造になってます。index_dispの中に左カラムl_cと右カラムr_cを置いている。至って普通。
<div class="index_disp"> <div class="l_c"> <?php if (has_post_thumbnail()):?> <!--サムネイルを持っているときの処理--> <?php the_post_thumbnail('thumbnail'); ?> <?php else: // サムネイルを持っていないときの処理 ?><img src="<?php echo get_template_directory_uri(); ?>child01/images/noimage.png" alt="noimage" /> <?php endif; ?> </div> <div class="r_c"> <p class="time"> <span class="genericon genericon-time"></span>更新日:<?php the_modified_time('Y年n月j日'); ?> 公開日:<?php the_time('Y年n月j日'); ?> <br /><?php echo esc_html(get_post_type_object(get_post_type())->label ); ?> </p> <p class="title"> <?php the_title() ?> </p> <p class="sumally"><?php the_excerpt(); ?></p> </div> <div class="br"> </div> </div>
出力したコードを表示すると、↓こうなる
<a class="index_disp_link" href="https://soltic.sakura.ne.jp/wp/modeling_gallery/72blockhead02/"> <div class="index_disp"> <div class="l_c"> <!--サムネイルを持っているときの処理--> <img width="150" height="150" src="https://soltic.sakura.ne.jp/wp/wp-content/uploads/2015/09/72blockhead2_10-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="72blockhead2_10" /> </div> <div class="r_c"> <p class="time"> <span class="genericon genericon-time"></span>更新日:2015年9月9日 公開日:2015年9月9日 <br />モデリングギャラリー </p> <p class="title"> 1/72ブロックヘッドT-10B(マックスファクトリー) </p> <p class="sumally"><p>制作:2015年 マックスファクトリーのブロックヘッドを作ったよ。 普通に作って普通に塗ったよ。 適当にしこんだLEDで、サーチライトと操縦席が儚げにひかるぞ(笑) 制作中 普通に作ったのでLEDをどうやって仕込んだかの… <a href="https://soltic.sakura.ne.jp/wp/modeling_gallery/72blockhead02/" style="clear:both;font-size:0.9rem;display:block;float:right;">[続きを読む]</a></p> </p> </div> <div class="br"> </div> </div> </a>
てことは、普通に本文テキスト部分を囲むpタグのclassであるsumallyにスタイルを記述するでしょ。でも効かないのです。
いろいろためしてみて、結局は横着するのをやめて、chromeのデベロッパーツールからきちんとElementsを見てみることにした。
すると、sumallyの中はヌルになっている。本文テキストはここにはない。
なぜかその直後にpタグがあり、その中にa:index_disp_linkクラスがあって、そこにテキストが格納されていた。
こっちにスタイルを記述しないと効いてくれなかったのだよおおおおお
そんなんわかるかよ (´Д`;)
でもこれでやっと左のマージンが統一されてすっきりしたよー
(2015.9.10追記)
その後「続きを読む」を表示するのをやめたら、文書構造が変わってしまった (´Д`;)
またまたスタイルシートを当てる箇所を変更して対応しました
もういやん。