サポート » 使い方全般 » 【レイアウト】特定のカテゴリー記事を横並びにレイアウトするには?

  • 解決済 designfree

    (@designfree)


    こんにちは。
    いつもこちらでお世話になっております。

    ◎実施したいこと
    ・固定ページに特定のカテゴリー(例:テスト1 ID1)の記事を呼び出し
    それを最大6件まで表示したい。
    □□□
    □□□
    ・temp-cont1が自動で6件表示されていくというイメージです。

    ◎つまずいているポイント
    ・横並びにならない*(float)でのレイアウトをしております。

    *何分wordpress初心者でいまいちコード一つ一つが理解出来ていない中
    作業をしているので説明も不十分かと思いますがどなたかご協力いただければ幸いです。

    参考までに下記がhtmlの内容です
    <div class=”temp-cont1″>
    <?php query_posts(‘posts_per_page=6’); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <article id=”post-<?php the_ID(); ?>” <?php post_class( ‘cf’ ); ?> role=”article” itemscope itemtype=”http://schema.org/BlogPosting”&gt;
    <header class=”article-header”>
    <div class=”temp-title-wp”>
    <h1 class=”temp-page-title” itemprop=”headline”>“>
    <?php the_title(); ?>
    </h1>
    <!– /temp-title-wp–></div>
    </header>
    <?php // end article header ?>
    <div class=”line-box-glocal2″>
    <div class=”imgbox1″>

    <p>“><img src=”<?php echo catch_that_image(); ?>” width=”321″ height=” 216″ alt=”<?php the_title(); ?>” /></p>
    <!– /imgbox1–></div>

    <div class=”tex-box2″>
    <div class=”auner-01″>
    <p class=”img-left01″><?php echo get_avatar( get_the_author_id(), $size = ’72’, $default = ‘<path_to_url>’ ); ?></p>
    <p class=”tex-ma01″><?php the_author_posts_link(); ?></p>
    <!– /–></div>

    <div class=”cl-box1″>
    <p><?php the_category(‘, ‘) ?></p>
    <p><?php
    $d_year = get_the_time(‘Y’);
    $d_month = get_the_time(‘n’);
    $d_day = get_the_time(‘j’);
    echo $d_year.”年”.$d_month.”月”.$d_day.”日”;
    ?></p>
    <p><?php the_excerpt(); ?></p><!– /–></div>

    <!– /tex-box2–></div>
    <!– /–></div>
    <footer class=”article-footer cf”></footer>
    </article>
    <?php endwhile; 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 page.php template.’, ‘bonestheme’ ); ?>
    </p>
    </footer>
    </article>
    <?php endif; ?>
    <?php wp_reset_query(); ?>
    </div>

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック投稿者 designfree

    (@designfree)

    追記:このような設定です
    /*********************
    css style
    *********************/
    .temp-cont1-wp {
    width: 750px;
    overflow: hidden;
    margin: 0 auto;
    }
    .temp-cont1 {
    width: 248px;
    overflow: hidden;
    border: 1px solid #DDDDDD;
    background-color: #fff;
    float: left;
    }

    上記コードを見た感じでは<div class="temp-cont1">がラッパーでその下の<article>が横並びになるブロックだと思いますが、CSSでは.temp-cont1-wpという要素がラッパーで.temp-cont1がフロートされています。

    トピック投稿者 designfree

    (@designfree)

    ikaring 様

    大変ありがとうございました。
    根本的なコードの役割や関係性などを理解していなかったため上手く行きませんでした。
    横並びになるブロックがどこなのかも勘違いをしておりました。

    最終的には思い通りにレイアウトできました!
    横並びにならなかった根本的な理由としては
    wordpressのテンプレートタグにfloatしたい要素のサイズ(248px)ではない
    サイズ(710px)が指定されておりオーバーフローしたような状態が
    発生しており、いくらやってもダメだったことが原因でした。
    テンプレートの特性や使用されているタグなどを勉強する良い機会になりました。

    無事解決となりました。
    貴重なご意見誠にありがとうございました!
    また何か機会がありましたらよろしくお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「【レイアウト】特定のカテゴリー記事を横並びにレイアウトするには?」には新たに返信することはできません。