BizzareFoods/変な食べ物のカスタマイズ(アイキャッチ画像周り)

目次

【Cocoon スキン】変な食べ物

cocoonスキン 変な食べ物イメージ

👆デフォルトだとこんな感じです。

アイキャッチ周りのご要望が多かったので修正方法をまとめました。

外観 > カスタマイズ > 追加 CSS の箇所に下記のコードを追加してください。

アイキャッチ画像を非表示にする

cocoonスキン 変な食べ物イメージ

css
.article-header .eye-catch-wrap {
  position: relative;
}

.article-header .eye-catch img {
  display: none;
}

.article-header .eye-catch {
  overflow: initial;
}

.article-header .sns-share {
  padding-top: 230px;
}

@media (max-width: 834px) {
  .article-header.entry-header {
    height: 360px;
  }
}

アイキャッチ画像のボカシ加工を無効

cocoonスキン 変な食べ物イメージ

css
.eye-catch img {
  filter: none;
  -o-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -webkit-filter: none;
}

アイキャッチ画像のボカシを無くす&タイトルと分離

cocoonスキン 変な食べ物イメージ

css
/*フィルターの解除*/
.eye-catch img {
  filter: none;
  -o-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -webkit-filter: none;
}

/*タイトルとタグを絶対位置から相対位置にして多少の余白を設ける*/
h1.entry-title,
.date-tags {
  position: relative;
  top: 0;
  left: 0;
  padding: 0.5em;
  margin-right: 0;
}

/*親要素の高さ指定を解除*/
header.article-header.entry-header {
  height: auto;
}

/*デバイス幅834px以下でも同様にする*/
@media (max-width: 834px) {
  header.article-header.entry-header {
    height: auto;
  }
}

何かご要望や誤りの指摘などがある場合

なにかありましたらTwitter(@9631kunn)などにてご報告いただけると順次ご対応します〜!

コメント

初めまして。

ご要望になるのですが、ブログカードラベルをアイコン表示ではなく、 「関連記事」や「あわせて読みたい」などに変更する事は可能でしょうか?

お忙しい中、大変恐縮ですが、どうぞよろしくお願い致します。

CSS の編集の必要があるかと思います!><

お返事頂きありがとうございます。

先の件、承知致しました。

ありがとうございました。

  • SNSでシェアしよう
  • Twitterでシェア
  • FaceBookでシェア
  • Lineでシェア
  • 記事タイトルとURLをコピー
トップへ戻るボタン

\ HOME /

トップへ戻る