コースアクティビティで画像をフォーマットする方法 - Leadership Academy

この記事では、現在の機能、ベストプラクティス、ヒントなど、コースアクティビティを構築するときに画像をフォーマットする方法を説明します。

画像フォーマットに関するプラットフォームの機能

現在、プラットフォームでは、アクティビティの「Build（構築）」ページの「Description（説明）」セクションに画像をアップロードするときに、「Alignment（配置）と「Size（サイズ）」という2つのオプションがあります。 コースアクティビティを構築する方法をご覧ください。

  • 配置: 現在、左配置と右配置の両方が利用可能です。これを選択すると、画像がコースプレーヤーの左側または右側に自動的に配置され、画像の周りにテキストがフォーマットされます。画像を中央揃えにしたい場合は、以下のセクションの手順に従います。
  • サイズ: 大（ページ幅の100%、または1080ピクセル）、中（ページ幅の50%、または540ピクセル）、小（ページ幅の25%、または270ピクセル）が使用可能です。画像の幅が選択したオプションよりも広い場合、選択したサイズに合わせて再フォーマットされます。これは、視認性に影響し、画像がぼやけたり、粗くなったりする可能性があります。 

コースアクティビティに画像をアップロードする際のヒント

  • アクティビティを構築するときは2つのブラウザータブを使用します。1つは「Build（構築）」ページ用、もう1つはコースアクティビティの学習者ビュー用です。これにより、学習者の視点からコースプレーヤーでアクティビティがどのように見えるかを頻繁に確認し、更新することができます。
  • 学習者はさまざまなデバイスや画面サイズを使用してコースを視聴することに注意してください。お使いの画面上でのフォーマット設定は、すべての学習者のそれとは異なる可能性があります。
  • これはベストプラクティスではありませんが、目的のフォーマット設定に応じて、「Description（説明）」セクションのテキストの周囲でEnterキーを必要な回数だけ押すことで、テキストが画像の周りで折り返されないようにすることができます。画像が小さく、左揃えまたは右揃えの場合、テキストは自動的に画像の左または右に配置されます。これは、テキストを画像の下に移動したい場合に実装できるオプションです。他のデバイスを使用している学習者は、アクティビティを表示するときに見た目が異なる可能性があることに留意してください。

画像を中央揃えにする方法

1. コースアクティビティの「Description（説明）」セクションに画像をアップロードします。

2. アップロードしたら、「Description（説明）」セクションの上部にある「Source Code（ソースコード）」アイコンをクリックします。

source code icon.png
3. 画像のコードを特定します。次のようになりますが、配置、幅、サイズは異なる場合があります。 
    <img src="imagename.png or imagename.jpg, etc" alt="None" width="540" height="479" />

4. このコードの直前、つまり「<img class」の左側に、「<center>」と入力します（引用符は含まれません）。コードの直後、つまり「/>」の右側に、「</center>」と入力します。これは次のようになります。 <center><img src="imagename.png or imagename.jpg, etc" alt="None" width="540" height="479" /></center>

5. コードの配置部分、つまり「image-left」または「image-right」と書かれている部分を見てください。これを「image-center」に変更します。コードは次のようになります。

<center><img src="imagename.png or imagename.jpg, etc" alt="None" width="540" height="479" /></center>

6.「 OK」をクリックします。画像は「Description（説明）」セクション内の中央に移動しているはずです。アクティビティの「Build（構築）」ページの下部にある「 Update（更新） 」をクリックします。

7. 別のブラウザーウィンドウを使用して学習者の視点からアクティビティを表示し、画像が正しく表示されていることを確認します。 

関連記事

お問い合わせ