カテゴリー別アーカイブ: STUDIO

STUDIO 画像サイズの調整方法

画像のサイズの調整方法は、2通りあります。

① 画像の端にカーソルをあてスライドさせると変更できます。

② デザインエディター上部のスタイルバーの「横幅」、「縦幅」で変更できます。

STUDIO 画像の配置方法

① デザインエディター左にある追加メニューバーの「画像ボックス」をドラッグ&ドロップで配置します。

② 配置したボックスを「Imgモード」に切り替えます。
(Boxモードは背景化できるボックスとしての要素を持っています。例えば画像の上に文字を重ねたたい場合など)

③ 配置したボックスの上部をクリックすると、エディター左のタブが開きます。
「画像」タブでは、挿入したい画像を検索して配置することができます。
検索は日本語でもOKですが英語の方がヒット数が多いです。
④ではスマホなどで撮った写真を配置する方法を解説します。

また、ドラッグ&ドロップでも配置できます。

④ スマホなどで撮影した写真を配置するには、アップロードボタンをクリックし挿入したい画像をアップロードします。
※ アップロードできるファイル形式は「.png  / .jpg /  .svg / .gif」のみ
(IOS11以降にiphoneの標準フォーマットになった「.HEIC」は使用できないため変換が必要です)
※ ページ表示速度の最適化のため、大きい画像をアップロードするとシステム側で画像サイズを自動圧縮します。

アップロード中の画面です。

アップロード完了すると画像が表示されますので、ドラッグ&ドロップで配置可能です。

STUDIO デバイスによって要素の表示・非表示をする方法

デバイスによって要素の表示・非表示を設定できます。

例)PCでは1の画像、タブレットでは2の画像、スマホでは3の画像を表示させたい

①「基準」(PC)で3枚の画像を設置

② 1の画像を選択しスタイルバー左上の「表示」アイコンをクリックします

デフォルトは全てチェックになっています。
つまり、挿入した画像は全てのデバイスに表示されるということです。
ここで、1の画像は「基準」(PC)でのみ表示をしたいので「タブレット」と「モバイル」のチェックを外します。

タブレットとモバイルともに同様の作業をします。
タブレット:「基準」「モバイル」のチェックを外す
モバイル :「基準」「タブレット」のチェックを外す

これで、デバイスごとに画像を変えることができます。

STUDIO 公開(更新)方法

デザインエディター右上に「公開」ボタンがありますので、クリックします。

「公開」ボタンをクリック後、以下画像のような表示がされますので「更新」ボタンをクリックしてください。

これで更新完了です。
掲載の広告が入りますので「また今度」を選択して終了です。

 

STUDIO レスポンシブ設定(さまざまなデバイスに合わせてデザインを整える)

デザインエディター画面で、レスポンシブ設定ができます。

エディター上部、スタイルバーの「レスポンシブ」タブから「基準」「タブレット」「モバイル」でデザインの調整をします。

 

PCサイズ「基準」を中心に「タブレット」と「モバイル」のデザインの見え方を設定します。
「基準」で作成したデザイン → 「タブレット」、「モバイル」反映
「タブレット」で変更したデザイン→「モバイル」反映
という様に大きいサイズから小さいサイズにデザインが反映されます。

例)
【テキストサイズ】
基準・タブレット・モバイル:288

基準を設定すると、タブレットとモバイルも同じサイズで反映されるので、デバイスサイズに合っていない見た目になります。

そこでレスポンシブ設定
↓  ↓  ↓

【テキストサイズ】
基準:288
タブレット:200
モバイル:150

デバイスごとにテキストサイズを設定すると、見た目が整って読みやすくなります。

STUDIO リッチテキストの入れ方と編集方法

リッチテキストは標準テキストと違い、文章の一部を選択して太字・斜体・打ち消し線・下線・リンクの特殊スタイルをかけることができます。

【テキストの入れ方】
デザインエディター画面の左のツールパネルから「>」をクリック


追加パネルのボックスから「RichText」アイコンをドラッグ&ドロップすると、リッチテキストボックスが配置できます。

 

 

【編集方法】
一部の色を変更する ※下記の方法の手順で、テキストの太さ・サイズ・フォントの変更もできます

1.  色を変更したい箇所を選択します。

 

2. 選択したまま、Boldに一時的にスタイルを変更します。
リッチテキストの外側を一度クリックし、変更を完了させてください。

 

3. Boldにした部分が個別に選択できるようになるので、色を変更します。
※ <strong>の表示で選択できていることが分かります。

 

色の変更は上部のスタイルバー「テキスト」タブからできます。

 

STUDIO 標準テキストの入れ方と編集方法

【標準テキストの入れ方】
デザインエディター画面の左のツールパネルから「テキストボックス」を選択します。
ドラッグ&ドロップで配置できます。

 

【編集方法】
テキストボックス選択時、スタイルバーの「テキスト」タブで、スタイルが編集できます。

編集できるスタイル
・文字間
・行間
・サイズ
・フォント
・太さ
・イタリック
・下線
・色
・シャドウ
・配置
・文字組み

STUDIO 編集したいページの選択方法

編集したいページの選択方法は、主に2通りあります。

① デザインエディター画面の左上のページ名をクリック

② デザインエディター画面の左下のページパネルアイコンをクリック

登録済みのページ一覧が表示されます。編集したいページを選んでください。