こんにちは。

申し訳ありませんが、実現したい内容がイマイチ理解できませんでした。どうありたいのか、図などで分かりやすく教えていただけますでしょうか？

ソースを見た限りちょっと謎な感じになってますが…。

@mirumi さん

ありがとうございます。

リンクしていない記事のように、アイキャッチ画像の横に文章(タイトルと本文)が表示されて欲しいんですが、下にずれて表示されます。

添付した図の通りです。

よろしくお願いします。

ひょっとしてですが「記事タイトルに<a href="http://www.digicamezine.com/" target="_blank">テスト投稿</a>と入力している」感じですか？

だとしたらこういう状況になってしまうのはHTMLとCSSのルール上普通です。

そもそも「タイトルにaタグ自体を挿入する」というのは一般的ではありません。別サイト（www.digicamezine.com）へのリンクをトップページに掲載したいのでしたら、

• ウィジェットを使う
• 固定ページでトップページを作る
• ブログカードとしてではなく普通にカスタマイズで挿入する

など別の方法をおすすめします。

（全然見当違いのことを申し上げていたらすみません。趣旨は合っていますか？）

@mirumi さん

別にニュースサイトをやっているのですが、そちらでネットの記事を紹介するのにそのような使い方をしていますが、一般的な使い方ではないのですね。

http://www.digicamezine.com/

↑別のテンプレートを使っています

Cocoonが非常に使いやすいので、テンプレートの入れ替えを完投していて、トップページのレイアウト設定などで何とかならないかと思い質問しました。

こちらの記事が参考になりそうです。

aタグの中にaタグを書きたい時のtips

書き方としては、こんな感じでしょうか。

<h2 class="entry-card-title card-title e-card-title" itemprop="headline"><object><a href="http://www.digicamezine.com/" target="_blank" rel="noopener">テスト投稿</a></object></h2>

ついでに、こっちも。

HTML 本当は怖い target="_blank" 。rel="noopener" ってなに？

HTML 本当は怖い 。 ’ってなに？

リンクは上手く貼れない ? 

黒い所の中をクリックしてみてください。

aタグをobjectタグで囲むと、はみ出なくなるみたいなんですけど、みるみさん、文法的にはよろしくないのでしょうか？

@leafytreeさん

今回の件は外部サイトなのでその記事で言及されているobjectタグの使いみちも間違ってはいなさそうですね（僕は気持ち悪いのであまり使いたくはありませんが）。

しかし「WordPress（ないしはCocoonというテーマで）タイトル入力欄にHTMLタグを書く」というのがそもそも僕はしっくり来ておらず、どういう挙動になるのかも想像がつきません。質問者さんが掲載してくださったサイトではたしかに記事タイトルから外部サイトに飛んでますし（そういうテンプレート？）。

@utsnoさん

実際にやってみましたところ、とりあえずは正常に動きましたのでこのobjectタグの使用でいいかとは思います。

@mirumi さん

utsnoさんのサイトのソースコードをコピーしてローカルでテストしたら、見出しと、エントリーカード、それぞれのリンクに飛ぶみたい・・・

あまり使わないやり方ですが、これも有りなのかな・・

@utsno さん

objectタグで囲む方法は、私も使ったことがないため、各ブラウザや端末で正しく表示されるかテストした方がよさそうです。

それと、リンクの中のリンクなので、タッチ画面のデバイスでは、ご操作しやすい、という可能性もあります。

紹介しておいて、なんですが、その辺も考慮した方がよさそうです。

慌てて、書いたので、間違えました。

ご操作❌

誤操作⭕️

エントリーカードで、ブログカードを入れるような方法って、なかったかなぁ。

ズレるのはaタグの中に入れ子でaタグを入れているためです

そこにリンクをいれるのはオススメしません

また既にリンクになっているからでもあります

皆さん回答ありがとうございます。

<object>タグを使う方法で、上手く行きました。

この機会に、もう一つのサイトもCocoonに変更しました。

http://www.digicamezine.com/

↑最初のページに表示される投稿にだけ<object>タグを追加してみました。

また、このリンクの張り方自体が特殊だという事も、今回の回答を通して知りました。

上のサイトはMovable Typeの頃からずっとこのやり方でやっていたので、疑問に思っていませんでした。

今後は、やり方を変えるか、よく考えてみます。

本当にお世話になりました。

@utsno さん

Cocoonは、スマホなどのタッチデバイスの操作性を考慮して、エントリーカード全体がリンクになっています。

なので、かうたっくさんや、みるみさんがおっしゃるように、あまり良い方法ではないみたいです。

それに、エントリーページは動的に生成されるため、新たなエントリーカードが増えたときに、挿入したobjectタグが無くなってしまうかもしれません。（ちょっと私のスキルでは良くわかならいですが・・）

ちょっとすぐには、思いつかないのですが、複数のサイトの相互リンクを上手く配置する方法も、何かしら、あるのではないかと思います。

Cocoonには、多くのオプションがあるので、ちょうどハマるものがあれば良いのですが・・・

@utsno さん

やはり、objectタグを手動で挿入するというのは、問題ありそうです。

「デジカメジン本館」のエントリーページの２ページ以降を見るとレイアウトがずれてしまっているようです。

私も、もう少し、よく考え、テストしてみるべきでした。

申し訳ありません。

@leafytree さん

お世話になります。

「デジカメジン」の2ページ目以降の記事は<object>タグを追加していないので、ずれた表示のままなんです。

全部の記事に<object>タグを追加するのは大変なので、取りあえずよく読まれるトップページに表示される記事だけ直しました。

今後は、リンクの張り方自体を考えようと思います。

@utsno さん

投稿者:: @utsno

今後は、リンクの張り方自体を考えようと思います。

それなら、いいんですが、既存のメインのサイトの表示が、おかしいようでしたので、とても焦りました。 ? 

やはり、動的なWordPressの記事に、いちいち手動でタグを入れるというのは、良い方法とは言えないですね。（こんなに沢山の記事のタイトルにリンクがあるとは思っていませんでした。）

もし「object」タグを使うにしても、プログラムで自動挿入するような方法をとらないと、いけないのかもしれません。

後学のために、ひとつ伺いたいのですが、投稿記事のタイトル（cocoonの場合はh１タグ）には、どのようにしてリンクを設定していらっしゃるのでしょうか？

Cocoon自体は、aタグを利用したタイトルの利用は想定していませんでした。
かうたっくさんが書かれたように、エントリーカード自体がaタグなので、aタグの中にaタグが入ってしまってあまりよろしくはないかもしれません。
新しいサイトで始める場合は、aタグは利用しない方が良いかもしれません。

@leafytree さん

質問と違う答かもしれませんが、普通にURLをaタグで囲んで指定しています。

WordPressの新規投稿のタイトルの所に、

<a href="http://www.digicamezine.com/" target="_blank">デジカメジン</a>

のように書いています。

@yhira さん

回答ありがとうございます。

既存の記事は<object>タグで対応しましたが、今後の記事はタイトルでリンクを張らずに、本文中にブログカードでリンクするようにしたいと思います。

@utsno さん

投稿者:: @utsno

WordPressの新規投稿のタイトルの所に、

<a href="http://www.digicamezine.com/" target="_blank">デジカメジン</a>

のように書いています。

そんな方法で出来るんですね！

プラグインも入れていらっしゃらないようでしたので、どうやっているのかな、と不思議に思っていました。

@utsno さん

せっかく、別の方法を模索するとおっしゃっているのに、私は、バカなテストをやってみました。

WordPress新規タイトルのところに、utsnoさんの真似をして、

<object><a href="http://leafytree.minibird.jp/flex-demo/index.html" target="_blank" rel="noopener">記事のタイトル</a></object>

このようにobjectタグまで付けて投稿してみました。

記事タイトルはｈ1のはずなのですが、エントリーカードのh２にもちゃんとobjectタグが入っています。

ということは、もしかしたら、この挿入のやり方だと、エントリーカードが新しい記事に押されて２ページ目、３ページ目と送られてしまっても、objectタグは残っているのかもしれません。

何の役にも立たないテストかもしれませんが・・

@leafytree さん

取り敢えずトップページに表示される最近の記事だけは、<object>タグを追加して表示を揃えてみました。

「デジカメジン」の方には投稿が6,800(笑)もあるので、全部直すのは諦めています。

上手く表現できませんが、昔のブログみたいに、記事が最新のものからダラダラと続いていくページをMovable Typeで作っていてWordPressに移行しましたが、今はトップページに載っているのはエントリーカードと言う各記事の抜粋になるんですね。

今後は、記事の中で外部サイトへのリンクを張ろうと思います。

皆さん、アドバイスありがとうございました。

一応補足。

実際問題がある環境で試してないので、これで良いのかわかりませんが、全てのタイトルからタグを取り除くという対応をする場合は、以下のようなコードで対応できるかもしれません。

//タイトルからタグを取り除く
add_filter( 'the_title', 'modify_post_entry_titles' );
function modify_post_entry_titles( $title ) {
  return strip_tags($title);
} 

上記のコードを子テーマのfunctions.phpに追記する形でコピペします。

ただ、the_titleフックは様々な箇所に利用されていると思うので、もしかしたら思いもよらない不具合があるかもしれません。

@yhira さん

アドバイスありがとうございます。

もういろいろ試してみてから考えます。

前からやっているニュースサイトの方も、Cocoonのおかげでシンプルで見やすいサイトになりました。

http://www.digicamezine.com/

@yhira さん

教えていただいたコードをfunctions.phpに追加したところ、過去記事のレイアウトも治りました!

ありがとうございます。

(欲を言えばエントリーカードのタグはなくても、投稿の個別ページのリンクタグはそのまま残って欲しいんですが…)

http://www.digicamezine.com/

ともかく、ありがとうございました。

投稿者:: @utsno

(欲を言えばエントリーカードのタグはなくても、投稿の個別ページのリンクタグはそのまま残って欲しいんですが…)

基本的にPHPカスタマイズは、サポート対象外とさせていただいているので、もし細かなカスタマイズが必要であれば、以下のプロにご依頼ください。
https://wp-cocoon.com/cocoon-custom/

@yhira さん

了解しました。

いろいろ検討してみます。

ありがとうございました。