WordPressテーマ『十二単』リリース 🎉

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

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

変な食べ物アイキャッチイメージ

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


外観 > カスタマイズ > 追加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;
    }
}

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

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

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

/*フィルターの解除*/
.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: .5em;
  margin-right: 0;
}

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

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

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

お問い合わせにてご報告いただけると順次ご対応します〜!

CTAエリアイメージ

WordPressテーマ『十二単』

無料のWordPressテーマです。絶賛開発中。
詳しくみる

✒️ Writer ✒️

たかさき

しがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。詳しくはこちら

Follow Me:)

COMMENT

はえおーさん

初めまして。

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

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

たかさきさん

デザイン面はすべてカスタマイズから行えるので、カスタマイズにない項目につきましては基本的に実装するにはコードを書いていただく形になるかと思います……。すみません><

たかさきさん

あ、すみません、他の記事に対する質問と勘違いしてしまいました。

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

はえおーさん

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

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

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

コメントする

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。


内容をご確認の上、送信してください。