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

PR 2017/9/28

このトピックには3件の返信、1人の参加者があり、最後にムライにより6年、 6ヶ月前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2017年9月24日 11:45 PM #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;
  }
  と指定しましたが消えず・・・こっちでも悩んでいます。
  
  またカスタマイズの質問で申し訳ありません。
  図々しいのは承知ですが、どうかよろしくお願いいたします。
- 2017年9月25日 6:27 AM #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;
}
```
- 2017年9月25日 10:07 AM #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;
}
```
- 2017年9月28日 12:21 AM #56124
  
  ムライ
  ゲスト
  
  >かうたっく様
  
  返信が遅れてしまい大変申し訳ございません。
  このところ少々立て込んでいまして……
  
  左上に揃えたほうが安定するんですね…実際色々追記してどっちにするか考えてみます。
  
  ソースコード教えていただき本当にありがとうございます。
  自分一人ではできなかったので大変助かりました。
  
  感謝です。
投稿者

投稿