カテゴリーの一覧表示をした際、見出しとアイキャッチ画像が被る。

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など カテゴリーの一覧表示をした際、見出しとアイキャッチ画像が被る。

このトピックには14件の返信が含まれ、1人の参加者がいます。8 ヶ月前 笹 さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #58575

    up0381.jpg

    トピックがうまく立てれず誤って違う方に立ててしまったので正しいほうに再度立てさせていただきます。
    大変申し訳ありません。
    見出しの装飾をしたところ、カテゴリーの一覧を表示した際、上記キャプチャのように見出しとアイキャッチが被ってしまいます。
    どのようにコードを編集すればアイキャッチ画像と被らないようにできますでしょうか。

    自分なりに調べて試行錯誤したものの、どうにもできませんでした。。。
    コードは以下になります。

    お手数ですが、ご教授いただけますと幸いです。

    .entry-content h2{
    position: relative;
    padding: 0.8em;
    margin: 0 0 1.5em;
    font-size: 1.25em;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: #dc143c;
    transform: rotate(-1deg) skew(-1deg);
    -webkit-transform: rotate(-1deg) skew(-1deg);
    -moz-transform: rotate(-1deg) skew(-1deg);
    -o-transform: rotate(-1deg) skew(-1deg);
    -ms-transform: rotate(-1deg) skew(-1deg);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -o-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    }

  • #58576

    http://netakiri.net/uploader/src/up0381.jpg

    キャプチャのURL間違えました。
    申し訳ありません。

  • #58580

    かうたっく

    Simplicityカテゴリ一覧を開いて、CSSを貼り付けても反映しませんでした。

    ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

  • #58585

    http://rotmcits.com/page-81/

    http://netakiri.net/uploader/src/up0382.jpg

    お世話になります。ご返信いただき大変ありがとうございます。

    私の投稿が不慣れで記載が分かりにくく申し訳ありません。
    上記が該当ページ、cssのスクショです。style.cssに記載しています。

    不足している情報がございましたら、ご指摘いただけますと幸いです。

  • #58588

    かうたっく

    .entry-content h2をとりあえず.entry-content h2 aに変更して、position: relative;position: absolute;に。

    以下をバッサリ削除すればタイトル通りの、見出しとアイキャッチ画像が被ることは無いです…。

    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -o-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    }

    プラグインを使用されているようで、他にも不具合はありますが、とりあえず・・タイトルの部分のみは…。

    https://gyazo.com/71a0cd8e3aaba748329a927218983323

  • #58590

    かうたっく

    子テーマに追記

    .su-posts-default-loop .su-post-thumbnail {
    	position: relative;
    }
    .entry-content h2 a {
    	position: absolute;
    	top: 0;
    }

    以下バッサリ。の方がまだ見やすいかもです。

    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -o-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    }

    完全にプラグインがHTMLを変更しているようです。もうしわけないですが。

    https://gyazo.com/8a25e420c71d6697c18be5b1aa6ea452

  • #58592

    大変お手数おかけしました。
    おかげ様で思うような形に近づけました。
    ひとりでは到底できませんでした。引き続き勉強させていただきます。

    しかしながら次は下記の画像のように、
    カスタマイズのレビューから見るとスマホ表示でも見やすいのですが、
    実際に見るとこのようになってしまいます。
    スマホのキャッシュの削除など試してみましたが、改善しませんでした。

    これについてもおっしゃられているプラグインによるHTMLの改変が原因となっているのでしょうか。
    何度も質問して申し訳ありません。

    PC
    http://netakiri.net/uploader/src/up0383.jpg
    スマホ
    http://netakiri.net/uploader/src/up0384.jpg

  • #58593

    かうたっく

    そうですよね。装飾するためのHTMLタグと言うのを触って変な位置にある日付を囲むタグをうまくつけると簡単にカスタマイズできます。

    次から次へと指定方法を確認しないといけないので。そこを直してもまた指定してあげないと、他が隠れてたり。画像の高さもバラバラなので、スマホになるともっと隠れて見えない文字列なども出てくると思います。

    とりあえずこんな感じで、h2タグ内のpタグを移動させたいのですが、カスタマイズしやすいようにタグが欲しいです笑

    http://netakiri.net/uploader/src/up0385.png

    HTMLを触らないでカスタマイズするなら、Simplicityの方がカスタマイズしやすいですね。やりたいカスタマイズをするのに大半はタグが入っているので。

    このままプラグインを使って、テーマのデフォルトHTMLタグを参考にするのも良いかもしれません。

    https://wp-simplicity.com/category/news/

    PCでF12キー、Elementを開くとHTMLが見えます。矢印マークを青くすれば見たいHTML・CSSが見えるので。要素の検証の使い方をチェックしたら、わかるかもしれません。

    Simplicityのものでしたら、カスタマイズ方法も多いので扱いやすいと思いますが、そこは運営者さん次第なので。あとテーマのカスタマイズと、ずれてるのが気になってます^^;

  • #58595

    `.entry-content h2{
    position: relative;
    padding: 0.8em;
    margin: 0 0 1.5em;
    font-size: 1.25em;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: #dc143c;
    transform: rotate(-1deg) skew(-1deg);
    -webkit-transform: rotate(-1deg) skew(-1deg);
    -moz-transform: rotate(-1deg) skew(-1deg);
    -o-transform: rotate(-1deg) skew(-1deg);
    -ms-transform: rotate(-1deg) skew(-1deg);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -o-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    }

  • #58596

    .entry-content h2{
        position: relative;
        padding: 0.8em;
        margin: 0 0 1.5em;
        font-size: 1.25em;
        font-weight: bold;
        text-align: center;
        color: #fff;
        background: #dc143c;
        transform: rotate(-1deg) skew(-1deg);
        -webkit-transform: rotate(-1deg) skew(-1deg);
        -moz-transform: rotate(-1deg) skew(-1deg);
        -o-transform: rotate(-1deg) skew(-1deg);
        -ms-transform: rotate(-1deg) skew(-1deg);
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
        -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
        -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
        -o-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
        -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #dc143c, -1.0em 0 0 0 #dc143c;
    }
  • #58597

    コードの投稿のやり方が分からず、連投してしまいました。
    申し訳ありません。

    現在のコードは、教えていただいたように編集し、以下のようになってました。

    .entry-content h2 a{
        position: absolute;
        padding: 0.8em;
        margin: 0 0 1.5em;
        font-size: 0.90em;
        font-weight: bold;
        text-align: center;
        color: #fff;
        background: #dc143c;
      transform: rotate(-1deg) skew(-1deg);
        -webkit-transform: rotate(-1deg) skew(-1deg);
        -moz-transform: rotate(-1deg) skew(-1deg);
        -o-transform: rotate(-1deg) skew(-1deg);
        -ms-transform: rotate(-1deg) skew(-1deg);
    }
    
    .su-posts-default-loop .su-post-thumbnail {
    	position: relative;
    }
    .entry-content h2 a {
    	position: absolute;
    	top: 0;
    }
  • #58601

    かうたっく

    スミマセンが、、#58597の前に書き込みしたのですが^^;

    私が確認した時点のCSSのコードだと思われます。現状を変えていなければ、ご提示いただいたURLで確認ができるのでURLの提示を書き込みしてくださいとさせていただきました。

    #58593の変更がいただけてないので、繰り返しになります。

    1つ今思うと、h2のタイトルをdisplay: blockにしたらどうかな?と思ったのですが、返信の返信が噛み合わなくなってきたように感じ、現在は内容を確認してないです。

  • #58756

    勉強不足で理解が追いついていなく申し訳ありません。
    カテゴリの一覧表示が崩れていた原因はショートコードで生成していたことが原因だったようで、カテゴリ一一覧をメニューから飛ばすようにしたことで見た目が綺麗になりました。

    見出しについてはまだ思うようにできていませんが、もう少し自分で勉強してみます。
    またつまづくと思いますので、その際は申し訳ありませんが教えていただけますと幸いです。

  • #58757

    かうたっく

    Shortcodes Ultimateと言うプラグインが/page-81/だけおかしな表示にしているってことではないですか?

    プラグインの機能を停止すればキチンと表示されるように思いますよ。あと/page-81/だけ、見た目を変える方法もあるので、プラグインの機能を停止する方法を探すことを検討してみてはどうでしょう?

    他のページ一覧を確認したら、すべて表示がキレイなので、それで困ってるのかな?と思ったんですが??違ったらすみません・・・

    表示のキレイなページ/category/卓球/マニアックな選手紹介/

  • #58800

    おっしゃる通り、ショートコードのプラグインが原因で表示が崩れていました。
    カテゴリーを表示するようにメニューを修正したら、きれいに表示されるようになりました。

    また、見出しの装飾も思うように変更することができました。
    教えていただき大変感謝です。

    また何かわからないことが出てきた際には、
    教えていただけますと大変嬉しいです。
    ありがとうございました。

トピック「カテゴリーの一覧表示をした際、見出しとアイキャッチ画像が被る。」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)