STUDIO つくる

【STUDIO】画像を変更できない!そんな時に試してほしいこと

2021-12-29

STUDIOで作成したページ内の画像を別のものと差し替える場合、画像がある箇所を何度かクリックすると、左側に画像を選択するためのパネルのようなものが出てきます。

しかし、たまに何度画像をクリックしても、いつものように、左側にパネルが現れないことがあります。

キャプチャ画像
画像引用:STUDIO

左側に画像を選択するためのパネルが現れないと、画像の変更を行うことができません。

そこで、今回の記事では画像が変更できないときに試してみてほしいことを紹介します!

画像が変更できない」といった状態でお困りでしたら、ぜひ試してみてください。

いつもの方法で画像変更ができない・・・

いつもなら画像を変更する際、変更したい画像をクリックすると、以下キャプチャのような状態になります。

キャプチャ画像
画像引用:STUDIO

しかし、「画像の変更ができない!」というより、画像を何度クリックしても「画像自体を選択できていない!という状態に出くわすことがあります。

キャプチャ画像
画像引用:STUDIO

このような状態は、ページ上部のトップ画像を編集する際によく見られます。

もし同じような状態になったら、画像をクリックする以外の方法で画像を選択する方法を試してみましょう。

画像が選択できない理由

ページ上部のトップ画像の場合、メニューやページタイトルなど、ページのトップを構成するいくつかの要素(部品のようなもの)が画像の上に重なり、画像を触れない状態になっていることが考えられます。

それでは、さっそく画像をクリックする以外の画像の選択方法を紹介します。

「レイヤー」からの画像の変更方法

画像を選択する一つの方法として「レイヤー」パネルから画像を選択する方法があります。

「レイヤー」パネルを使えば、ページを構成するほぼ全ての要素を選択することができます。

レイヤーとは、地層のようなものです。
STUDIOの場合、ページを構成している要素(部品のようなもの)が、上から順に地層のように重なっています。その層を視覚で確認できるのが「レイヤー」のパネルです。

編集ページ左側に表示されている「」マークをクリックすると「レイヤー」パネルを表示することができます。

先に変更したい画像をクリックしておくと後々操作がしやすいです。

キャプチャ画像
画像引用:STUDIO

上記キャプチャのように、まずは、①変更したい画像をクリックして、②画面左の「」マークをクリックします。

すると、左側に操作パネルが出現するので「レイヤー」のタブを選択。

キャプチャ画像
画像引用:STUDIO

「レイヤー」パネルが表示されると、現在クリックをして選択した要素がハイライトされています。

(上記キャプチャの場合<div>という表示の要素がハイライトされています)

この時点では、おそらく画像を選択することができていないため、ハイライトされた要素の付近(大体は真下)にいる「Fixed Image」をクリックして選択。

キャプチャ画像
画像引用:STUDIO

Fixed Image」の左にある「」をクリックします。

するとFixed Image」の中にある「Image」が現れます。

キャプチャ画像
画像引用:STUDIO

Image」をクリックし、選択します。

すると、画像の左上に小さな「四角」が出現します。

日頃STUDIOで画像の変更作業をしている方は、お馴染みの「四角」です。

キャプチャ画像
画像引用:STUDIO

この「四角」をクリックしてみましょう。

すると、左側に画像を選択する際にいつも使っているパネルが出現します。

キャプチャ画像
画像引用:STUDIO

あとはいつも通りの画像設定

これでSTUDIO側で準備されてた無料素材、自分でアップロードする画像、お好きな画像と変更することができるようになりました。

あとは通常通り、画像変更を行うことができます。

写真を変更する機会があるWebサイト、画像の多いポートフォリオサイトなどで、今回の紹介した方法が役に立つかもしれません。

STUDIOの「使い方」の一つとして、ぜひ参考にしてみてください!

他にもSTUDIOのおすすめの機能や裏技もどんどん紹介していく予定なので、乞うご期待くださいませ。

-STUDIO, つくる