【あきばれホームページ】

 OEMパートナー サポートサイト

運営:株式会社WEBマーケティング総合研究所
〒160-0023 東京都新宿区西新宿8-1-2-3F

休業日:土曜・日曜・祝日

E-Mail   partner@akibare-hp.jp

パートナー窓口はこちら

03-5388-5985

受付時間 平日9:30~11:30、13:30~17:00

「メイン画像にキャッチコピーを入力できる」部品

▼こんなことが出来ます。

◆部品の挿入手順
  1. 上パネルの「部品を追加」をクリック
  2. 「ヘッダー・フッター・サイドエリアにも追加」をクリック
  3. 「ここに追加」をクリック(ヘッダーエリア)
  4. 「ヘッダー部品」から「画像(ワイド)+文章」を選択

◆写真の高さの変更(縦幅のトリミング)

右パネルの「部品デザインの変更」ボタンから、高さを変更できます

高さが低くなりました。

縦幅をオーバーした分は下から切り取られます。

◆キャッチコピーの表示位置を変更

「縮める」ボタンで、キャッチコピーを上部へ移動

◆キャッチコピーの背景デザインの選択

キャッチコピーの要素をクリックし、右パネルの「要素デザインの変更」をクリック。

こうなります

◆この部品でできること(上掲を含む)
  • 写真の高さの変更
  • キャッチコピーの表示位置を変更
  • キャッチコピーの背景デザインの選択
  • 文字サイズ、文字色の変更
  • キャッチコピーの右寄せ、左寄せ、センタリング
  • キャッチコピーへのリンク設定
  • キャッチコピーの追加
  • スマホ表示のON/OFF
  • オリジナル画像を背景画像としてアップロード(詳細は以下をご覧ください)
◆オリジナル画像のアップロード

この部品「画像(ワイド)+文章」へは、利用者が用意したオリジナルの画像を背景画像としてアップロードすることが出来ます。

◆この部品にアップする画像の仕様
パソコン表示編

配置について

  • アップロードした画像は、「上寄せ」&「中央寄せ」で配置されます。

事前のサイズ調整について

  • この部品では、アップロードした画像の「そのままの」サイズで表示されます。
  • そのため、(他の部品のように)大きめの画像をアップロードする必要はありません。

表示領域

  • 横幅の上限:ディスプレイ横幅
  • 縦幅の上限:200px/300px/400px/500px/600px の5段階で設定可能。
▼パソコン表示 2000 × 400 の画像をアップ

▼パソコン表示 1300 × 500 の画像をアップ

▼パソコン表示 300 × 300 の画像をアップ

 ヒント

  • 大きいディスプレイを想定して、画像の横幅を1920px~2000pxでアップすると、完全にぶち抜いた感じになります。
  • 縦幅をオーバーした分は下から切り取られます。設定する縦幅の上限に合わせた範囲で切り取ってから画像をアップロードしてください。
スマホ表示編

配置について

  • アップロードした画像は、「上寄せ」&「中央寄せ」で配置されます。

サイズ調整について

  • PC表示用にアプロードした画像について、スマホのディスプレイの大きさに合ったサイズに自動で調整されます。
  • PC表示と画像を共有しているため、スマホ表示だけにターゲットを絞って事前のサイズ調整を行うことは出来ません。

表示領域

  • 横幅の上限スマホのディスプレイ幅(=ブラウザ幅)です。スマホの機種や、端末を縦にするか横にするかで変わってきます。
  • 縦幅の上限選択した縦幅によって異なります。

PCで 200px を選択 → スマホでは 61px

PCで300px を選択スマホでは 92px

PCで400px を選択 スマホでは 123px

PCで500px を選択スマホでは 153px

PCで600px を選択 スマホでは 184px

 

▼スマートフォンでの表示
2000 × 400 の画像

1300 × 500 の画像

300 × 300 の画像

 ヒント

ロゴマークやキャッチコピーなどを、あらかじめ画像に埋め込んでからアップロードした場合に、スマホ表示では見せたい部分が画面から見切れてしまうことがあります。

スマホでも見せたい部分は、PCで[サイドエリア+メインエリア]の幅の間に配置すると、スマホでも見切れずに表示されます。

[サイドエリア+メインエリア]の範囲にロゴやテキストを配置する

「販促・制作支援サイト」もご活用ください

「販促支援サイト」「制作支援サイト」では、弊社が今まで培ってきた経験やノウハウに基づいて、ホームページの販促・制作をご支援するための情報を提供しています。

ぜひご一読いただき、パートナー業務にお役立てください。