IM-BloomMaker for Accel Platform IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

4.2.7. お知らせ一覧を編集する

下のエリアに配置した「一覧テーブルセット」の部品を編集してお知らせ一覧の見た目を整えます。
  1. テーブルをクリックして選択します。

    ../../../../_images/edit_list_01.png
    図:テーブルをクリック
  2. 「Edit」の列選択アイコンをクリックし、ツールバーの「列を削除」をクリックします。

    ../../../../_images/edit_list_02.png
    図:「Edit」の列を削除
  3. 「Details」の列選択アイコンをクリックし、ツールバーの「列を削除」をクリックします。

    ../../../../_images/edit_list_03.png
    図:「Details」の列を削除
  4. 「Delete」の列選択アイコンをクリックし、ツールバーの「列を削除」をクリックします。

    ../../../../_images/edit_list_04.png
    図:「Delete」の列を削除
  5. 一覧の最後の行の行選択アイコンをクリックし、ツールバーの「行を削除」をクリックします。

    ../../../../_images/edit_list_05.png
    図:行を削除
  6. ヘッダとデータの2行のみになるように他の行も削除します。

    ../../../../_images/edit_list_06.png
    図:操作結果
  7. 「User Code」の列の右上のプラスアイコンをクリックし、列を追加します。

    ../../../../_images/edit_list_07.png
    図:テーブルに列を追加
  8. 1列目のヘッダのラベルをクリックして「F2」キーを押し、テキストを「Date」に変更します。

    ../../../../_images/edit_list_08.png
    図:ラベルを変更
  9. 同様に2列目のヘッダのラベルを「Category」に変更、3列目のヘッダのラベルを「Title」に変更します。

    ../../../../_images/edit_list_09.png
    図:ラベルを変更
  10. 3列目のデータのラベルを右クリックし、右クリックメニューを表示します。

    ../../../../_images/edit_list_10.png
    図:右クリックメニューを表示
  11. 右クリックメニューから「部品を差し替え」>「ハイパーリンク」をクリックします。

    ../../../../_images/edit_list_11.png
    図:部品の差し替え
  12. 1列目のデータのラベルを「2024/06/01」に変更します。

    ../../../../_images/edit_list_12.png
    図:ラベルを変更
  13. 2列目のデータのラベルを「Notice」に変更します。

    ../../../../_images/edit_list_13.png
    図:ラベルを変更
  14. 3列目のデータのラベルを「Important Notice」に変更します。

    ../../../../_images/edit_list_14.png
    図:ラベルを変更
  15. 3列目のデータのラベルを右クリックし、右クリックメニューの「大きさ」>「手動設定」をクリックします。

    ../../../../_images/edit_list_15.png
    図:ラベルの大きさを変更
  16. 一度テーブルをクリックしてからデータの1行目の行選択アイコンをクリックし、ツールバーの「行を複製」をクリックします。

    ../../../../_images/edit_list_16.png
    図:テーブルの行を複製
  17. 上記の操作を繰り返して、一覧のデータの行数を10行にします。

    ../../../../_images/edit_list_17.png
    図:操作結果
  18. データの1行3列目のラベルをクリックして選択します。

    ../../../../_images/edit_list_18.png
    図:ラベルを選択
  19. データの1行3列目のラベルを右クリックし、右クリックメニューの「部品エリア」>「右に部品を追加」をクリックします。

    ../../../../_images/edit_list_19.png
    図:部品を追加
  20. 追加した部品の「その他」のパネルをクリックして部品選択ダイアログを表示します。

    ../../../../_images/edit_list_20.png
    図:その他のパネルをクリック
  21. 「その他」>「ラベル」を選択して「決定」ボタンをクリックします。

    ../../../../_images/edit_list_21.png
    図:部品選択ダイアログ
  22. 追加したラベルを右クリックし、右クリックメニューの「大きさ」>「手動設定」をクリックします。

    ../../../../_images/edit_list_22.png
    図:ラベルの大きさを変更
  23. 追加したラベルのテキストを「NEW!」に変更します。

    ../../../../_images/edit_list_23.png
    図:ラベルを変更
  24. 「NEW!」のラベルを右クリックし、ツールバーの「文字色」の右側の三角アイコンをクリックします。

    ../../../../_images/edit_list_24.png
    図:ツールバー
  25. 表示されたカラーピッカーの赤色をクリックします。

    ../../../../_images/edit_list_25.png
    図:カラーピッカー
  26. そのままツールバーの「位置調整」をクリックします。

    ../../../../_images/edit_list_26.png
    図:位置調整をクリック
  27. 部品の左側のハンドルをドラッグ&ドロップし、左のラベルと10pxから20pxぐらいの余白を作ります。

    ../../../../_images/edit_list_27.png
    図:部品の位置調整
  28. データの1行3列目の「Important Notice」のラベルをクリックして選択します。

    ../../../../_images/edit_list_28.png
    図:ラベルを選択
  29. Ctrl キーを押しながら「NEW!」のラベルをクリックして選択します。

    ../../../../_images/edit_list_29.png
    図:ラベルを追加選択
  30. 選択したラベルの上で右クリックし、ツールバーの「太字」をクリックします。

    ../../../../_images/edit_list_30.png
    図:ラベルを太字にする
  31. 一度テーブルをクリックしてから「Date」の列の右上の三角アイコンをドラッグ&ドロップして列の横幅を小さくしてください。

    ../../../../_images/edit_list_31.png
    図:「Date」の列の横幅を調整
  32. 「Category」の列の右上の三角アイコンをドラッグ&ドロップして列の横幅を小さくしてください。

    ../../../../_images/edit_list_32.png
    図:「Category」の列の横幅を調整
  33. 「Title」の列の右上の三角アイコンをダブルクリックしてください。

    ../../../../_images/edit_list_33.png
    図:「Title」の列の横幅を調整
  34. テーブルの上で右クリックし、右クリックメニューの「テーブルコンテナ」>「枠線」をクリックしてください。

    ../../../../_images/edit_list_34.png
    図:テーブルの枠線を非表示にする
  35. お知らせ一覧が以下のようになっていることを確認してください。異なっている場合は上記の手順を確認してください。

    ../../../../_images/edit_list_35.png
    図:完成見本
以上でお知らせ一覧の調整は完了です。
次節「その他の部品を調整する」では、その他の部品の見た目を調整します。