JIMDO EXPERT
メニューの表示切り替え

HOME  > 実践!ホームページ作成! > 第17回 スタイルとフォント!

【連載】 実践!Jimdoでホームページ作成!

第17回 スタイルとフォント!

あっくん

チッチ、今日もJimdo教えてくれる?

チッチ

もちろん!そういえば「スタイル」についてまだ教えてなかったね。

あっくん

ドキッ!スタイルって・・・もしかしてぼくの体型のこと・・・?

ぼくそんなにぽっちゃりじゃないよ!

チッチ

あっくん・・・「スタイル」っていうのは管理のメニューのひとつで、

ホームページ全体の文字の設定や背景の設定のことだよ!

あっくん

なぁ~んだ。よかった。

ねえ、チッチ!さっそくその「スタイル」っていうの教えて!!

チッチ

まかせて!じゃあ、ログインして管理のメニューの中にある

「スタイル」をクリックしてね!

管理のメニュー「スタイル」
あっくん

はーい。

あ!「フォント設定」っていう画面が表示されたよ。

チッチ

そうだね!今日はこの「フォント設定」について教えるよ!

画面の右側に並んでいるメニューをクリックすると、それぞれ設定画面が開くよ。

設定を変更すると左側のサンプルのテキストに適用されるから、このサンプルを見ながら設定を変更しよう。

フォント設定
あっくん

右側だから・・この「プリセット」「文章」「見出し1」「見出し2」

「見出し3」「リンク」「水平線」っていうのがメニューだね?

チッチ

そうだよ!まずは「文章」の項目を選んでみよう。

ここからホームページ内に使われている文章の「フォント」「フォントサイズ」

「行間幅」「カラー」をまとめて設定することができるんだよ。

文章の設定

文章

フォント ・・・ 文章のフォントを変更できます。

フォントサイズ ・・・ 文章の文字の大きさを変更できます。

行間幅 ・・・ 行と行の間の幅を変更できます。

カラー ・・・ 文章の文字の色を変更できます。


あっくん

ねえ、チッチ。「フォント」ってなあに?

チッチ

フォントっていうのは簡単に言うと文字のかたちのことだよ。日本語では「書体」って呼ばれたりもするよ。

Jimdoで選べる日本語のフォントは「ゴシック」と「明朝」があって、見てみれば違いは一目瞭然!

実際にフォントを選んでみて「ゴシック」と「明朝」を見比べてごらん!

日本語フォント

JimdoBusinessでは、すごく綺麗な「モリサワ」フォントも利用できるよ!

あっくん

わぁ!「ゴシック」と「明朝」ってぜんぜん雰囲気が違うんだね!!

比べてみると違いが良くわかるよ!

チッチ

日本語のフォント以外にも、「Arial」「Courier New」「Georgia」「Helvetica」「Lucida Grande」「Times New Roman」「Trebuchet MS」「Vredana」という英文字のフォントが選べるよ。

見出しに英文字をつかうときに便利だね!

英文字フォント

※すべて「太字」にしてあります

あっくん

英文字のフォントってたくさんあるんだね~!!

こんなにたくさん覚えられるかな~?

チッチ

いろいろ試してみれば大丈夫だよ!

文章の「行間幅」についても見てみようね。

左側が行間幅:140%の文章、右側が行間幅:200%の文章だよ。

あっくん、違いがわかるかな?

行間幅
あっくん

行と行の間の幅が変わったね!

140%と200%を比べると200%の方がゆったりした感じに見えるよ。

チッチ

そうだね!文章の量に合わせて読みやすい行間幅に調節してみてね。

次は「見出し1」と「見出し2」の項目を見てごらん。
ここからホームページ内に使われている見出しの「フォント」「フォントサイズ」

「スタイル」「カラー」をまとめて設定できるよ。

見出しの設定

見出し

フォント ・・・ 見出しのフォントを変更できます。

フォントサイズ ・・・ 見出しの文字の大きさを変更できます。

スタイル ・・・ 見出しを太字にするかどうかを選択したり、
見出しを揃える方向を「左揃え」「中央揃え」「右揃え」から選択できます。

カラー ・・・ 見出しの文字の色を変更できます。


あっくん

「見出し1」と「見出し2」と「見出し3」で違ったスタイルにすることができるんだね!

チッチ

そうだよ!次は「リンク」の項目を説明するね。

ここからホームページ内のリンクのある文字の色を自由に変えることができるよ。

リンクの設定

カラー ・・・ リンクの文字の色を変更できます。


あっくん

リンクの文字の色を変えれば、リンクの部分がわかりやすくなるね!

チッチ

さいごに「水平線」の項目だよ。ここからホームページ内の水平線のスタイルをまとめて設定できるよ。

スタイルは「実線」「点線」「破線」の3種類から選ぶことができるし、色も自由に選べるんだ!

水平線の設定

スタイル ・・・ 水平線を「実線」「点線」「破線」から選択できます。

カラー ・・・ 水平線の文字の色を変更できます。


あっくん

この一番上の「プリセット」っていうのはなぁに?

チッチ

この「プリセット」にははじめから4種類のスタイルが入っているんだよ。

この4種類のスタイルから好きなスタイルを選べば、「文章」「見出し1」「見出し2」「見出し3」「リンク」「水平線」のスタイルを一度に変更することができるんだ!

プリセット
あっくん

すっごい!!一度に設定できちゃうなんて便利だね!

チッチ

フォントの設定を変更したら、最後は「保存」ボタンをクリック!!

するとプレビューが表示されるから、変更を適用しても良ければ「はい」、適用しない場合は「いいえ」、設定画面に戻る場合は「戻る」をクリックしてね。

フォント設定(7)
あっくん

はーい!

チッチ

フォント設定は文字を読みやすくしたり、リンクのある部分をわかりやすくしたり、

ホームページをつくる上で大切な設定なんだよ。

だからいろいろ試しながら見やすいフォント設定を考えてみてね!

あっくん

わかったよ!色んなフォントを試してみようっと!

スタイルを変えるだけでホームページの見た目の印象が変わるね!

チッチ

うん!「人の第一印象も数秒で決まる」なんて話もあるくらいだから

見た目の印象も大事だよね!

あっくん

ぼくもシュっと見えるようにスタイル良くなりたいなぁ!

今食べてるおやつ食べたらスリムにダイエットするよ!モグモグ!

チッチ

・・・あっくん、それ何回目のダイエット宣言?

もちろん、あっくんは次の日も美味しくおやつをたべました。