--- title: リッチエディタで画像の配置を設定できますか？ description: リッチエディタ内で画像の配置（左寄せ、右寄せ、中央寄せなど）を直接設定することはできません。 --- [コンテンツまでスキップ](https://help.microcms.io/ja/knowledge/richeditor-image-position#main-content) [![logo.png\]](https://help.microcms.io/hs-fs/hubfs/logo.png?width=150&height=34&name=logo.png)](https://microcms.io/) メインナビゲーションを開く メインナビゲーションを閉じる キーワードから探す - 検索フィールドが空なので、候補はありません。 1. [ヘルプ](https://help.microcms.io/ja/knowledge?hsLang=ja) 2. [機能](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja) 3. [リッチエディタ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%AA%E3%83%83%E3%83%81%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF) # リッチエディタで画像の配置を設定できますか？ ## リッチエディタ内で画像の配置（左寄せ、右寄せ、中央寄せなど）を直接設定することはできません。 リッチエディタ内で画像の配置（左寄せ、右寄せ、中央寄せなど）を直接設定することはできません。 しかし、繰り返しフィールドとカスタムフィールドを利用して、サイト側の実装で画像の配置を調整することは可能です。 ### 実装例 #### 1. カスタムフィールドの設定 まず、以下のように[カスタムフィールドを設定](https://document.microcms.io/manual/custom-field)します。 ![](https://help.microcms.io/hs-fs/hubfs/CleanShot%202024-08-14%20at%2015-35-27-png.png?width=688&height=260&name=CleanShot%202024-08-14%20at%2015-35-27-png.png) - `content`にはリッチエディタのみ設定します。 - `imageCenter`、`imageRight`には画像フィールドのみ設定します。 ※左寄せの画像については`content`のリッチエディタ内で設定できるため省略しています。 #### 2. APIスキーマの設定 次に、以下のように[APIスキーマを設定](https://document.microcms.io/manual/api-model-settings#hbf58befd50)します。 ![](https://help.microcms.io/hs-fs/hubfs/CleanShot%202024-08-14%20at%2015-40-06-png.png?width=688&height=396&name=CleanShot%202024-08-14%20at%2015-40-06-png.png) - `title`には記事のタイトルを入力するためのテキストフィールドを設定します。 - `body`には繰り返しフィールドを設定し、先ほど作成した`content`と`imageCenter`、`imageRight`を選択します。 コンテンツを入稿し、リクエストすると以下のようなレスポンスになります。 ```   "title": "記事のタイトルが入ります",  "body": [    {      "fieldId": "content",      "richEditor": "

見出しが入ります

テストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト

テストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト

"    },    {      "fieldId": "imageCenter",      "image": {        "url": "https://images.microcms-assets.io/assets/xxxxxx/yyyyyy/1200x800.png",        "height": 800,        "width": 1200      }    },    {      "fieldId": "imageRight",      "image": {        "url": "https://images.microcms-assets.io/assets/xxxxxx/yyyyyy/1200x800.png",        "height": 800,        "width": 1200      }    }  ]} ``` #### 3. フロントエンドの実装 `fieldId`の値を使用して、各コンポーネントを条件に応じて出し分けます。 具体的には、`body`内の各項目の`fieldId`の値に応じて、適切なコンポーネント（リッチエディタ、中央寄せ画像、右寄せ画像）を表示します。 **[Next.js](https://nextjs.org/docs)と[Tailwind CSS](https://tailwindcss.com/)を利用した実装例** ``` export default async function NewsDetail() {  const data = await client.getListDetail({    endpoint: 'news',   contentId:'contentId'  })  const { title, body } = data  return (  
   

{title}

     
       {body.map((item, i) =>          item.fieldId === 'content' ? (                      ) : item.fieldId === 'imageCenter' ? (                      ) : item.fieldId === 'imageRight' ? (                      ) : null        )}     
   
  )}/* 中央寄せの画像を返却するコンポーネント */function ImageCenter({ image }) {  return (   
         
  )}/* 右寄せの画像を返却するコンポーネント */function ImageRight({ image }) {  return (   
         
  )}function RichEditor({ content }) {  return
} ``` このように、繰り返しフィールドとカスタムフィールドを利用し、`fieldId`の値に応じてコンポーネントを切り替えることで、画像の配置を調整できます。 - [アカウント](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#main-content) - [ログイン](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3) - [登録／変更／削除](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#%E7%99%BB%E9%8C%B2%E5%A4%89%E6%9B%B4%E5%89%8A%E9%99%A4) - [その他](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#%E3%81%9D%E3%81%AE%E4%BB%96) - [機能](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#main-content) - [コンテンツ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84) - [リッチエディタ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%AA%E3%83%83%E3%83%81%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF) - [コンテンツAPI（GET）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84apiget) - [コンテンツAPI（WRITE）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84apiwrite) - [マネジメントAPI](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%9E%E3%83%8D%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88api) - [Webhook](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#webhook) - [インポート / エクスポート](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88-%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88) - [API設定](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#api%E8%A8%AD%E5%AE%9A) - [レビュー](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC) - [メディア（画像/ファイル）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E7%94%BB%E5%83%8F-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB) - [メンバー](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC) - [権限](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E6%A8%A9%E9%99%90) - [複数環境](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E8%A4%87%E6%95%B0%E7%92%B0%E5%A2%83) - [セキュリティ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3) - [その他](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%81%9D%E3%81%AE%E4%BB%96) - [実装（全般）](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#main-content) - [トラブルシューティング](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0) - [ユースケース別の実装方法](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#%E3%83%A6%E3%83%BC%E3%82%B9%E3%82%B1%E3%83%BC%E3%82%B9%E5%88%A5%E3%81%AE%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95) - [API](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#api) - [Webhook](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#webhook) - [インフラ](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9) - [実装（言語／フレームワーク）](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E8%A8%80%E8%AA%9E%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF?hsLang=ja#main-content) - [JavaScript](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E8%A8%80%E8%AA%9E%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF?hsLang=ja#javascript) - [Next.js](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E8%A8%80%E8%AA%9E%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF?hsLang=ja#next-js) - [お支払い](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#main-content) - [従量課金](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E5%BE%93%E9%87%8F%E8%AA%B2%E9%87%91) - [プラン変更](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E3%83%97%E3%83%A9%E3%83%B3%E5%A4%89%E6%9B%B4) - [解約](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E8%A7%A3%E7%B4%84) - [請求書](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E8%AB%8B%E6%B1%82%E6%9B%B8) - [支払いサイクル](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E6%94%AF%E6%89%95%E3%81%84%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB) - [ご契約](https://help.microcms.io/ja/knowledge/%E3%81%94%E5%A5%91%E7%B4%84?hsLang=ja#main-content) - [Hobbyプラン](https://help.microcms.io/ja/knowledge/%E3%81%94%E5%A5%91%E7%B4%84?hsLang=ja#hobby%E3%83%97%E3%83%A9%E3%83%B3) - [Enterpriseプラン](https://help.microcms.io/ja/knowledge/%E3%81%94%E5%A5%91%E7%B4%84?hsLang=ja#enterprise%E3%83%97%E3%83%A9%E3%83%B3) - [セキュリティ](https://help.microcms.io/ja/knowledge/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3?hsLang=ja#main-content) - [シングルサインオン](https://help.microcms.io/ja/knowledge/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3?hsLang=ja#%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%AA%E3%83%B3) - [既知の不具合](https://help.microcms.io/ja/knowledge/%E6%97%A2%E7%9F%A5%E3%81%AE%E4%B8%8D%E5%85%B7%E5%90%88?hsLang=ja#main-content) - [旧リッチエディタ](https://help.microcms.io/ja/knowledge/%E6%97%A2%E7%9F%A5%E3%81%AE%E4%B8%8D%E5%85%B7%E5%90%88?hsLang=ja#%E6%97%A7%E3%83%AA%E3%83%83%E3%83%81%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF) - [その他](https://help.microcms.io/ja/knowledge/%E3%81%9D%E3%81%AE%E4%BB%96?hsLang=ja) 株式会社microCMS