本文の投稿日時及びコメント数などの表示位置

Simplicityの特徴 フォーラム Simplicityについての質問 本文の投稿日時及びコメント数などの表示位置

  • このトピックには5件の返信、1人の参加者があり、最後にtapuGOにより9年、 7ヶ月前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #50338
      tapuGO
      ゲスト

      こんにちわ。wordpress初心者です、一目これだと思いsimplicityを使わせて頂いておりますが様々な解説ページのおかげで四苦八苦しながらも楽しくやらせてもらっています。ありがとうございます。

      さて、タイトル通りにデフォルトだと本文タイトル下に表示される「投稿日時やコメント数などを表示するバー?」(何と言えば良いんですかね?)なんですが、これを本文タイトル下ではなく、本文終わりに表示させたいのですがそのやり方がどうしてもわかりません。

      本文と次の記事への区切りとして、また本文を読み終わった方がすぐにコメントを読めるような配置にしたいと思っています。位置の変更が可能であるなら是非その方法をご教示願いたいです。

    • #50339
      Hidekichi
      ゲスト

      サンプル: post-metaを本文下に移動 | codepen
      ※ cssはscssを利用しています。css欄にあるview compiledでcssに変換できます。
      ※ jQueryはjavascripy.jsにまんま追記します。
      ※ cssもjQueryも子テーマを利用して下さい。

      本文下だとサンプルのようになりますが、質問を読んでると、

      > 本文と次の記事への区切りとして、
      > また本文を読み終わった方がすぐに
      > コメントを読めるような配置にしたいと思っています。

      とあるので違うような気がします。
      tapuGOさんが思われている「本文終わり」はどこですか?

      挿入先はページ内ならどこでもできますが、ターゲットが不明瞭だと正しく回答はできません。

    • #50341
      tapuGO
      ゲスト

      素早い解答をして頂き助かります。ありがとうございます。

      >tapuGOさんが思われている「本文終わり」はどこですか?
      挿入先はページ内ならどこでもできますが、ターゲットが不明瞭だと正しく回答はできません。

      仰るとおりですね、説明不足ですみません。現在サイトの一覧ページの表示スタイルは「最初だけ本文表示」にしています。その最新記事の本文が終わり、以下サムネイルとともに過去記事が数点並んでいく状態です。その過去記事の前にpost-mate?ですか、それを表示させたいと思っていましたのでサンプルの位置でOKだと思います!ありがとうございます。書かれたコードを参考に写してみようと思います。

      それと、追加で申し訳ありませんがこのpost-mateを現在の位置と下の位置と両方に配置する事は可能でしょうか?上下2つという意味です。

    • #50343
      Hidekichi
      ゲスト

      > 最初を本文表示の時

      これは今回の質問の中で最重要な情報です。これが違うだけでセレクタの範囲も挿入する箇所も変わります。
      最初のサンプルでは、#list以外、つまりはリスト一覧に無い時という処理になります。
      投稿記事、固定記事の場合を想定してあるので上記のような設定になってますが、最初が本文の場合は#listの中に記事が表示されています。
      このことから最初のサンプルは今回の質問では使えません。

      サンプル: 最初を本文表示の時、post-metaを本文下に移動 | codepen
      ※ 前レスをforkしてjs部分の書き換えをしました。
      ※ サンプルのリザルト画面は普通の投稿記事の場合のhtmlなので.post-metaは処理しません(該当のセレクタがないのでできません)。

      > 現在の位置と下の位置と両方に
      > 配置する事は可能でしょうか?

      この場合は、
      var postMeta = $(".article-list header .post-meta").clone();

      このように書き換えて下さい。但し、上記だけだと、
      <p class="post-meta bottom"> の様に、上下それぞれの.post-metaに.bottomというクラスが追加されてしまいます。そのまま使うのであればこれでも良いですが何かしら上下で別のスタイルをつけたい場合、

      $(window).on("load", function() { の中にある、$(".article-list .post-meta").addClass("bottom"); を、
      $(".article-list").find(".post-meta:last").addClass("bottom"); と書き換えて下さい。

      こうすることで上にある.post-metaは、

      .article-list .post-meta {
        background-color: #ccc;
      }

      下にある.post-metaは、

      .article-list .post-meta.bottom {
        background-color: #c00;
      }

      と言う感じでスタイルを分けられます。

      サンプルのcssはページ読み込み時に一旦.post-metaを非表示にしています。移動する際のちらつきを無くすためです。しかし、今回移動させるのは、.article-list内の.post-metaなので、

      .article-list .post-meta {
        display: none;
      }
      .article-list .post-meta.bottom {
        display: block;
      }

      こうあるべきですが、こうすると上にある.post-metaが非表示になってしまいます。そこで、

      .article-list .post-meta {
        display: none;
      }
      .article-list .post-meta:first-of-type,
      .article-list .post-meta.bottom {
        display: block;
      }

      このようにするか、上下に2つ表示する場合はcss自体を設定しないとしても良いかと思います。
      (1つだけ表示の時)上にあるものを下に移動させる場合は、

      .article-list .post-meta {
        display: none;
      }
      .article-list .post-meta.bottom {
        display: block;
      }

      こうしておく方が無難でしょう。予めcssで非表示にしておいてページ読み込み完了後表示するということです。cssで非表示にしないと一瞬チラっと上の.post-metaが見える場合があるかも知れません。2つ上下にある場合は移動させることがない(複製を挿入してクラスで使い分ける)ので最初から表示しててよいという感じになるというわけです。

    • #50364
      tapuGO
      ゲスト


      > 最初を本文表示の時

      >これは今回の質問の中で最重要な情報です。これが違うだけでセレクタの範囲も挿入する箇所も変わります。

      何気なく言ったつもりでしたが最重要情報だったのですね^^;
      三度手間という事にならなかった事だけが救いです、お手数お掛けして済みません…

      今現在コードを切り貼りしながら苦戦中ですが、成功の暁には改めて御礼を書かせて貰いますね!素晴らしいテーマなので使いこなせるよう頑張ります!

    • #50373
      tapuGO
      ゲスト

      無事設定が完了しました!思い描いたとおりの設定が出来て大変満足です。
      ありがとうございます。今後ともこの素敵なテーマと共によろしくお願いします。
      この度は大変お世話になりました。

5件の返信スレッドを表示中
  • トピック「本文の投稿日時及びコメント数などの表示位置」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)