サポート » 使い方全般 » 【twenty twelve】アイキャッチ画像の右側に文章を回り込ませる方法

  • 解決済 shimpeisato

    (@shimpeisato)


    WordPress初心者です。
    テーマはtwenty twelveを使用しています。

    アーカイブのアイキャッチ画像の右側に文章を回り込ませるにはどうしたらいいのでしょうか。

    まずcontent.phpにおけるアイキャッチ画像コードの位置を変えて、style.cssにレイアウト設定のコード(以下)を追加したのですがうまくいきません。

    .entry-summary .attachment-thumbnail {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    content.phpにおけるアイキャッチ画像の移動まではうまくいくので、おそらくstyle.cssにおけるレイアウト設定コードがうまく反映されていないのだと思うのですが、その先どうしたらよいのか分かりません。

    どなたか教えてください。よろしくお願いします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • アイキャッチを「タイトル」と「本文」の間に移動したと仮定して。

    .attachment-post-thumbnail {
     float: left;
     margin-right: 15px;
     margin-bottom: 10px;
     }

    これでどうでしょうか?

    トピック投稿者 shimpeisato

    (@shimpeisato)

    taku-kさん

    早急な返答ありがとうございます。
    このコードをstyleシートに追加してみましたができませんでした。

    ちなみにcontent.phpの該当部分は以下のようになっていて、、、

    <?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>
        <div class="entry-summary">
        <?php the_post_thumbnail('thumbnail'); ?>
        <?php the_excerpt(); ?>
        </div><!-- .entry-summary -->

    タイトル、アイキャッチ画像、抜粋記事の順番に縦に並んでいる状態です。

    やはりstyleシートのレイアウト設定のコードがおかしいのでしょうか。

    トピック投稿者 shimpeisato

    (@shimpeisato)

    追加で質問なんですが、styleシートに上記のレイアウト設定のコードを追加する際は、styleシートのどこの部分に追加してもいいのでしょうか。
    合わせて返答いただけると幸いです。

    よろしくお願いします。

    その場合は

    .entry-summary .attachment-thumbnail {
     float: left;
     margin-right: 15px;
     margin-bottom: 10px;
     }

    だとどうですか?
    場所は下の方だと media screen で「PCのみ適用(幅がいくつ以上の場合に適用)」となるので、どんな時でも適用させるのであれば

    Repeatable patterns

    の辺りでよいのではないかと思います。

    トピック投稿者 shimpeisato

    (@shimpeisato)

    上記の通り試してみましたが、タイトル、アイキャッチ画像、抜粋記事の順番に縦に並んでいるまま変化ありません。
    何が問題として考えらるか、教えていただけないでしょうか。
    よろしくお願いします。

    あれ? こちらで検証した時は回り込んでたんですが。

    ブラウザのキャッシュはクリアしてますよね?

    トピック投稿者 shimpeisato

    (@shimpeisato)

    キャッシュもクリアしましたがダメでした。
    まだカスタマイズし始めたばかりなので、一旦テーマをリセットしてやり直してみます。

    トピック投稿者 shimpeisato

    (@shimpeisato)

    テーマをリセット&プラグインも全て停止した状態でやってみたら普通にできました。
    問題の原因は明らかになっていませんが、何はともあれ解決できました。
    丁寧に教えてくださりありがとうございました。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「【twenty twelve】アイキャッチ画像の右側に文章を回り込ませる方法」には新たに返信することはできません。