アイキャッチ画像の上にカテゴリを表示させたい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など アイキャッチ画像の上にカテゴリを表示させたい

  • このトピックには3件の返信、1人の参加者があり、最後にムライにより3年、 3ヶ月前に更新されました。
3件の返信スレッドを表示中
  • 投稿者
    投稿
    • #56080
      ムライ
      ゲスト

      重ねての質問申し訳ございません。
      タイトルの通りアイキャッチ画像の上にカテゴリを表示させたいのですがうまくいかず、悩んでいます。

      http://infosumaho.wp.xdomain.jp/
      ブログはこちらで

      
      .entry-card-content span.category.fa{
        display:none;
      }
      
      .entry-card-content span.category{
        position:absolute;
        left:115px;
      background: #FF6633;
        padding:0;
        opacity: 0.9;
      }
      
      .entry-card-content span.category a{
        color:#ffffff;
        font-size:12px;
        font-weight:bold;
        text-decoration:none;
        padding:0 4px;
      }
      

      とやって、
      .entry-card-content span.categoryに
      position:absolute;
      left:115px;
      を入れて画像の右端にカテゴリを置くことはできたのですが、 top:10px;などのtopを指定すると画像のように一番上のカテゴリ以外消えてしまいます。
      http://infosumaho.wp.xdomain.jp/wp-content/uploads/2017/09/22.png

      理想としてはこのようにアイキャッチ画像の右上に配置したいです。
      http://infosumaho.wp.xdomain.jp/wp-content/uploads/2017/09/2221.png

      後、カテゴリだけフォルダのWebアイコンを消したいのですがどのようにすればよいでしょうか?
      .entry-card-content span.category.fa{
      display:none;
      }
      と指定しましたが消えず・・・こっちでも悩んでいます。

      またカスタマイズの質問で申し訳ありません。
      図々しいのは承知ですが、どうかよろしくお願いいたします。

    • #56081
      かうたっく
      ゲスト

      理想としてはこのようにアイキャッチ画像の右上に配置したい

      理想ではそれで右上でもキレイに並びますけど、実際は文字数がバラバラになる事を考えて、左上に変更してます。

      仕上がり画像
      http://netakiri.net/uploader/src/up0344.png

      実際を考慮して、また変更してください。

      /*アイコン消す*/
      .category .fa {
      	display: none;
      }
      .entry {
      	position: relative;
      }
      .category {
      	position: absolute;
      	left: 0px;
      	top: 3px;
      	background: #FF6633;
      	padding:0;
      	opacity: 0.9;
      }
      .post-meta .category a {
      	color:#ffffff;
      	font-size:12px;
      	font-weight:bold;
      	text-decoration:none;
      	padding:0 4px;
      }
      .post-meta .category {
      	padding-right: 0;
      }
    • #56083
      かうたっく
      ゲスト

      上記コードだけだと、他のページにも反映しますね。トップページのみ指定する#listを追記してくださいねっ

      /*アイコン消す*/
      #list .category .fa {
      	display: none;
      }
      #list .entry {
      	position: relative;
      }
      #list .category {
      	position: absolute;
      	left: 0px;
      	top: 3px;
      	background: #FF6633;
      	padding:0;
      	opacity: 0.9;
      }
      #list .post-meta .category a {
      	color:#ffffff;
      	font-size:12px;
      	font-weight:bold;
      	text-decoration:none;
      	padding:0 4px;
      }
      #list .post-meta .category {
      	padding-right: 0;
      }
    • #56124
      ムライ
      ゲスト

      >かうたっく様

      返信が遅れてしまい大変申し訳ございません。
      このところ少々立て込んでいまして……

      左上に揃えたほうが安定するんですね…実際色々追記してどっちにするか考えてみます。

      ソースコード教えていただき本当にありがとうございます。
      自分一人ではできなかったので大変助かりました。

      感謝です。

3件の返信スレッドを表示中
  • トピック「アイキャッチ画像の上にカテゴリを表示させたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)