掲載画像の様に記事一覧の”本文「ああああああ”の部分にリンク先の記事本文を一部表示させたいです。
別ページの記事の本文を自動で表示するにはどういったコードを用いればいいのでしょうか？

以下の参考サイトの様な作りにしたいです。
https://goziline.com/

独学でwebを始めLP以外の制作経験が無いため質問自体が漠然としてしまい強縮ですがアドバイスを頂けると嬉しいです。
よろしくお願いします。

2020/08/27 05:17 編集

> topの見出しちょっと、意味がわかりません。画像だと記事一覧のことを指していると思われるのに、topと言われると、どこ？ってなります。画像中の記事一覧の、"タイトル"となっている箇所ですか？それとも、"ああああああああ..."となっている箇所ですか？

m.ts10806

2020/08/27 05:17

記事はどこにどのように管理される予定でしょうか。方法は１つではないですが、調べたり試したりしたことはありますか？あるのでしたら追記してください。ないのでしたらまず調べてみてください。

miyabi_pudding

2020/08/27 05:24 編集

ちなみに、ariticleで囲っている部分全体のことを、見出しとは言いません。記事本体などと言います。また、"ああああああ..."となっている箇所も見出しとは言いません。見出しと言うと、"タイトル"となっている箇所を指します。なので、本質問が何を指した質問なのかを記載した質問に修正してください。

hatena19

2020/08/27 05:28

「見出し」ということなら、hタグでいいのでは。h1 ~ h6 質問したいことはこういうことですか？

root_jp

2020/08/27 05:44

とにもかくにも、ソースは載せた方がいいですね。

kawakamikami1

2020/08/27 06:18

たくさんのご意見ありがとうございます。まず掲載画像が実際のページではなくあくまでデザインカンプだという事を伝え忘れていました。申し訳ありません。 >miyabi_takatsuk topの見出しと言った部分は画像の記事一覧のことです。記事を開いた時に表示される本文の一部を”ああああああ”の部分に表示させたいという意味で質問させて頂きました。説明がとてもわかりにくく申し訳ありません。 >m.ts10806 >記事をどこに管理される予定でしょうか。今までは一枚で完結するLPをローカルで作っていただけなので、更新する度に増えるリンク先のページをどこにどう保管するか等を考えずに"とりあえず形だけでも作ろう"とした結果すぐに詰まってしまいました。まだここで質問をする段階に至っていない事に気付けませんでした。申し訳ありません。

kawakamikami1

2020/08/27 06:20

>hatena19 こちらの知識が浅く間違った言葉選びをしてしまいました。申し訳ありません。 >root_jp 掲載画像はデザインカンプでコードを書こうとした段階で躓いてしまったので質問させて頂きました。紛らわしくて申し訳ありません

miyabi_pudding

2020/08/27 06:32

やっと意味がわかりました。質問タイトルも、意味が通じるようなものにしましょう。 "見出し"となったままだと、勘違いされる内容です。 > 別ページの記事の本文を自動で表示これをやりたい、となると、 m.ts10806さんのおっしゃる部分を詰めねばなりませんし、 root_jpさんのおっしゃる通り、まずは自分で調べてやってみたソースコードがないと、丸投げ質問になってしまいます。どんな感じの流れでの処理になるか、でよろしければ回答可能かとは思いますが・・・。

m.ts10806

2020/08/27 06:59 編集

>今までは一枚で完結するLPをローカルで作っていただけなので、「モック」ということですね。理解しました。ただ、探してなにもでないとは思えません。よく見るものですし。「どういうことをしたら」「どうなる」をもっと細かく詰めていくと見つかるかもしれません。「何文字で切る」「どこを操作する」「どれくらい、どのように出現する」こればかりは仕様ですので、作る人が決めることになります。

行動規範の内容に同意します

回答4件

補足依頼欄で回答者の皆さんが戸惑っているのは、……で省略する方法には主に3通りあるからです。

サーバ側で出力の際に一定の文字数でクリップしてしまう
クライアント側のCSSで表示を変える。
クライアント側のJavaScriptでクリップしてしまう。

1 の方法を取るには、サーバ側の言語を使うため、サーバ側の仕様がわからないと答えられません。「記事をどこに管理される予定でしょうか。」はその目的のご質問だと思います。
2 の方法を取るには、1行でしかできないため、「タイトルなのか本文なのか」があいまいですと答えられません。
3 の方法はどちらでもできますが、ソースコードがないと具体的には答えられません。

そもそも、「とりあえず形だけでも作ろう」ということであれば、記事本文は固定された文字列なのですから、HTMLソースに直接「……」と書いてしまえば済む話です。
「とりあえず形だけ」の間は「とりあえず形だけ」にしておいて、詳細なデザインについてはサイトの実装方法が決まってから考えてはいかがですか？

投稿2020/08/27 06:39

Lhankor_Mhy

総合スコア36158

kawakamikami1

2020/08/27 06:57

その様な方法があることを聞けただけでもかなり嬉しいです。ご回答ありがとうごいざいます。 https://goziline.com/　を参考にしているのですが、こちらの記事一覧に表示される本文はどの方法で表示させているのでしょうか？重ねての質問で申し訳ありませんがお答え頂けると嬉しいです。

Lhankor_Mhy

2020/08/27 07:01

1です。

kawakamikami1

2020/08/27 07:24

ご回答ありがとうごいざいます。サーバに関してももう少し勉強をすすめたいと思います。

行動規範の内容に同意します

画像だけで、まだソースはないようなので、サンプルをあげてみます。
あくまでサンプルなので作りは甘いです。参考程度にしてください。

HTML
1<article>
2  <header>
3    <h2>タイトル</h2>
4    <time>2018/10/17</time>
5    <span class="tag">ジャンル1, ジャンル2</span>
6  </header>
7  <section class="main">
8    <p>
9      123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
10    </p>
11  </section>
12  <footer>
13    <button type="button" class="read-more">→ 続きを読む</button>
14  </footer>
15</article>

CSS
1* {
2  padding: 0;
3  margin: 0;
4  box-sizing: border-box;
5}
6
7article {
8  border: 1px solid #bfc4c4;
9  background-color: #ebecec;
10  width: 500px;
11  height: 210px;
12  padding: 15px;
13}
14
15article header {
16  margin-bottom: 15px
17}
18
19article h2 {
20  text-align: center;
21  border-bottom: 1px solid #bfc4c4;
22  padding-bottom: 5px;
23  margin-bottom: 10px;
24}
25
26 article time, article .tag {
27  font-size: 0.8rem;
28}
29
30article .tag {
31  margin-left: 50px;
32}
33
34article .main {
35  word-break: break-all;
36}
37
38.read-more {
39  background-color: #00dfef;
40  border: none;
41  border-radius: 15px;
42  padding: 5px 20px 5px;
43  color: #FFF;
44  font-size: 1rem;
45  margin-top: 10px;
46  float: right;
47}

JavaScript
1addEventListener("DOMContentLoaded", () => {
2  document.querySelectorAll("article .main p").forEach((p) => {
3    p.textContent = p.textContent.replace(/(?<=.{70,}).*/, "……");
4  });
5});

投稿2020/08/27 07:14

編集2020/08/27 07:16

root_jp

総合スコア4666

root_jp

2020/08/27 07:15

長い文章を総略して…にするのは、他に色々やり方がありますが、今回はJavaScriptでやっています。

kawakamikami1

2020/08/27 07:41

自分がやりたいと思ってたことがまさにこんな感じです... JSのコードが全然分からないので頂いたコードをしっかり調べて学びたいと思います。わざわざコードを書いてくださり本当にありがとうございます。

行動規範の内容に同意します

ベストアンサー

別ページの記事の本文を自動で表示するにはどういったコード

に対して回答いたします。
コードを書いてしまうと、今の質問状況だと、丸投げになりますので、
その別ページの記事の内容を表示する処理の流れの部分の回答になります。

サイト全体ないし、そのWebページが、CMSなどのサーバーサイド言語で出力されている場合

そのCMSないし、システムに合わせた方法で、HTMLを記載して、
記事一覧、各記事の内容を、シームレスに表示する方法、構文の書き方は、必ず存在します。
そのシステムやCMSでのやり方を調べましょう。

別のサイトで記事を公開しており、そのWebページは静的HTMLの場合

APIを使う必要があるかと思います。
別サイトから提供されているAPIを、
JavaScriptにて実行し、取得した記事内容などを使って、
HTMLを生成する方法です。

というかそもそも私が聞きたいことを勘違いしている場合

もしかして、記事一覧を表示する際、HTML要素は何を使えばいいかわからない、という趣旨の質問だった場合です。
「タイトル」には、h1〜6要素、
記事本文には、p、
日付には、time要素が妥当でしょう。
カテゴリは、ulで囲って、各カテゴリをliを使うとかですかね。

ただし、上記も、基本的には自由なので、普通にやるなら、って話なので、ご了承ください。

リンクには、a要素が一番素直でいいはありますが。

投稿2020/08/27 06:48

miyabi_pudding

総合スコア9528

kawakamikami1

2020/08/27 07:14

ご丁寧に一つ一つ回答を頂き本当にありがとうごいざいます。まずはCMSやAPIといったもの理解から深めていきたいと思います。 miyabi_takatsukさんのお陰で今後の方針が少し見えてきました長時間お付き合い頂きありがとうございました。

行動規範の内容に同意します

今までは一枚で完結するLPをローカルで作っていただけなので、更新する度に増えるリンク先のページをどこにどう保管するか等を考えずに"とりあえず形だけでも作ろう"とした結果すぐに詰まってしまいました。

記事がどんどん増えていくサイトを作成したい。ということなら、
Wordpress などのCMS（コンテンツマネジメントシステム）を検討されてはどうでしょうか。

記事をどんどん入力していけば、図のようなトップページも自動で作成してくれます。

今さら聞けない！WordPressとは【初心者向け】 | TechAcademyマガジン

投稿2020/08/27 06:31

hatena19

総合スコア33790

kawakamikami1

2020/08/27 06:58

回答ありがとうごいざいます。現状wordpressの理解ができていないのでまずはHTMLとCSSでページを作ってからwordpressに移行しようと考えていました。

hatena19

2020/08/27 08:21 編集

「wordpressに移行しようと考えていた」ということなら、順番が逆ですね。 HTMLとCSSの知識がなくてもサイトを構築できるのがWordPress です。記事を書くのはご自身ですよね。ならば、まずはWordpressのテーマでご自身の希望にあったものを探します。質問の図のようなレイアウトにできるテーマもあります。（指定文字数で本文を抜き出して表示する機能も大抵ついてます。）あとは、もう記事をどんどん書いていけばいいです。 Wordpressのサイトのデザインやレイアウトもカスタマイズ機能で簡単にカスタマイズできます。それで満足できず、もっと自由にカスタマイズしたいと、HTML CSS PHP の知識が必要になってきます。「wordpressに移行」を考えていたなら、まずは希望にあうテーマ探しから始めるのが吉だと思います。

行動規範の内容に同意します

あなたの回答