http://yasato.sakura.ne.jp/wp1/category/未分類/
このURLのWPを改良したいです。
マテリアルという無料テーマを使っているのですが、記事一覧の部分だけ
http://affinger.com/monseter-b/category/baby/
このブログのような形にしたいです。
divタグやdl dd dtタグなどを使って、Floatでサムネイル部分を左に寄せればいけるのかなと思ったのですが
divやddでくくった部分が、1行だけ右に置かれてそれ以降はそれらの下に配置されてしまいます。
てっきりくくった部分はtableのように1つの箱のような形で並ぶと思っていたので、予想外でした
いまいちピンとくるキーワードがわからず、ググってもあまり良い情報が得られませんでした
Stringerというこの方式を採用しているテーマのphpとstyle.cssを見ているのですが、いまいち理解出来ていません。
PHP
1 <dl class="clearfix"> 2 <dt><a href="<?php the_permalink(); ?>"> 3 <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> 4 <?php the_post_thumbnail( 'thumbnail' ); ?> 5 <?php else: // サムネイルを持っていないときの処理 ?> 6 <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> 7 <?php endif; ?> 8 </a></dt> 9 <dd> 10 <h3><a href="<?php the_permalink(); ?>"> 11 <?php the_title(); ?> 12 </a></h3> 13 14 <div class="blog_info <?php st_hidden_class(); ?>"> 15 <p><i class="fa fa-clock-o"></i> 16 <?php the_time( 'Y/m/d' ); ?> 17 <span class="pcone"> 18 <i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/> 19 <?php the_tags( '<i class="fa fa-tags"></i> ', ', ' ); ?> 20 </span></p> 21 </div> 22 <div class="smanone2"> 23 <?php the_excerpt(); //抜粋文 ?> 24 </div> 25 </dd> 26 </dl>
このテーマはphp部分はこんな感じです。
<dd></dd>で囲って、<dt>にFloat:leftをかけているのだと思いました。ここにかかっている(と思われる)CSSは
CSS
1/* タイトル名 */ 2#topnews dd h3 { 3 font-size: 20px; 4 line-height: 30px; 5 margin-bottom: 5px; 6} 7 8#topnews dt { 9 float: left; 10 width: 100px; 11} 12 13#topnews dt img { 14 width: 100%; 15} 16 17#topnews dd { 18 padding-left: 110px; 19} 20 21#topnews dl { 22 margin-bottom: 20px; 23 padding-bottom: 20px; 24 border-bottom-width: 1px; 25 border-bottom-style: dotted; 26 border-bottom-color: #999; 27} 28 29#topnews dl:first-child { 30 padding-top: 20px; 31} 32 33#topnews dl:last-child { 34 margin-bottom: 20px; 35 padding-bottom: 20px; 36 border-style: none; 37} 38 39#topnews .clearfix dd h5 { 40 font-size: 16px; 41 font-weight: bold; 42 padding: 0px; 43 margin-bottom: 5px; 44}
こんな感じです。#topnewsというID指定が、どこに使わているのかイマイチよくわからなかったのですが、見た感じサムネイルのdtにFloatをかけていたので、これかなと思いました。
もともとマテリアルの記事一覧部分のphpが
PHP
1<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 2 <?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo ""; } ?> 3 <div class="thumb-box sub-color-background"> 4 <?php if(has_post_thumbnail()){ ?> <!-- サムネあるかどうか --> 5 <a href="<?php the_permalink() ?>"> 6 7 <?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?> 8 </a> 9 <?php }else{ ?> 10 <a href="<?php the_permalink() ?>" class="no-deco"> 11 <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> 12 </a> 13 <?php } ?> 14 </div><!-- .thumb-box --> 15 <div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>"> 16 17 <div class="post-info"> 18 <p class="up-date"><span class="lsf">time </span><?php the_time('Y/m/d') ?></p> 19 <h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> 20 <?php get_template_part("sns_count") ?> 21 <p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p> 22 </div><!-- .post-info --> 23 </div><!-- .post -->
こんな感じなので、ここの<div class="thumb-box sub-color-background">にFloat:leftしてもうまく行きませんでした。
その結果が一番上のURLです。どうすれば2番めのURLのような形で改行(?)せずに表示できるのか知りたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/25 14:58