サポート » 使い方全般 » 画像の配置について

  • 解決済 Chanchan.

    (@eureka20080321)


    大変お世話になっております。

    テーマはbeauti_plusで子テーマを作成してカスタマイズしています。

    たびたび本当に初歩的な質問をすみません。。。

    PCなどの大きな画面で、画像を横並びにしようと昼間から奮闘しています。
    調べた限りの色々なコードを試してみましたが、画像がビクともしません。

    例えば

    img.wp-image-1011{
    float: right;
    }

    などです。

    最終的に以前教わったサムネイルでやってみましたが、横に並びますが、距離が離れてしまします。

    priceテストというページの上下に並んだsquareとApple Payの画像です。

    どなたか解決方法を教えてください。
    よろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • CG

    (@du-bist-der-lenz)

    画像ブロックを、カラムにするといいのではないですか

    どうしたいのかを手書きでもいいので示していただけると助かるのですが、こうですか?

    figure.wp-block-image.size-large {
        float: left;
    }

    横並びにしたい要素にfloat:right;ではなく、その前の要素にfloat:left;ということです。

    あとfloat:xxx;よりもdisplay:flex;が使いやすいと思いますよ。
    たとえば

    <div>
    <img><img>
    </div>
    

    というHTMLがあったとき

    div {
        display: flex;
        align-items:center;
    }

    とするとimgが横並びになります。

    トピック投稿者 Chanchan.

    (@eureka20080321)

    CGさま。

    お忙しい中、ご回答いただきありがとうございます。

    試したサムネイルというのが、CGさまのおっしゃるカラムというものでした。
    言葉が足りずに、すみませんでした。

    トピック投稿者 Chanchan.

    (@eureka20080321)

    notenotennooteさま、初めまして。

    お忙しい中、ご回答いただきありがとうございます。

    言葉が足りずに申し訳ありませんでした。
    leftなんですね。

    教えていただきましたコードでバッチリでした。
    あとは、paddingで調整すればいいでしょうか?

    display: flex;のコードは、この後ゆっくりと試させて頂きます!

    ちなみにfigure.wp-block-image.size-largeというのが、Apple Payの画像を示しているのでしょうか?
    これだとimg.wp-image-1011ちょっと違う感じでしょうか?

    数ある画像の中で、この画像!という時はどの部分を見ると良いでしょうか?

    引き続き、お付き合いいただけないでしょうか?
    よろしくお願いします。

    あれ?投稿したのに「この投稿は自動化システムにより承認待ちとなっています。モデレーターが手動でレビューします。」と表示されてしまいました。ちょっと長文だったからかな。分割してもう一度投稿してみます。ご質問の件少しおまちください。

    ヘアデザインの分野から都市計画に参加し、暮らしを演出していきたい

    に敬意をこめて、ばっちりお手伝いさせて頂きたいと思っています。どぞ、ご遠慮なく。

    あとは、paddingで調整すればいいでしょうか?

    微調整はpaddingでもmarginでも大丈夫です。今見たらpaddingで出来ていますからそこはいいと思いますよ。

    ただし、もしその画像の下に他の要素を置く場合は注意です。

    たとえばこうして「他の要素」を追加すると、位置がずれますよね。

    
    <figure><!-- Square等の画像 --></figure>
    <figure><!-- ApplePayの画像 --></figure>
    <div class='add'>他の要素</div>
    

    なのでfloatを指定した場合、位置を戻すためにこうします。

    .add {
        clear: both;
    }
    

    上のようにclear: both;と指定すると、floatのズレがリセットできます。

    で、こういうのがfloatはウザくて初心者には大変なので、以下flexboxの使い方です。

    まず先ほどのfloatをなくします。

    
    figure.wp-block-image.size-large {
        /*float: left;*/
    }
    

    でHTMLをこうです。

    
    <section class="site-main fullwidth">
        <h1 class="entry-title">priceテスト</h1>
        <div class="entry-content">
            <!-- 料金リスト -->
        </div>
        <div class="entry-payment">
            <figure><!-- Square等の画像 --></figure>
            <figure><!-- ApplePayの画像 --></figure>
        </div>
    </section>
    

    CSSはこう。

    
    .entry-payment {
        display: flex;
        align-items: center;
    }
    

    つまり、横並びにしたい部分を.entry-paymentなどの要素で囲み、そこにflexを指定するわけです。

    floatの場合だとスマホなどへの対応も困難ですが、flexなら次のようにすれば横幅がいくら変化しても自動調整してくれますから便利ですよ。

    
    .entry-payment {
        display: flex;
        align-items: center;
        flex-wrap: wrap; /* 横幅が入りきらなかったが次の行へ自動調整 */
    }
    

    ちなみにfigure.wp-block-image.size-largeというのが、Apple Payの画像を示しているのでしょうか?

    いいえ、先ほど「>横並びにしたい要素にfloat:right;ではなく、その前の要素にfloat:left;ということです。」と書いたのがこの点です。

    つまりApplepayの画像の前の要素にfloat:left;を指定しなければならないので、figure.wp-block-image.size-largeはApplePayの画像の、その前の要素であるSquare等の画像を指します。

    (今見たらApplePayの画像にもfigure.wp-block-image.size-largeが付与されていたのでこの指摘はすでにご理解いただいたものかと思います。)

    数ある画像の中で、この画像!という時

    サイトを開いて、F12をクリックしてください。開発ツールが開きます。あとは目的の要素にカーソルを合わせてクリックすると、開発ツールにその要素のクラス名が表示されます。これでまず「この画像!」のクラス名がわかります。

    もし「この画像!」を唯一のものとして指定したければ、次のようにクラス名に唯一の名前を追加すればOKです。

    <div class="figure wp-block-image size-large">
    ↓
    <div class="figure wp-block-image size-large yuiitunogazodayo">

    あとはCSSでこう指定すると、.yuiitunogazodayoを指定した方だけが表示できるはずです。

    
    figure.wp-block-image.size-large{
        display: none; /* 非表示 */
    }
    figure.wp-block-image.size-large.yuiitunogazodayo{
        display: block; /* 表示 */
    }
    

    以上でおしまいです。長くってすみません。。

    トピック投稿者 Chanchan.

    (@eureka20080321)

    notenotennooteさま。

    丁寧に教えていただき、ありがとうございます。

    大変貴重な情報が詰まっていますので、ゆっくりと噛み砕いていきたいと思います。
    とても勉強になります!

    迷惑ついでにもう少しいいでしょうか?

    教えていただいたHTMLの部分のコードは、priceテストのページのコードエディターを代えるのでしょうか?
    それともテーマエディターのどこかのphpを代えるのでしょうか?

    さらに既に更新をかけてあるのですが、キャッシュレス事業の文言と画像は、並べたsquareとApple Payの画像の下 (squareの画像の真下部分) に配置したいのですが、それはどの様にしたら良いでしょうか?

    しつこくて申し訳ございません。
    よろしくお願いします。

    教えていただいたHTMLの部分のコードは、priceテストのページのコードエディターを代えるのでしょうか?
    それともテーマエディターのどこかのphpを代えるのでしょうか?

    コードエディターとかテーマエディターというのを存じ上げないのですが、そのページが固定ページで作られているなら、該当のHTMLがあるのは一般的にはpage.phpだと思います。また記事ページならsingle.phpかと。

    ただしあくまで一般的には、のお話です。ご利用のテーマによるのでちょっとわかりかねます。

    テーマのファイルに対して、「wp-block-image」で検索をかけてみると該当のHTMLが見つかると思いますよ。

    キャッシュレス事業の文言と画像は、並べたsquareとApple Payの画像の下 (squareの画像の真下部分) に配置したいのですが、それはどの様にしたら良いでしょうか?

    flex版でなくてfloat版のお話ですよね?あれ?すでに書いたと思いますが、何をした結果できませんでしたか?

    トピック投稿者 Chanchan.

    (@eureka20080321)

    notenotennooteさま。

    遅くまでお付き合いいただき、ありがとうございました。

    教えていただいた一つずつを、じっくりやっていこうと思います。

    美容師なのですが、自分でHPを一から作っているズブの素人です。笑笑

    本当にありがとうございました、また懲りずにお願いします。

    私も独学ですから、お気持ちよくわかります。回答者は丁寧に説明してるつもりですが、素人からしたらわからないことばかりで読むのめんどいんですよねwなんとか頑張ってみてください。
    も一度いいますが、floatをリセットしたい場合はclear:both;です。
    ではおやすみです。

    トピック投稿者 Chanchan.

    (@eureka20080321)

    notenotennooteさま。

    行き違いとなってしまいました。

    おそらくclear: both;のことだと理解しているのですが、
    <div class='add'>をどこに足したら良いかな?と、試行錯誤していました。

    書いては消してを繰り返しながら、やってきているので時間がかかっちゃています。。。

    本当に丁寧にありがとうございます。

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • トピック「画像の配置について」には新たに返信することはできません。