HOME フォーラム BizVektor スマホ閲覧時に、アイキャッチ画像の下部に文字の回りこみを設定したい

このトピックには2件の返信が含まれ、2人の参加者がいます。7 ヶ月、 3 週間前 ebi0720 さんが最後の更新を行いました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #8018

    ebi0720
    参加者

    質問させていただきます。
    ホームページ作成、bizbectorは使用して約2ヶ月の初心者です。

    BizVektorのバージョン:バージョン: 1.9.13
    使用中拡張デザインスキン(プラグイン)のバージョン:これは子テーマでしょうか?子テーマのバージョン: 0.1.0を使用しています。
    WordPress のバージョン:WordPress 4.7.5
    使用しているプラグインとテーマの情報(Contact Form 7、Category Order and Taxonomy Terms Order、Google XML Sitemaps、TinyMCE Advanced、VA Simple Basic Auth、WordPress インポートツール、WP Super Cacheを使用しています。)
    PHP、MySQL のバージョン:phpMyAdmin – 2.11.11.3、MySQL クライアントのバージョン: 5.0.95
    サーバー環境(エックスサーバーの無料アカウントを使用。OSはWindows7)
    ブラウザとそのバージョン:Google Chrome バージョン 57.0.2987.133

    現在、記事を投稿した際にアイキャッチ画像も一緒に投稿しており、タイトルと記事内容も一部表示する設定にしています。

    パソコンでの閲覧では文字の回りこみがなくても見づらさはないのですが、スマホでの閲覧時にも文字の回りこみは無く、アイキャッチの下部はずっと空白で、余計なスクロールが発生するので回りこみを設定したいと思いました。

    いろんなサイトを参考にして、googleの検証機能を使って試してみるも、記事の幅を広げるとアイキャッチは下部に飛ばされてしまい、回りこみが実現できなくて困っています。

    どうか有識者の方々、ご助言いただけると幸いです。
    よろしくお願いします。

    参考画像
    問題の画像です

    #8031
    じょに次郎
    じょに次郎
    モデレーター

    ん〜、ちょっとBizVektorの構造上回り込みは難しいですね〜。

    そのかわりこれで如何でしょう?
    ※ max-width: 670px の部分は任意で調整してください。

    @media (max-width: 670px){
    .content .ttBoxTxt,
    .content .ttBoxThumb {
    width:100% !important;
    }
    .content .infoList .infoListBox div.thumbImage div.thumbImageInner img {
    width:100%;
    }
    .content .infoList .infoListBox.ttBox {
    display:flex;
    -webkit-flex-direction: column-reverse; /* Safari */
    flex-direction: column-reverse;
    }
    .content .ttBoxThumb {
    margin-bottom:1em;
    }
    }

    #8042

    ebi0720
    参加者

    じょに次郎さん、ありがとうございます!
    画像幅100%にすることで回り込みの必要性を無くすとは私の発想外でした!
    こちらの方が、文字が片側に寄るより自然に見えそうなので、この方法でいきたいと思います。

    ただ、できるなら画像がアイキャッチと同サイズでタイトルの上に来る程度が理想ではありました。
    670pxと100%の部分を調整してみましたが、どうもレイアウトが崩れてしまいました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

このトピックに返信するにはログインが必要です。