このセクションの記事

STORM Xe：バナーの大きさを変更したい

Avatar
エージェント
  • 更新

知りたい事

バナーの大きさを変更する事はできますか？

バナー大きさ.png

 

回答

STORM Xeの標準機能では、バナーのサイズは変更できません。
高度デザインカスタマイズ機能を利用することにより、バナーのサイズを変更できます。

※注意※

高度デザインカスタマイズ機能は、STORM Xeのライセンスのグレードが「エキスパート」でご契約のお客様にのみご利用いただける機能です。「バリュー」および「レギュラー」のグレードをご利用のお客様はご利用いただけません。


ご利用中のライセンスのグレードは、STORM Xeを起動し、左上の【ライセンス】にカーソルを合わせ、【ライセンス情報】からご確認いただけます。

ライセンス.png

ライセンスを確認する詳しい手順は こちら からご確認ください。

 

高度カスタマイズ機能でバナーサイズを変更する手順

  1. STORM Xeでコンテンツデータを書き出します。

    書き出し.png

  2. LOGOSWAREローカルビューアーでコンテンツを開きます。

    デザインカスタマイズは、ブラウザでコンテンツを確認しながら行いますが、書き出しファイルはブラウザでは直接開けません。LOGOSWAREローカルビューアー（無料：ダウンロードは こちら ）を利用すると便利です。

    ・ 書き出したコンテンツを「LOGOSWAREローカルビューアー」にドラッグ＆ドロップして開きます。

    ローカルビューアー.png

     

  3. 書き出したコンテンツデータ内の、 カスタマイズCSSファイルを編集してデザインを確定します。 

    書き出したコンテンツデータ内のカスタマイズCSSファイルを編集し、ブラウザでプレビューしながらデザインを作成します。 

    ▼CSSファイルの編集手順

    ①css/custom.css をテキストエディタで開きます。

    custom ｃｓｓ.png

    ②ファイルの一番下に以下のコードを追記してください。

    ※希望のサイズ（例：幅240px、高さ 120px）に合わせて数値を変更します。

    =====================================

    /* --- ここから追記 --- */

    /* custom.css の末尾に追記 */

    /* 1. バナー表示エリア（枠）を拡大する */
    #stormImage {
       width: 240px !important;  /* ← 枠の幅 */
       height: 120px !important; /* ← 枠の高さ */
    }

    /* 2. バナー画像本体を拡大し、枠内に配置する */
    #stormImage img {
       width: 240px !important;  /* ← 画像の幅 */
       height: 100px !important; /* ← 画像の高さ */
       
       /* 枠内で画像の位置を調整 */
       left: 10px !important; 
       top: 10px !important;
    }

    /* --- 追記ここまで --- */

    =====================================

    ③css/custom.cssを上書き保存し、再度ローカルビューアーでプレビューします。

    修正が必要であれば再度①～③の手順繰り返し、調整します。

     

    解決しない場合は？

    本記事でご案内している内容で解決ができなかった場合は「解決できない場合は？」をご確認ください。

関連記事