ページをデザインする★パーツパレットの使い方

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

パーツパレット

必要な要素(パーツ)は、パーツパレット(右図)に用意されています。

 

たとえば、「見出し」や「文章」「写真付き文章」「表組」などの他にも、「フォーム」「Googleマップ」「YouTube」など、たくさん用意されています。

 

パーツパレットの表示の仕方

 

すでにページの中に、文章や写真などがある場合、そこにマウスポインタを乗せると、左に「上下矢印・ゴミ箱・プラスマーク」が表示されているタブが現れます。

 

新規ページの場合は、このすぐ下の図にありますように、「+新項目を追加」ボタンがページの左上にありますので、クリックして、「パーツパレット」を表示してください。

 

プラスマークをクリックすると、「パーツパレット」が表示されますので、必要なメニューを選んでクリックします。

 

上下矢印は、その要素を1クリックにつき、ひとつずつ上と下へ移動できます。

 

ゴミ箱は、その要素を削除します。ゴミ箱マークをクリックすると、その要素は赤枠で囲まれて「この項目を削除してもよろしいですか?」と聞かれますので、削除の場合は「はい、削除します。」ボタンをクリック。中止する場合は「閉じる」をクリックします。

 

 

新規ページの場合は、「+新項目を追加」ボタンがページの左上にありますので、クリックして、「パーツパレット」を表示してください。

パーツメニュー

見出し

見出しを入力して、3種類のどれかを選びます。初期設定では、見出し1がいちばん大きく、順に小さくなります。この3種類はページ右上のアイコンメニュー にある「A」のスタイルにある「フォント設定」で設定できます。詳しくは、このページの下のほうにある「フォント設定」をご覧下さい。

 

入力したら、「保存」ボタンを押してください。

「保存」をしないで、他の場所に移動して作業をしますと、作業した分が消えてしまいますので、ご注意ください。

 

 

 

 

文章

文章を入力して、必要なところを、

選択して、「B(ボールド)」をクリックして、太字にします。

 

選択して、「A」をクリックして、色のパレットを表示して、文字に色を付けます。

 

選択して、右揃え、左揃え、センター揃えを選び、揃えを変更します。

 

選択して、鎖(チェーン)のマークをクリックして、リンクを設定します。

 

入力したら、「保存」ボタンを押してください。

「保存」をしないで、他の場所に移動して作業をしますと、作業した分が消えてしまいますので、ご注意ください。

 


 

 

 

 

写真

これは、写真などの画像だけをレイアウトするパーツメニューです。

※文章も一緒にレイアウトしたい場合は、「写真付き文章」のパーツメニューを選んでください。

 

「選択」ボタンで、自分のパソコンの中が表示されますので、アップロードしたい画像を選んで「開く」をクリックすると、設定ウインドウにその画像が配置されます。

自動的に、このページのコンテンツの表示幅の3分の1くらいの幅で表示されます。

 

さらに拡大したいときは、「+」を、縮小したいときは「ー」をクリックします。希望の大きさになるまでクリックを繰り返します。

 

コンテンツ表示幅いっぱいに表示したい場合は、左右の矢印マークをクリックします。

 

画像の位置は「コンテンツの配置」で、左、真ん中、右を選ぶことができます。

 

「拡大」は、表示されている写真をクリックして、別ウインドウで拡大画像を表示したいときの設定です。「拡大」を1回クリックするだけで設定完了です。

 

配置できる画像の種類は、「JPEG」「GIF」「PNG」の3種類です。

 

写真を配置したら、「保存」ボタンを押してください。

 

完了したら、「保存」ボタンを押してください。

「保存」をしないで、他の場所に移動して作業をしますと、作業した分が消えてしまいますので、ご注意ください。


 

 

 

 

写真付き文章

 「文章」「写真」の設定が、ひとつのウインドウの中にあります。

文章の場合は「文章を編集」の帯を、写真の場合は「画像を編集」の帯をクリックします。どちらを先に設定してもかまいません。

それぞれの設定は、上記の説明と同じです。

 

写真の位置は初期設定では、左ですが、「コンテンツの配置」で右も選べます。

 

「サイズ」のプラス、マイナス、左右矢印マークで、大きさを決めることが出来ます。

プラスマークは、拡大。

マイナスマークは縮小。

左右矢印は、左右幅いっぱいに画像がレイアウトされます。

 

写真を左右幅いっぱいに表示すると、文章は写真の下にレイアウトされます。上には設定できません。

写真の上に文章を置きたい場合は、「文章」パーツを写真の上に配置してください。

 

「写真付き文章」に配置できる写真は、ひとつのパーツメニューにつき、1点です。

複数の写真を並べたいときは、「写真」を選んでください。その写真の説明文を入れたいときは、その上か下に「文章」を選んで配置してください。

 

「文章」「写真」「写真付き文章」を使い分けることで、さまざまなレイアウトが可能です。

 

制作のコツとしては、ひとつのパーツの中にたくさんの文章を入れないで、ひとつの段落ごとに「文章」パーツを設定すると、「文章」パーツの上や下に「写真」パーツを配置することができるので、あとで写真を追加したいときに便利です。

 

完了したら、「保存」ボタンを押してください。

「保存」をしないで、他の場所に移動して作業をしますと、作業した分が消えてしまいますので、ご注意ください。

 


 

 

 

 

水平線

水平線には「保存」ボタンはありません。

水平線のスタイルの設定は、ページ右上のアイコンメニューの「A」スタイルの中の「フォント設定」で出来ます。

3種類の線を選ぶことができ、任意の色を決めることができます。

設定変更は、いつでもできます。

 

設定は、ホームページ内のすべての水平線に適用されます。

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