フォーラムへの返信

15件の返信を表示中 - 1 - 15件目 (全25件中)
  • これで全てその部分が赤くなります。

    #page {
        background: red;
    }

    で特定のページを緑ならこうですね。

    body.page-id-683 #page {
        background: green;
    }
    フォーラム: 使い方全般
    返信が含まれるトピック: wp_reset_postdata() が不要な理由
    スレッド開始 notenotennoote

    (@notenotennoote)

    こんにちは。いつもお世話になっております。
    WP_Queryというのは渡した引数を元にSQL文を生成し、その実行で取得される情報はthe_postでループし、そのとき$postを変更する、という処理だったんですね。まるでわかっておりませんでした。
    ご解説どうもありがとうございました。

    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

    <div class=’add’>をどこに足したら良いかな?

    .addはわざわざ追加しなくても、今ある要素のクラス名を指定すればいいと思います。

    つまり

    .add {
    clear:both;
    }

    じゃなくて

    .今ある要素のクラス名 {
    clear:both;
    }

    でOKです。

    では、今ある要素のクラス名はなんですか?F12を押して見てみて(ㆁωㆁ*)

    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

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

    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

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

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

    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

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

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

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

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

    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

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

    サイトを開いて、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; /* 表示 */
    }
    

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

    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

    ちなみに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が付与されていたのでこの指摘はすでにご理解いただいたものかと思います。)

    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

    まず先ほどの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; /* 横幅が入りきらなかったが次の行へ自動調整 */
    }
    
    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

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

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

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

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

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

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

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

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

    .add {
        clear: both;
    }
    

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

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

    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

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

    フォーラム: 使い方全般
    返信が含まれるトピック: 画像の配置について

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

    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が横並びになります。

    フォーラム: 使い方全般
    返信が含まれるトピック: IDは重複しませんか?
    スレッド開始 notenotennoote

    (@notenotennoote)

    @munyagu
    ありがとうございます!そうします!
    ながながと失礼いたしました。アドバイス感謝申し上げます。

    フォーラム: 使い方全般
    返信が含まれるトピック: IDは重複しませんか?
    スレッド開始 notenotennoote

    (@notenotennoote)

    お二方貴重なアドバイスをありがとうございます。意図についてご返答致します。

    意図はタイムラインの検索です。「フォローユーザーによる投稿か、フォロータームを持つ投稿を、WP_Queryで検索してタイムラインページで表示する」という仕組みを考えています。

    たとえば「”Aさん”をフォローし、”ニュース”をフォローしている」という状況であれば、「Aさんのツイート」と「ニュースについてのツイート」がタイムラインに流れるという仕組みです。

    一応ですが、この仕組みは次の方法で実装できました。

    Aさんが「良いニュースがあるよ」とツイートすれば、そのpost_metaに、
    meta_authorというキーで、AさんのuserIDを持たせる。
    meta_termsというキーで、ニュースのtermIDを持たせる。
    ということをして、➀➁についてWP_Querymeta_queryでORを使うという方法です。

    しかしmeta_queryでのORを多用したくないと感じましたので、ならば
    meta_timelineというキーで、AさんのuserIDとニュースのtermIDをごちゃ混ぜに持たせる。
    ということをすれば、ORが不要になるだろうと考えました。

    以上の経緯から、ごちゃ混ぜだから、termIDuserIDはユニークであってほしい。という意図が生まれたわけです。

    SQLが書けないのでこの策になりましたが、やはりユニークなIDにした場合は「>今後のメンテナンス」への不安を強く感じます。
    もし他の案やアドバイス等ございましたら引き続き頂戴してもよろしいでしょうか。

    WP_Queryを2回流す方法(フォローユーザーによる投稿を取得し、フォロータームを持つ投稿を取得し、array_mergeする方法)は考えていませんが…でも上の不安があれば2回流すべきでしょうか。

    どうぞ宜しくお願い致します。

    フォーラム: 使い方全般
    返信が含まれるトピック: IDは重複しませんか?
    スレッド開始 notenotennoote

    (@notenotennoote)

    ありがとうございます。
    記事と固定ページで連番にならないだけで全部ユニークなのかと思ってしまいました。
    これ全てまとめて連番にするのって、おかしな構造でしょうか?

15件の返信を表示中 - 1 - 15件目 (全25件中)