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

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

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

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


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

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

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

3 COMMENTS

山田さん

takasakiさんのスキン、ホワイトラーメンを使わせていただいています。
ホーム画面を作りたくて、タイトルやアイキャッチ画像を消すことはできたのですが、
画像の上部の余白がせまくできません。余白を狭くするCSSを外観→カスタマイズ→追加CSSに書き込んだり、テーマエディターでCocoon Child: スタイルシート (style.css)
に書き込んだりしたのですが、うまくいきませんでした。
初心者の質問で大変恐縮ですが余白を狭くする方法を教えていただけると幸いです。

返信する
たかさき

いただいたコメントから想像したことなので解決するかは分からないのですが……

おそらく記事のヘッダー部分のheightが残っているために仰っているような状態になっているのかと思われます。

一番手取り早いのは、
header.article-header.entry-header {
display: none;
}
を追加CSSにコピペし、記事ヘッダーを非表示にしてしまう方法です(ただし、その場合はアイキャッチ下のシェアボタンなども併せて非表示になりますのでご注意ください)。

上記で解決しなかった場合、差し支えなければなのですが、コメントの際にご入力いただいたアドレス宛にメールをお送りいたしましたので、問題の起こっているページのURLを返信にてお送りいただけたら直接見てみます。(上記で問題解決しておりましたら大丈夫です!)

返信する
山田由香里

分かりづらい質問でしたのに回答ありがとうございます!
教えて頂いたものを追加CSSに入れてみたのですが、解決しませんでした( ;∀;)
アドレスのほうにメールを送って頂けるという事で、大変恐縮ですがよろしくお願い致します。
ありがとうございます。

返信する

コメントを残す

メールアドレスが公開されることはありません。