Q&A
回答ありがとうございます。
要約表示変数ですと、CSSや改行までなくなってしまうので、最低限のデコレーションは残したくて<%topentry_body>変数を使っています。
本来はここに文字サイズ変更と斜体化が加わります。
いつもお世話になっております。htmlにおいて、<a>タグのネスト回避について教えてください。
現状説明
ブログトップページ
こちらのブログで、トップページの記事一覧のコンテンツとして、本文の一部を表示しています。
表示の仕方は、表示したい部分と隠したい部分にそれぞれクラス定義をしたdivを割り当て、jqueryのremove();を動作させています。
コンテンツの重なり方として、こんな形になっています。
html
1<div class="blog.content.desc"> A:トップページのうち、記事の内容を入れるエリア 2<!--（緑色で色付け。ブログ側で規定）--> 3 4 <div class="synopsis">B:トップページでのみ表示される概要</div> 5 <!--（水色で色付け）--> 6 7 <div class="entmain">C:個別記事ページでのみ表示される本文</div> 8 <!--（紫色で色付け）--> 9 </div> 10<!--BとCを合わせて<%topentry_body>(本文)という変数が振られており、それを挿入しています-->
ページによって、表示したい部分が変わってくるので、
jquery
1$(".entmain").remove();//トップページで動作。本文を隠す。// 2 3$(".synopsys").remove();//個別記事ページで動作。概要を隠す。//
この2つのjqueryをそれぞれ読み込んでいます。
困っていること
本文を隠す動作をするjquery
jquery
1$(".entmain").remove();
について、トップページの一部で正しく動作をしませんでした。
調べてみたところ、記事の本文中に下記のようなリンク要素
```html
<a href="xxxx">リンク</a>
が含まれていると、個別記事ページへつながるリンクの中に更にリンクがある（入れ子）状態になり、html的にエラーになっている、と分かりました。（Firefoxにてソース検証。個別記事ページでみると問題なし） [問題のページの例です。パソコンから見るとわかりませんが、スマホからだと4番目の記事においてトップページでのレイアウトが崩れています(サムネイルのズレなど）](https://ancyfamily.blog.fc2.com/) どうにかして、jqueryを動作させたく、試行錯誤をしています。 ネストを回避するにはどうしたら良いでしょうか。 **試してみたこと・疑問点** 【本文部分を<object>タグで囲む】 ```html <object> <div class="entmain">本文</div> </object>
記事内に直接記述する形で、<object>タグでネストしたところ、jqueryが正しく動作しました。
うまく動作したページ
これで正解だと思ったのですが…今度は個別記事ページの方で<object>要素の激しいチラつきが発生してしまいました…！しかも、この現象は、Chromeでのみ発生するようで、firefoxだと正常にページを見ることができています。（PC版・Android版共通）
【トップページ側に表示されている本文から、<a>要素を取り去ってみる】
<a>要素の内側に<span>を加え、
jquery
1$("span").unwrap();
を動作させようと試みましたが…そもそもがエラーのあるhtmlなので、ページに変化がありませんでした。
解決に向けて教えていただきたいこと
第1希望としては、<object>タグを使う方法でチラつきが抑えられる方法があっ
たらベストです。とてもお手軽なので…
トップページ側と個別記事側の本文は、変数により個別に挿入されており、リンクしているわけではないので、トップページ側のentmainのみ<object>で挟む…といったことができたらよいのですが…
トップページ側の本文から正規表現等で、<a>を削除する方法でも構いません。
removeされる要素なので、他の文字で置き換えてプレーンテキスト化などでも大丈夫かと思います。
長々と書いてしまい、すみません。
ぜひ、お力をお貸し願えればと思います。よろしくお願いいたします。
回答2件
0
質問に対する直接の回答ではありませんが、
「aタグが入っているかもしれない内容（.entmain）」をaタグで囲もうとしているから起きる問題だと思いますので、
本文を抜き出す部分とリンク部分を入れ子にせず、分けてしまえば良いのでは無いでしょうか。
そうすればとりあえずjQueryは動きますよね。
その上で、リンク部分を透明にして.synopsysを覆うように上に被せてしまえば、「概要をクリックして記事詳細に移動する」という動作を実現できると思います。
以下、コード例です。 動くサンプル（Codepen）はこちら
html
1<div class="link-wrapper"> 2 <div class="synopsys"> 3 ここに概要が入ります<br> 4 ここに概要が入りますここに概要が入りますここに概要が入ります 5 </div> 6 <div class="entmain"> 7 ここに本文が入ります<a href="https://google.com">これはgoogleへのリンクです</a>ここに本文が入ります 8 </div> 9 <a href="https://teratail.com/" class="link"><span class="visually-hidden">詳細を見る</span></a> 10</div>
css
1.link-wrapper { 2 position:relative; 3} 4 5.synopsys { 6 background: aqua; 7} 8 9.link { 10 display: block; 11 position: absolute; 12 top: 0; 13 left: 0; 14 width: 100%; 15 height: 100%; 16 background: white; 17 opacity: 0; 18} 19 20.link:hover { 21 opacity: 0.5; 22} 23 24/* 質問の内容と直接関係ありませんが、かぶせる用のaタグの中身が空なのはよろしくないので、「詳細を見る」という文言を見た目上隠すためのスタイル指定です。 */ 25/* 参考: https://frasco.io/writing-css-with-accessibility-in-mind-4fc82b26aecb */ 26.visually-hidden { 27 position: absolute; 28 white-space: nowrap; 29 width: 1px; 30 height: 1px; 31 overflow: hidden; 32 border: 0; 33 padding: 0; 34 clip: rect(0 0 0 0); 35 clip-path: inset(50%); 36 margin: -1px; 37} 38
JavaScript
1$(document).ready(function(){ 2 $('.entmain').remove(); 3}); 4
投稿2020/03/08 05:12
総合スコア461
0
ベストアンサー
ブログのURLをみるとFC2ブログのようですね。
トップページの記事一覧に本文の一部を表示したいのなら、テンプレート変数に
<%topentry_description> 本文の要約（200文字）を表示
というのがありますが、それではダメですか。
これらなaタグは自動で削除されます。
目的は、
トップページの記事一覧には概要を表示、投稿記事にはそれ以外の部分を表示したい、ということだと、
理解しました。
もし、そうなら、FC2ブログの記事入力ページには、「本文」欄と「追記」欄があります。
「追記」欄に概要(synopsysの部分)を入力して、「本文」欄に本文（entmainの部分）を入力するようにすれば（逆でもOKです）どうでしょう。
そうすればテンプレートに下記のように設定すれば、トップページには「追記」(概要)のみは出力、投稿記事ページには「本文」のみ出力することができます。
html
1<!--index_area--> 2 <%topentry_more> 3<!--/index_area--> 4<!--permanent_area--> 5 <%topentry_body> 6<!--/permanent_area-->
投稿2020/03/08 04:23
編集2020/03/08 08:39
総合スコア33715
ならば、記事へのaタグは、その前で閉じるようにするのが本筋かなと思います。
あとは、クラス指定をしてそこで区切りたいというのも理由ですね…！
初歩的なことで申し訳ないのですが、objectタグって、対応していないブラウザがあるのでしょうか…？
今、firefoxからページをみているのですが、点滅せずすっきり表示されているので…
aタグの閉じ場所を考えること、ですね。
本文が結構長いので、冒頭に目次のようなもの（記事内へのリンクがたくさん）が入るケースが非常に多いんです。
https://ancyfamily.blog.fc2.com/blog-entry-113.html
こんなページですね…！
トップページに記事本文を出力してスクリプトで非表示にするという方法だとトップページが重くなります。
FC2ブログの記事入力欄には「本文」と「追記」の２箇所があります。
トップページに表示する概要部分は本文欄に入力して、その以降のリンク等を含む部分を追記欄に入力するという方法にしたらどうでしょう。
<%topentry_body>で本文を出力、<%topentry_more>で追記を出力と分けられますので、
トップページには<%topentry_body>のみ、記事ページには<%topentry_more>を出力というようにテンプレートで指定すれば、無駄な出力をせずにすみ、スクリプトで表示/非表示を切り替える必要はないです。
ちなみに objectタグ は外部リソース（動画コンテンツなど）を埋め込むためのもので、aタグのネストを回避するというのは本来の使い方ではなくたまたま動作しているだけのものですので、ブラウザが変われば正常動作しない可能性は当然あります。
追記欄の利用ですね！
これから新しく書く記事については検討してみたいと思います。（スマホからだと執筆がしづらいのが少し難点ですが…！）
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/08 10:26
2020/03/08 10:40