特典機能について

アイキャッチ画像と文章がずれて表示される | 不具合報告 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
アイキャッチ画像と文章がずれて表示され...
 
共有:
通知
すべてクリア

[解決済] アイキャッチ画像と文章がずれて表示される


utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

初めまして。よろしくお願いします。

タイトルをaタグでリンクした場合に、トップページでアイキャッチ画像と文章がずれて表示されます。

リンクしない場合には問題ありません。

http://digicamezine.com/annex/

↑一番下の記事がリンクしてずれて表示されています。

 

プラグインは全て無効にしています。CSSも初期状態のままです。

ニュースサイトでの運用を考えており、解決方法をご教授下さい。

 

----------------------------------------------
サイト名:デジカメジン別館
サイトURL: http://digicamezine.com/annex/annex-wp
ホームURL: http://digicamezine.com/annex
コンテンツURL:/annex-wp/wp-content
インクルードURL:/annex-wp/wp-includes/
テンプレートURL:/annex-wp/wp-content/themes/cocoon-master
スタイルシートURL:/annex-wp/wp-content/themes/cocoon-child-master
子テーマスタイル:/annex-wp/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.4.1
PHPバージョン:7.3.16
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7,zh-CN;q=0.6,zh;q=0.5
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.4.1
カテゴリ数:4
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.1
style.cssサイズ:719バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/annex-wp/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
----------------------------------------------


引用未解決
みるみ
(@mirumi)
Reputable Memberサイト
結合: 2年前
投稿: 292
みるみ - Twitter
 

こんにちは。

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

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


わいひら 件のいいね!
返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

@mirumi さん

ありがとうございます。

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

添付した図の通りです。

よろしくお願いします。


返信引用
みるみ
(@mirumi)
Reputable Memberサイト
結合: 2年前
投稿: 292
みるみ - Twitter
 

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

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

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

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

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

 

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


わいひら 件のいいね!
返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

@mirumi さん

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

http://www.digicamezine.com/

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

 

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


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

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

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>

わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

ついでに、こっちも。

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

 

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

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

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


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

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


わいひら 件のいいね!
返信引用
みるみ
(@mirumi)
Reputable Memberサイト
結合: 2年前
投稿: 292
みるみ - Twitter
 

@leafytreeさん

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

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

@utsnoさん

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

 

This post was modified 2年前 by みるみ

わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

@mirumi さん

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

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

 


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

@utsno さん

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

 

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

 

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


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

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

ご操作❌

誤操作⭕️

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


わいひら 件のいいね!
返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

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

 

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

 

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


わいひら 件のいいね!
返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

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

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

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

http://www.digicamezine.com/

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

 

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

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

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

 

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


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

@utsno さん

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

 

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

 

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

 

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

 

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

 

 

 

 


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

@utsno さん

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

 

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

 

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

 

申し訳ありません。

 


返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

@leafytree さん

お世話になります。

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

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

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


わいひらリフィトリー 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

@utsno さん

投稿者:: @utsno

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

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

 

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

 

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

 

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 

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


返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

@leafytree さん

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

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

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

のように書いています。


わいひらリフィトリー 件のいいね!
返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

@yhira さん

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

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


わいひらリフィトリー 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

@utsno さん

投稿者:: @utsno

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

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

のように書いています。

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

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


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

@utsno さん

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

 

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

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

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

 

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

 

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

 

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

 


わいひら 件のいいね!
返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

@leafytree さん

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

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

 

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

 

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

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


わいひらリフィトリー 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 

一応補足。

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

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

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

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


返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

@yhira さん

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

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

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

http://www.digicamezine.com/

 


返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

@yhira さん

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

ありがとうございます。

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

http://www.digicamezine.com/

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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 
投稿者:: @utsno

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

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


返信引用
utsno
 utsno
(@utsno)
ゲスト
結合: 2年前
投稿: 11
Topic starter  

@yhira さん

了解しました。

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

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


返信引用
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon
タイトルとURLをコピーしました