【COCOON】記事タイトルにアイキャッチを付けるカスタマイズ方法

ワードプレスのテーマ【COCOON】で、記事タイトルにアイキャッチを付けるカスタマイズ方法についてまとめています。

COCOONの記事タイトル横にアイキャッチ画像を表示するカスタマイズ:CSS編

現在のままではなんだか表示の形が悪いので、追加CSSでカスタマイズを行います。

当サイトで指定しているコードはこちらです。

/* 記事タイトル */
.titletable{
border: solid 3px #ffffff;
}
.titletable td{
background-color:#ffffff;
border: solid 3px #ffffff;
}
.attachment-150_thumbnail {
display: inline-block;
width: 300px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}

tableの枠線や背景色が表示されていたので、白に変えて見えなくしています。

.attachment-150_thumbnailは、アイキャッチのカスタマイズです。

サイズ指定は効果あるのか微妙ですが、丸型にするための指定なども含まれています。

本当は

綺麗な丸のアイキャッチ画像を追加したかったのですが、とりあえずで作ってしまいました。

レスポンシブ風になっているのも面白いけど、そのうち丸型にするかもしれません(笑)

もっと綺麗なカスタマイズや面白い要素があれば教えていただけると嬉しいです!

掲示板