【Emporio】記事の背景に画像が反映されないようにする方法

公式テーマEmporioでは、記事の画像の一番上のものが記事の背景に反映されます。

オシャレな写真だったら雰囲気がでて良い感じになると思うのですが、当ブログのように解説をメインにしていたりすると不要になってきます。

そこで、本記事ではHTMLの編集でその仕様を削除する方法を解説します。

HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。

HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。

コードを削除しても良いのですが、もしかしたらまた使いたくなるかも……？

不安な時はコメントアウトで、HTMLに情報を残したままにすることが可能です。

コメントアウトは以下のように記します。

これで、コード自体を無効にしながらもHTML内にはメモのように残しておくことができます。

先ず<b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>で検索します。

検索した上の行から数行が該当のコードになります。

<b:if cond='data:view.isSingleItem'>

<b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>

<b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: ".bg-photo" }' name='responsiveImageStyle'/>

</div>

</b:if>

このコードをコメントアウトで無効にします。

コメントアウトしたコードは以下のようになります。

<!--

<b:if cond='data:view.isSingleItem'>

<b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>

<b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: ".bg-photo" }' name='responsiveImageStyle'/>

</div>

</b:if>

-->

これで、背景に記事の画像が反映されなくなります！