投稿ページの編集方法

0
いいねをした人: 居ません
  • このトピックには6件の返信、3人の参加者があり、最後にmiyukiにより2年、 1ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #111672
    miyuki
    閲覧者
    16

    【お使いの Snow Monkey のバージョン】
    【お使いの Snow Monkey Blocks のバージョン】
    【お使いの Snow Monkey Editor のバージョン】
    【お使いのブラウザ】
    【当該サイトのURL】

    ### 実現したいこと

    投稿画面の部分です。

    画像→タイトル→テキスト→日付の順を、画像→日付→タイトル→テキストの順にしたい(画像は編集前のものです。

    ### 発生している問題

    投稿ページでこのような設定になっているが、上記のように順を入れ替えたい。

    ### 試したこと

    投稿画面のため、どのように編集していいか分からず手が止まっています。アドバイスいただけたらと思います。

    0
    いいねをした人: 居ません
    #111678
    GONSY
    参加者
    841

    @みーな さん

    【お使いの Snow Monkey のバージョン】
    【お使いの Snow Monkey Blocks のバージョン】
    【お使いの Snow Monkey Editor のバージョン】
    【お使いのブラウザ】
    【当該サイトのURL】

    フォーラム参加者も参考にしますので、バージョンなどは必ず記載していただいたほうが良いと思います。

    ### 実現したいこと

    投稿画面の部分です。

    画像→タイトル→テキスト→日付の順を、画像→日付→タイトル→テキストの順にしたい(画像は編集前のものです。)

    画像がアップされておりませんが、これは【最近の投稿】ブロックを用いたリッチメディア(レイアウト)のことを指していますか?
    もしくは投稿一覧やアーカイブページで表示されるリッチメディアのことでしょうか?
    もう少し具体的に示されたほうが解決策が出しやすいと思います。

    1
    いいねをした人:
    #111691
    アバター画像キタジマ タカシ
    参加者
    2421

    Snow Monkey をコードでカスタマイズする場合、基本的には次の3つのいずれかの方法で対応することになります。

    1. CSS でカスタマイズする
    2. snow_monkey_template_part_render フックで HTML を書き換える
    3. My Snow Monkey や子テーマを使ってカスタマイズしたい部分のテンプレートパーツを上書きする

    おそらく CSS でカスタマイズできる範囲なのかな?と思いますが、GONSY さんが書かれているように具体的な内容がわかるほうが具体的な回答がつきやすいと思うので、詳細を記述いただければと思います!

    0
    いいねをした人: 居ません
    #111703
    miyuki
    閲覧者
    16

    大変失礼致しました。

    改めて、初めから質問させ直させていただきます。

     

    【お使いの Snow Monkey のバージョン】17.2.7
    【お使いの Snow Monkey Blocks のバージョン】16.1.0
    【お使いの Snow Monkey Editor のバージョン】8.0.2
    【お使いのブラウザ】Chrome
    【当該サイトのURL】

    ### 実現したいこと

    投稿画面(アーカイブページ)の部分です。

    画像→タイトル→テキスト→日付の順を、画像→日付→タイトル→テキストの順にしたい(画像は編集前のものです。 )

    ### 発生している問題

    投稿ページでは、元々このような設定になっているが、上記のように順を入れ替えたい。

    ### 試したこと

    投稿画面のため、どのように編集していいか分からず手が止まっています。アドバイスいただけたらと思います。

    お手数ですが、よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #111712
    GONSY
    参加者
    841

    画像があるとわかりやすいですね。
    CSSでやるなら position を使って投稿日の要素を動かすのが簡単だと思います。
    これにより要素が重なったり、不要な要素はCSSで調整してみてください。

    .c-entry-summary__body {
    	position: relative;
    }
    
    .c-meta__item--published {
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    1
    いいねをした人:
    #111717
    アバター画像キタジマ タカシ
    参加者
    2421

    一応僕は flex を使った方法を。.c-entry-summary__bodyflex にすることで、その中の .c-entry-summary__meta(日付が入っている) の順序を入れ替えられるようにしています。

    .c-entries--rich-media .c-entry-summary__body {
      display: flex;
      flex-direction: column;
    }
    
    .c-entries--rich-media .c-entry-summary__body .c-entry-summary__meta {
      order: -1;
    }
    1
    いいねをした人:
    #111720
    miyuki
    閲覧者
    16

    ご丁寧な回答をありがとうございます!

    両方ともやってみまして、無事できました。

    プロパティの勉強になりました。これに紐づけて応用が効くように引き続き学習していきます。

    ありがとうございました!

    2
    いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「投稿ページの編集方法」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。