GenesisでTOP画像にリンクを付けた場合、<class="more-link">の読み込み
-
テンプレート「Genesis」で、TOP画像にリンクを付け、その下に
<!--more-->
を置いて
<a class="more-link"></a>
の読み込みを回避したいと考えております。<トップページの構成>
記事のタイトル・cssでトリミングしたトップ画像・タグを一覧にして表示。この時、本文を<!--more-->
で非表示にする。
画像は天地・左右中央配置。管理画面より操作し、画像に各記事へのリンクを張る。
<!–more–>の文言は空欄に指定している。<画像にリンクがある場合、ない場合の違い>
◎画像にリンクのない場合コードに<a class="more-link" href=""></a>
は存在しません。
◎リンクを張ると存在し、画像のトリミングに混合されてしまい、天地のセンターが崩れてしまいます。どちらの場合も存在しない状態にするにはどうすれば良いでしょうか。
<出来なかったこと>
cssに .more-link {
display:none;
}
height:0;などを追加しましたが、変化はありませんでした。以下コードを抜粋致しますので、よろしくお願い申し上げます。
◎画像にリンクのない場合のhtml抜粋
<div class="entry-content"> <p> <img class="aligncenter size-large wp-image-68" src="http://" alt="" width="580" height="386" srcset="http://" sizes="(max-width: 580px) 100vw, 580px" style="display: block;"> <noscript></noscript> </p> </div>
◎画像にリンクのある場合のhtml抜粋
<div class="entry-content"> <p> <a href=" http://記事URL"> <img class="aligncenter size-large wp-image-68" src="http://" alt="" width="580" height="386" srcset="http://" sizes="(max-width: 580px) 100vw, 580px" style="display: block;"> <noscript></noscript> </a> <a class="more-link" href="http://記事URL"></a> </p> </div>
◎該当する箇所のcss
div.entry-content > p:first-of-type{ width: 580px; height: 300px; overflow: hidden; position:relative; } div.entry-content > p:first-of-type img{ width: 100%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /*media Queries ----------------------------------------------------*/ @media only screen and (max-width: 780px) { div.entry-content > p:first-of-type { width: 96%; margin:0 auto; height: 300px; overflow: hidden; position:relative; } div.entry-content > p:first-of-type img{ width: 100%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } }
- トピック「GenesisでTOP画像にリンクを付けた場合、<class="more-link">の読み込み」には新たに返信することはできません。