「お知らせ」で表示される文の行数を5行くらいに限定し
段落ブロックを使って手動で更新するので、表示数は自由に変更できるはずです。新着情報ページから全ての段落をコピー&ペーストするのではなく、必要な行数だけコピー&ペーストすればよいと思います。
古いものは格納されていて「お知らせ一覧」ボタンで表示させる
ボタンブロックを使って、リンクに新着情報ページを指定すればよいと思います。
新着情報のページは現状のように段落だけが含まれる、という前提で、先頭の5件だけをトップページに自動表示する手順を説明します。
- トップページの編集画面を開いて、新着情報を表示したい位置に 固定ページ本文 ブロックを置き、表示したいページとして現在の新着情報のページを指定する。
- 固定ページ本文 ブロックの 追加 CSS クラス に top-news と入力する。
- 以下の CSS を書く。
.top-news p:nth-child(n+6) {
display: none;
}
段落以外のブロック(例えば画像)が含まれる場合、期待した結果にはなりません。
Tsushima様 ありがとうございます。
「段落以外のブロック(例えば画像)が含まれる場合」というのは、現状のトップページの一番下にあるリンク用アイコンの入っているブロックも含まれるのでしょうか。だとするとこれを削除してどこか別の所に移す必要がありますね。
「段落以外のブロック(例えば画像)が含まれる場合」というのは、新着情報ページについてのことです。
現在のトップページがどういう状態なのかは関係ありません。
現在の新着情報ページは段落だけが使われているので、「段落以外のブロック(例えば画像)が含まれる場合」に該当しません。
とりあえず私が提示した手順通りに試してみてください。たぶん、期待通りの結果になると思います。
了解しました。
「固定ページ本文 ブロックを置き」というのは、トップページにカラムで適切なサイズのブロックを置くという事でしょうか。
「表示したいページとして現在の新着情報のページを指定する」の指定とは、どの様にするのでしょうか。基本が分かってなくてすみません。
「本文 ブロックの 追加 CSS クラス に top-news と入力する」とは、ページの下にあるVK All in one Expansion Unit のカスタムCSSのことでしょうか。 CSSといえばこれしかやったことがありません。
手順 1. の 固定ページ本文 ブロックについては、
https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-blocks/vk-blocks-blocks/page-content/
をご覧ください。
手順 2. の 追加 CSS クラス については、
https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/
の「3.1.1. HTMLのタグにCSSのクラス名を追加する」のあたりをご覧ください。
今回のような、ちょっとカスタマイズしたり、デザインをいじったり…をこれから自分でやりたいというご希望があるなら、このページを熟読することをおすすめします。難解な箇所も部分もありますが、理解できる部分から身に付けていくといいです。
手順 3. の CSS を書く場所は、
トップページの編集画面の下にある VK All in one Expansion Unit の カスタム CSS です。
Tsushima様
詳しい説明をありがとうございます。
その通りにやってみました。 top-news と .top-news p:nth-child(n+6) { display: none;} は、各々追加CSSクラスとカスタムCSSにコピペしました。すると、新着情報ページ全体(12件)が、現在仮で編集しているトップページに表示されます。コードの中で「5件」を指定しているのは(n+6)なのかと思いますが、これが機能していないのは何故なのでしょう。
手順 1. はうまくいっていて、手順 2. 3. が違っているようですね。
これが機能していないのは何故なのでしょう。
仮で編集しているトップページを見れば原因がわかるかもしれません。
そのページの URL を提示していただくことはできますか?
提示していただいた URL にアクセスすると、「投稿はありません。」と表示されます。
そのページを公開した上で、公開した URL を提示してください。
手順 1. 2. はうまくいってます。
手順 3. が間違っているようですが、提示していただいたページには CSS が出力されていませんので、どこが間違っているかまではわかりません。
手順 3. の CSS を、[カスタマイズ] → [追加 CSS] の方に追加してみればうまくいくかもしれません。
それでもまだうまくいかないようであれば、手順 3. の CSS を追加した画面のスクリーンショットを提示してください。
仮のトップページをもう一度チェックしたところ、カスタムCSSが書いて無く、これは書いた後に保存してなかったせいかと思います。カスタムCSSにコードを書きこみ保存したところ、正常に5件表示になりました。こちらのミスでした。
ところで、トップページでは背景を黒にして、フォントは明るいベージュにしているのですが、これはトップページ側で設定できるのでしょうか。もし設定できないとなると、新着情報側をトップページの設定にするしかないのでしょうか?
新着情報側をトップページの設定にするしかないのでしょうか?
そこまでする必要はありません。クラス top-news についてスタイル(文字色)を設定するだけでいいです。
昨日私が書いた https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/ を読んで、まず自分でトライしてみてください。その上で、具体的にわからないところがあれば新しいトピックで質問してください。