WordPressブログインデックスCSSの石積みのレイアウト

Question

私はビルドしているWordPressのウェブサイトのブログのインデックスページのための石積みのレイアウトを作成するためにCSSの複数の列を使用しようとしており、それにいくつかの問題があります。私は、ボーンズをスターターテーマとして使用しています。

私は石工の効果を作成するために home.phpファイルのループを調整する：

<?php get_header(); ?> 
<div id="content"> 
    <div id="inner-content" class="wrap cf"> 
     <main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog"> 
      <div class="masonry-container"> 
       <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <div class="masonry-item"> 
         <article id="post-<?php the_ID(); ?>" <?php post_class('cf'); ?> role="article"> 
          <a href="<?php the_permalink(); ?>"> 
           <section class="entry-content cf"> 
            <h1 class="h2 entry-title"><?php the_title(); ?></h1> 
            <?php if (has_post_thumbnail()) : ?> 
             <div class="masonry-thumbnail"> 
              <?php the_post_thumbnail('masonry-thumb'); ?> 
              <span class="caption"><span><?php the_title(); ?></span></span></a> 
             <?php endif; ?> 
            </div><!--.masonry-thumbnail--> 
           </div> <!--.masonry-item--> 
           <div class="masonry-post-excerpt"> 
            <?php the_excerpt(); ?> 
           </div><!--.masonry-post-excerpt--> 
           <div class="blog-index-content"><?php the_content(); ?></div></a> 
          </section> 
         </article> 
        <?php endwhile; ?> 
        <?php bones_page_navi(); ?> 
       <?php else : ?> 
        <article id="post-not-found" class="hentry cf"> 
         <header class="article-header"> 
          <h1><?php _e('Oops, Post Not Found!', 'bonestheme'); ?></h1> 
         </header> 
         <section class="entry-content"> 
          <p><?php _e('Uh Oh. Something is missing. Try double checking things.', 'bonestheme'); ?></p> 
         </section> 
         <footer class="article-footer"> 
          <p><?php _e('This is the error message in the index.php template.', 'bonestheme'); ?></p> 
         </footer> 
        </article> 
       <?php endif; ?> 
      </div> <!--.masonry-container--> 
     </main> 
     <?php get_sidebar(); ?> 
    </div> 
</div> 
<?php get_footer(); ?> 

私はポストサムネイル（特集画像）と全体.masonry-itemのdivを埋めるために、画像を取得しようとしているが、右現在、.masonry-item divは投稿サムネイルよりも大きいです。

画像の下に表示される空の<a>タグもあり、どこから来ているのかわかりません。

私はまた、一度サムネイル画像に表示される投稿のタイトルを取得しようとしていますが、それを動作させる方法を理解していません。

は、ここに私のテストサイトへのリンクです：http://tippingpointphoto.flywheelsites.com/blog/

すべてのヘルプははるかに高く評価されるだろう！

Answer 1

.masonry-thumbnail divには、<a>というリンクがあります。これは空のタグです。それにクラス名を付けて、それを割り当てるこれらのスタイルプロパティ：

.link { // for example if you called it link 
display:block; // this will wrap it around the image 
position:relative; // to position the caption 
} 

は、今すぐあなたの.captionクラスを更新し、追加します。

position:absolute; 
top:auto; 
bottom:0; // to text will start from the bottom of the image 
z-index:1; // to position the text above the image 

を、私はあなたのサイトを見たときに画像の幅は、divの幅に一致するように登場しましただからあなたはその問題を解決することができたと思いますか？変更しない場合は、CSSの幅が100％に設定されます。