当ブログの検索キーワードを見ていますと「らくうるカート html トップ画像大きく」というものがありました。

検索主がその後目的を果たせたのかは存じませんが、今日は久し振りに早く仕事が片付いたので気まぐれに解決法を書いておきます。

なお、「HTML初心者だけど自力で編集したい！」 と検索を繰り返しているだろう人に向けて書きました。
基本的なことしか書きませんので、込み入ったことを調べている方には肩透かしになります。ご注意ください。 

余談ですが、帰り道自分以外にも帰宅途中の人がいたので不思議に思っていたのですが、そういえば今日はプレミアムフライデーなんですね。自分には関係なさすぎて忘れていました。プレミアムフライデーを経験したのは人生初めてかも。

解決策・トップに大きな画像が入りそうなテンプレートを選ぶ

一番手っ取り早い解決策はこれでしょう。
らくうるカートのテンプレートは種類は貧弱ですが、テーマごとにデザインが分かれているのでイメージに近いものも見つけやすいです。

残念ながら ” トップに大きな画像が入るテンプレート” はないのですが（執筆時時点）、”トップに大きなスライドが入るテンプレート（T14C-0x）” があったのでこれを流用すれば良いと思います。

T14C-0x系のテンプレートを利用したデモ画面 → https://image.raku-uru.jp/documents/demo/yt00020/index.html

 トップスライド部分に画像を差し込む

T14C-0xテンプレートを追加したら、

で、テンプレートのHTML編集画面を表示。

編集画面冒頭の「キービジュアル」に挟まれている部分がスライドを表示している部分なので、そこに好きな画像URLを差し込んでやれば完成です。

<!--キービジュアル▼ -->

<img src="好きな画像のURL" width="横" height="たて" alt="画像の説明" />

<!--キービジュアル▲-->

注意点としては、テンプレートはレスポンシブデザインに対応しているので画像の幅を調整しておかないと、モバイル端末で見たとき画面幅に入りきらないなんて事態もありえます。

width, height属性でちゃんと画像サイズを指定しておいてあげましょう。

画面幅いっぱいに表示したい場合

もし、検索主の言う「トップ画像大きく」がモニター幅いっぱいの表示をしたいという場合なら、cssの調整が必要になります。

先ほどのテンプレートの場合、サイト全体を #wrapper で最大幅1040pxに指定しているので、そのままだとパソコン表示のときは1040px以上に大きな表示はできず幅いっぱいになりません。

ですので、CSSで#wrapper と #header をmax-width:100%; にして、コンテンツ部分だけ適当に最大幅を整えておくと良いでしょう。

/*あくまで一例です。*/
/*万一のときにすぐ戻せるように、必ず元のコードを保存しておいてから、自己責任で編集してください*/

#wrapper,
#header{
　max-width:100%;
}

#container{
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

左右のバランスや、モバイル端末での表示がおかしくならないように、デフォルトのcssがどういう指定をしているのか各自の責任においてあらかじめ、しっかりとご確認ください。

また、万一表示がおかしくなったときにすぐ戻せるように最初のcssファイルは必ず保存しておきましょう。

ご自身での編集作業が難しければ、弊社でも「軽微なカスタマイズ（4,000 ~ 10,000円 + 税）」としてお受けできますのでお気軽にご相談ください。