はてなブログ人気テーマ「zeno-teal」で記事の画像背景が変な場合の原因と対処法を解説!

f:id:conartist:20170622092739j:plain

やっほー!よっく(@yokku49)です

今日は僕がブログのカスタマイズで困らされたことについて話すよ!

今回困ったのは「記事の画像背景が変になってしまう」ことだ

どういうことかというと・・・

f:id:conartist:20170622092739j:plain

上の写真は前回の記事で使った画像なんだけど、なんか背景の真ん中に変な文字「en」、背景全体に「ひし形」のマークが入っちゃってるよね・・・

 

なんかイヤ!!!

 

というわけで今回はこの現象の原因と対処法を解説するよ!

 

ちなみに僕が使っているはてなブログのテーマ「zeno-teal」が大人気なことは以前記事にしたよ!

www.yokuyoku.com

 

 

記事の画像背景が変な場合の原因とその対処法

 

 

記事の画像背景が変になる原因①

 

まず確認なんだけど、zeno-tealでは記事画像の背景にもともと下の画像が設定されていて

f:id:conartist:20170622101832g:plain

 

 この画像の上に自分が設定した画像が乗っかって表示される

 

で、この設定する画像にはいくつか種類がある

 

有名なのは

 

jpeg」と「png」だ

 

この2つには決定的な違いがある

 

jpeg」は「背景入りの画像」となり

 

png」は「背景無しの画像」が作れる

 

という違いだ

 

今回記事の画像背景が見えてしまった原因は自分が設定した「子供の画像」が「背景無しのpng形式」だったからなんだ!

 

だから子供たちの脇から背景画像が見えちゃってたんだ

 

 

対処法①

 

記事の画像には「jpeg」形式を指定しよう!

 

jpeg」は背景が付いているから、結果的にデフォルトの画像を隠すことが出来るよ!

 

背景が透過する画像形式「png」を記事で使う場合は要注意だよ!

 

 

 

記事の画像背景が変になる原因②

 

 

元々記事の画像背景が設定されているのこと自体が問題

 

記事の背景画像が無ければ背景が透過する画像形式「png」でも問題ないんじゃない?!

 

対策法②

 

記事画像の背景として元々設定されている上の画像を無くしてしまえばイイ!というわけで、今からデフォルトの背景画像を無くす方法を説明するよ!

 

やり方はテーマ作者さんのブログに詳しく書いてあります!

記事に画像がない時に表示されるデフォルト画像を変更する方法 - ZENO-TEAL

それでは説明するぞ!

 

 

①まずはダッシュボードのデザインをクリック!

 

f:id:conartist:20170622105216j:plain

 

 

②「工具マーク」をクリック!

 

f:id:conartist:20170622115652j:plain

 

 

③「{}デザインCSS」をクリック!

 

f:id:conartist:20170622105503j:plain

 

 

④「{}デザインCSS」の部分をクリックして一番下に「以下のコード」を貼り付けよう!
.page-index .entry-content{
background-image:url(http://img.f.hatena.ne.jp/images/fotolife/c/c-miya/20170503/20170503072027.png);
}

 

 

⑤最後に「変更を保存する」を押し忘れない様に!

f:id:conartist:20170622120324p:plain

 

 

まとめ

 

ブログのカスタマイズ、楽しいよね

 

皆のカスタマイズ方法も教えてくれよな!

 

みんなのブログライフに少しでもお役に立てたら嬉しいです♪

 

じゃ、また明日!