[ 解決済 ] Pale トップページ画像の表示領域を小さくしたい

[Katy]

はじめまして。HTMLもCSSもまったく分からない初心者です。
急ぎのことがあり、Lightning Pro/Pale のデモサイトのデータをインストールし、
文章と画像を入れ替えてサイトを作っております。

＜バージョン＞
Lightning Proバージョン: 0.7.2
Lightning Skin Pale　バージョン : 2.3.1

サイトのトップページの画像表示領域をヘッダーメニュー（「当事務所について」から「アクセス」まで）の横幅に
合わせたいのと、高さも今の半分過ぎくらいまでにしたいです。
ちなみにスマホは今のままで大丈夫なので、PCでのみ変更したいです。

こちらのフォーラムで似たようなトピック（#32782）がありチャレンジしましたが
理解できないままあきらめてしまいました。

外観＞カスタマイズ＞追加CSS　まではたどり着けますが、そこで何か書くとかは
まったく分かっていない状況です。

恐れ入りますが表示領域をいじる方法や貼り付けるコードをお教え頂ければ幸いです。
どうぞよろしくお願いいたします。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[DRILL LANCER]

サイトのトップページの画像表示領域をヘッダーメニュー（「当事務所について」から「アクセス」まで）の横幅に合わせたい（PCのみ）

これは下記のいずれかに下記コードを記述することで可能です。

• ExUnit ＞ CSS カスタマイズ
• 子テーマの style.css

@media (min-width: 992px) {
	.slide {
	    width: 940px;
        margin-left: auto;
        margin-right: auto;
        
	}
}

@media (min-width: 1200px) {
	.slide {
	    width: 1140px;
        margin-left: auto;
        margin-right: auto;
	}
}

高さも今の半分過ぎくらいまでにしたいです。（PCのみ）

上記コードを記述することで高さにも変化が生じると思います。
それを確認した後で、画像の不要な部分を使用してトリミングによって調整すると良いでしょう。
モバイルがそのままでOKとのことなので、トリミングしたものを PC 用、現在の画像をモバイル用に登録することになると思います。

P.S.

＜バージョン＞
Lightning Proバージョン: 0.7.2
Lightning Skin Pale　バージョン : 2.3.1

かなり古いバージョンをお使いのようですが、最新版に更新することでもっと使いやすくなると思います。
外観 ＞ カスタマイズ ＞ Lightning ライセンスキー からライセンスキーを入力して「公開」した後、ダッシュボード ＞ 更新 から全て更新できると思います。

ただし、かなりの数を更新するので更新する際は１つ１つ丁寧かつ慎重に更新することをオススメします。

＜現在での最新版＞
WordPress：5.3.2
Lightning Pro: 4.0.3
Lightning Skin Pale： 5.1.3 ( スキンは Pale II を選択することを推奨 )
VK Blocks Pro：0.22.3
VK All in One Expansion Unit：9.11.4.0

• この返信は4年、 9ヶ月前にDRILL LANCERが編集しました。

[Katy]

DRILL LANCER様
大変丁寧にお教えいただきまして本当にありがとうございます。
ExUnit ＞ CSS カスタマイズの場所で、記述いただいたコードを貼り付けたところ
無事に横幅がメニューぴったりとなりました。
高さも画像のトリミングで調整していくとのことでこちらも少しずつ調整をかけながら
納得のいくトップページにしていきたいと思います。
また、バージョンアップのこともお教えいただき恐縮です。
バックアップを取りながら慎重に一個ずつ更新をかけていきたいと思います。

HTML、CSSは難しくて逃げていましたが、
これからサイトに手をかけるうえでは欠かせないことを痛感いたしました。
つまづいたときはまたこのフォーラムでお世話になるかもしれませんが
どうぞよろしくお願いいたします。大変助かりました。本当にありがとうございました。

[投稿者]

投稿