サポート » テーマ » アイキャッチ画像の横に記事概要を設定したのに・・

  • 解決済 kururu

    (@kururu)


    WordPress初心者です。

    現在、ソシムさんが出されている
    WordPressレッスンブックHTML5&CSS3準拠を使って
    ローカルサーバー環境にてブログを作成しています。

    アイキャッチの画像を設定し、その横に記事の概要を表示することも出来ました。
    しかしながらURLの画像のように
    「続きを読む」のすぐ下に次の記事のタイトルが来てしまっています。。
    https://www.dropbox.com/s/iaqktyg3s3g6ajw/%E7%84%A1%E9%A1%8C.png?dl=0

    とりあえずアイキャッチ画像設定の際に弄った
    index.phpとstyle.cssを載せておきます。

    どなたか、お助け下さい。。

    index.php

    <?php else: ?>
    
        <div class="excerpt">
        <?php if( has_post_thumbnail() ): ?>
        <p><?php the_post_thumbnail( 'medium' ); ?></p>
        <?php endif; ?>
    
        <?php the_excerpt(); ?>
        <p class="more"><a href="<?php the_permalink(); ?>">
        続きを読む<i class="fa fa-chevron-right"></i></a></p>
        </div>
    
    <?php endif; ?>

    style.css

    /* 記事の概要 */
    .excerpt p   {font-size: 14px}
    .excerpt .more a {padding: 5px 20px;
                      border: solid 1px #cccccc;
                      border-radius: 5px;
                      color: #000000;
                      text-decoration: none}
    .excerpt .more a:hover
                     {background-color: #e6cc1c}
    .excerpt .more i {margin-left: 10px;
                      color: #cccccc}
    
    @media (min-width: 500px) {
    .excerpt img	{float: left;
    	margin-right: 20px;
    	width: 40%}
    }
    
    @media (max-width: 499px) {
    .excerpt img	{display: block;
    	margin-left: auto;
    	margin-right: auto}
    }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • 천궁 메텔

    (@digitmaetel)

    回りこみを解除しましょう

    kururu

    (@kururu)

    おおお!
    回り込みの解除を試してみたら
    無事に修正されて綺麗になりました!

    本当に感謝です。(´;ω;`)

    また、なにか有りましたら
    宜しくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「アイキャッチ画像の横に記事概要を設定したのに・・」には新たに返信することはできません。