ホームページをもっとよくする!Jimdoワンポイント講座

ホームページをもっとよくする!Jimdoワンポイント講座

第26回目「フォントを活用しよう(2)」

せっかく作ったホームページ、一人でも多くの人に見て、読んでもらいたいですよね。しかし「思うように表現できない」「うまく伝わらない」そんなケースが多いようです。このコラムでは、ホームページ作りに役立つ「ちょっとしたコツ」をご紹介いたします。
第26回目は「フォントを活用しよう(2) 」です。それでは、スタート!

※第25回目「フォントを活用しよう(1)」はこちら。

ルドルフ

前回は、フォントの基本などについて説明したけれど、その後どう?


笑顔アリーナ

アリーナちゃん、いろいろとわかってきたよ。前よりうまく活用できそう!


ルドルフ

良かったわ。今回は、Jimdoの中でフォントを変更したいときのやり方について解説するわね。


笑顔アリーナ

待ってました!よろしくお願いします!


【フォントを活用しよう】

前回はフォントって何だろう?から始まり、基本的な型や概要などをお伝えしましたが、今度はいよいよJimdoの機能中で、操作する方法や活用例を解説します。

 

(1)スタイル機能を使ってフォントを変更しよう

フォントの設定や変更は「スタイル機能」を使って、おこなうことができます。以下の手順で進めましょう。

 

1)右のツールバーから「スタイル」を選択します。

2)マウスカーソルが刷毛状になりますので、フォントを変更したいエリアをクリックします。

3)以下のような画面が表示されます。フォントの種類が変更できる画面です。

4)フォントの種類を変更してみましょう。

 

「人気のフォント」には、モリサワフォントの中で特に人気のものが表示されます。その他、「すべてのフォント」の下に表示される「キャラクター」では、選択した言語に関連するフォントのみを一覧表示させることができます。(複数選択も可能)
選択した言語名を再度クリックすると、選択を解除することができます。

 

「フィルター」では、「ゴシック」「明朝」「手書き」「装飾」から絞り込んで表示させることができます。

5)キャラクターと、フィルターを設定して絞り込んでみました。絞り込まれて選びやすくなります。

 

▼「キャラクター」を「日本語」、「フィルター」を「ゴシック」にした画面

▼「キャラクター」を「日本語」、「フィルター」を「明朝」にした画面

 

日本語のフォント名を選択すると、ひらがな・カタカナ・漢字・全角英数で入力した文字の形状(フォント)が変わります。

 

 

●フォントの設定が適用される項目

フォントの設定を行える項目は以下の通りです。「スタイル機能」が使える項目の中で、文字を入力できる箇所が該当します。

・ページタイトル(ヘッダータイトル)

・ナビゲーション

・見出し大、中、小

・本文(文章機能)

 

「本文」(文章機能)は、コンテンツ部分とフッター部分で別々のフォントを設定することができます。
※サンプルの画像はクリックで拡大できます。


●各項目のフォントを変更すると、全頁に変更が適用されます。

(2)モリサワフォントを使ってみよう

前回の記事でも解説しましたが、JimdoPro/Businessでは、「モリサワフォント」という高品質のフォントを使用することができます。
使ってみましょう!
※JimdoFreeではゴシック体(sans−serif)と明朝体(serif)の種別設定が可能です。

1)右のツールバーから「スタイル」を選択し、フォントを変更したい項目に、刷毛型のマウスカーソルを合わせてクリックします。

2)「キャラクター」を「日本語」にし、「フィルター」を「ゴシック」に設定します。

3)日本語のフォント名が表示されるので、好みのフォントを選択しましょう。

【独自レイアウト・旧レイアウトの場合】
独自レイアウトや旧レイアウトを使用している場合は、「見出し」のみフォントの変更を適用することができます。他の項目にもモリサワフォントを適用したい場合は、CSS(スタイルシート)を使って設定すると、設定することができます。詳しくは、下記のページを参考にしてください。
http://jp-help.jimdo.com/design/originallayout/#cc-m-header-12317643290
※独自レイアウト(個人的にカスタマイズしたレイアウト)に関してはサポート対象外となっております。あらかじめご了承のうえ、ご利用ください。

 

 

【Jimdoで使用できるモリサワフォントの一覧】
Jimdoで使用できるモリサワフォントの一覧は、以下のページに掲載されいます。選ぶ際の参考にしてください。

▼モリサワフォントの種類
http://jp-help.jimdo.com/design/style/webfont/

(3)組み合わせて使ってみよう

フォントを組み合わせて使うことで、ホームページの印象を変化させることができます。
Jimdo Meetup vol.25JimdoExpertの服部雄樹さんが、取り上げていた「おすすめの組み合わせ」をご紹介します。

※サンプル画像はそれぞれクリックで拡大できます。

 

スッキリ見せたいときはコレ!見出し「ゴ MB1」 × 文章「中ゴシックBBB」


ポップな雰囲気なら!見出し「新ゴ エンボス」 × 文章「UD 新ゴR」


信頼感を演出する!見出し「MA31」 × 文章「黎ミンR」


番外編「すずむし」・・・レトロな雰囲気です。


このように組み合わせて雰囲気を変えることができますが、本文部分(文章)については、一般的には「ゴシック」を指定した方が、読みやすくなると言われています。

輝くルドルフ

アリーナちゃん、ありがとう!これでぼくもフォントマスターだな~。


ウインクアリーナ

ルドルフくん、バッチリね!


まとめ

フォント活用の2回目ということで、今回はJimdo上での操作方法や設定方法にフォーカスしてお伝えしましたが、いかがでしたか?Jimdoには契約の内容に合わせて、いろいろなフォントが選べるようになっているので、自分のホームページ合ったものを設定してみてくださいね。迷ったときは、最寄りのJimdoCafeなどで相談してみましょう。


ルドルフの小言

泣くルドルフ

ホームページを良くしていくのってなかなか難しいよね。

詳しい人に相談できるといいんだけど・・・


ウインクアリーナ

そんな時はJimdoCafeがオススメよ!

JimdoCafeのことは、ここのページを見てみて!

▶︎▶︎ Jimdoユーザーの駆け込み寺「JimdoCafe」