Q&A
fc2ブログでのhtml編集で躓いてしまいまして困っております。
ブログにアクセスした時のトップ画面に、各記事ごとの内容のあらすじを表示したいと思い、テンプレートのhtml編集をしています。
あらすじを表示するためにsummaryというIDを定義し、その部分をjavascriptで抜き出して表示したいと考えています。（idは概要用に作りました）
記事それぞれに<div id="summary">…</div>というブロックを設け、javascript部分に
html
1<script> 2document.getElementById(‘summary’); 3</script>
といった記述をすればいいのだろうな…というところまではぼんやりと分かったのですが、今は何も表示されていない状態です。
ここからどうすれば、id="summary"部分を抜き出して表示することができますでしょうか…？
html
1 2<div id="summary">あらすじ部分です。idにsummaryを使っています。トップページにこの部分を表示したいと考えています</div> 3 4本文です。 5
この記事がトップページに出てくるとこんな表示になります。一番上の記事です。
トップページ
（本来ならば太字タイトルの下にsummaryが出てきてほしいのですが、空欄になってしまっています）
チャレンジしてみたこと
javascript
1 2window.onload = function(){var summary=document.getElementById("summary")}; 3
上記javascriptをscriptタグで囲ってbodyの閉じタグの直前に入れました。
html
1<div id="summary"></div>
javascriptでIDを指定して抜き出し、summaryと名の付いたdivタグへ挿入しようとしました。
（空白となりました）
innerHTMLを使っても同じ状態です。
ちなみに、fc2ブログではhtml部分に、本文をまるごと表示するための<%topentry_body>という変数が用意されているのですが、これを使うと本文のラストまで表示されて長くなってしまうので、自分で表示する範囲を決めようと思い立った次第です。
もしよろしければ、お力添えいただければ幸いです。
どうぞよろしくお願いいたします。
回答1件
0
ベストアンサー
###できない理由
JavaScriptはページに出力された結果をブラウザ側で後から操作するものです。
ゆえにトップ画面に、各記事の<div id="summary">中身のテキスト</div>がそもそも出力されていないのであれば、できません。
「中身のテキスト」をご自身で出力できますか？
トップ画面には<div id="summary"></div>が現状出力されていますが、「中身のテキスト」は空になってしまっているようです。
もしこれが出力できなければ、素直に<%topentry_body>を使って全文出力するのみです。
###解決策
もし全文では長いということでしたら、JavaScriptで部分的に切り抜いてみてはいかがでしょうか。
以下のような記事一覧があったとしたら
HTML
1<div class="post"> 2 <p class="target">あいうえおかきくけこ</p> 3</div> 4<div class="post"> 5 <p class="target">さしすせそたちつてと</p> 6</div>
こうして前半5文字に切り抜けます。
JavaScript
1$(function() { 2 $('.post').each(function() { 3 // 全文を取得する 4 var target = $(this).find('.target'); 5 // 前半5文字を取得 6 target.text( target.text().substr( 0, 5 ) ); 7 // 表示する 8 target.css('display','block'); 9 }); 10}); 11
切り抜かれるまでは表示したくないでしょうから、CSSで非表示にしてあげましょう。
CSS
1p{display:none;}
投稿2020/02/13 23:11
編集2020/02/13 23:13
総合スコア270
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/14 09:57
2020/02/14 12:52
2020/02/14 13:54
2020/02/14 13:58
2020/02/14 14:13 編集
2020/02/14 14:48 編集
2020/02/14 14:36
2020/02/14 16:24
2020/02/14 16:30
2020/02/14 16:31
2020/02/14 17:03
2020/02/14 17:14
2020/02/14 17:35 編集
2020/02/15 07:46 編集
2020/02/15 08:37
2020/02/15 08:42
2020/02/16 00:52 編集
2020/02/16 02:06
2020/02/16 02:20
2020/02/16 03:09 編集
2020/02/16 02:42
2020/02/16 13:59 編集
2020/02/16 21:30
2020/02/17 22:11 編集
2020/02/18 04:17