herohoroブログ

Homeに画像を中央揃いで追加する_意外と大変



🔄   2023-03-14

とにかくVSCodeでコードをいじったら、

git add -A
git commit -m "変更点メモ"
git push -u origin master   ////ローカルリポジトリーとリモートリポジトリー同期/////

これをやればVercelにも反映することが分かったので、

変更👉上記コマンド👉変更

を繰り返して作業を進められる段階になりました。

開発2日目の続き。

image block

👆これに画像を入れます\(^o^)/

中央寄せで画像を入れたい

画像はpublicフォルダーへ収納

image block

収納した画像を使用するために、src/pages/index.jsで定義

image block
import Image from 'next/image'

src/pages/index.jsで任意の場所に記述 

image block
<Image
  src="/image.jpeg"
  //layout="fill" これだと画面いっぱいになってしまうのでOFF
   width={300}
   height={300}
   objectFit="contain"
/>

👆参考にした記事

これだと左端に寄った状態になってしまう。。。

image block

中央揃いにするためにプチ改造(同じくsrc/pages/index.js)

image block
<div style={{display: "flex",justifyContent: "center"}}>
   <Image src="/image.png" width="300" height="300" objectFit="contain"/>
</div>

👆参考にした記事

できたー(*^^*)

image block

記事にするとすごく簡単に思われますが、実際これに5時間かかりました。😂

英語をちょいと読もうとするだけで得られる情報が変わってくるので、

今後も困りに困ったら英語読むように努力します( ゚д゚)ハッ!


Xではたま〜にする更新のお知らせを行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/