フォント変更

Webnodeの以外のフォント設定

Webnodeのフォントではホームページのイメージに何となく合わない、そんな風に思ったことはありませんか?そんなときにGoogleフォントが大活躍!設定手順を詳しく説明します。

※設定が少し複雑なので、上級者向けの設定である事を理解してください。

フォント変更に必要なコード取得方法を紹介します。


1、まずはグーグルフォントのページにアクセスしてください。(ページは全て英語ですが、下記ににて詳しく説明させて頂きますのでご安心ください。) 


2、Language部分でJapanese(日本語)を選択します。


3、日本語フォントが表示されたら、実際に表示させたい文字でテストしたり、サイズ変更をしてみる事も可能。(HPにコードを載せるときはこのサイズや文章は反映されません)


3、好きなフォントを選びクリックします。そうすると、次のページに移動します。移動後、フォントの太さを選べるようになっています。(※ 太さが1種類しかないものもあります。)どの太さにするか決まったら、『+Select this style』をクリックします。


4、そうすると、画面右側にSelect Familyというウィンドウが出てきます。ReviewとEmbedの二つのタブがあるので、『Embed』をクリックします。その下にある<link>と@Importでは、『@Import 』を選択します。


5、HTMLコードをコピーします。コピーした後もこのページは使用するので閉じないでおいてください。 コピーしたHTMLコードをPC上にあるNotePadや付箋なのにコピーをしてください。編集を行う為です。


6、上記のNotePadに張り付けたコードと同じページで構わないので * {} を書き入れてください。 


7、グーグルフォントページに戻り、『CSS rules to specify families 』という部分のコードを今度はコピーします。


8、7でコピーした『CSS rules to specify families 』のコードを*{}の間に貼り付けます。


9、上記の* { }内にコードを張り付けたものに、今度は!importantを付け足します。付け足す場所は『 ;}』の直前です。 


10、9で作ったコードを今度は5で取得したコードに挿入します。 挿入場所は</style>の真上です。

これで必要なコードの取得は終了です!

<<< コード貼り付け場所 >>>

コード貼り付け場所は、お持ちのプランによって違います。無料プラン/Limitedプラン/Miniプランをお持ちの方、Standardプラン/Proプランをお持ちの方で貼り付け場所が違いますのでそれぞれ紹介していきます。


無料プラン/Limitedプラン/Miniプラン

これらのプランの場合は、ホームページ全体のフォントを一括して変更できない為、ページ毎に設定を行っていきます。

1、編集画面の右上の『ページ』をクリック

2、フォントを変えたいページを選択

3、SEOページ設定下にある『HTMLヘッダーコードをカスタマイズ』にコードを貼り付け

最後に公開ボタンを押して終了です。

Standardプラン・Proプラン

StandardプランかProプランをお持ちの場合は、ページ全体にフォントを一括で反映させる事が可能です。(ページ毎に変えたい時は、上記の無料プラン/Limitedプラン/Miniプランの方法となります。)

1、編集画面で右上の『設定』をクリック

2、ウェブサイト設定を選択

3、ウェブサイトヘッダーHTMLコードの部分に取得したコード貼付け

最後に、公開ボタンを押して終了です。

jQuery Tlačítko na začiatok by William from Wpromotions.eu
無料でホームページを作成しよう! このサイトはWebnodeで作成されました。 あなたも無料で自分で作成してみませんか? さあ、はじめよう