プチ・ホームページサービス

カスタマイズTips

HTMLやCSSを編集するオリジナルのプチを作る方法です

GoogleWebフォントを使用する

検索サービスのGoogle(グーグル)で提供されているWebフォント(Google Fonts)をプチで使用する方法です。

※Google Fontsの提供フォントは半角英数字・記号のみですのであらかじめご了承ください。

1.GoogleFontsのページを開きます

GoogleFontsのページを開きます。

●Google Fonts:https://fonts.google.com/

2.使用するフォントを選びます

画面右の項目はフォントを種類ごとに検索する項目です。
画面左に使用出来るフォントの一覧が並びます。

使用するフォントが決まりましたら、フォント名右の「+」ボタンを押します。
「+」ボタンを押したフォントは画面右下にストックされます。

3.設置用コードを取得しプチに貼り付けます

画面右下にある「 ◯ Family Selected 」と書かれた黒い帯をクリックします。
開いた画面の「Embed Font」欄に表示されている「Standard」のコードをコピーします。

コピーしたコードを、管理者ページの「座標指定によるオリジナルHTMLの配置」の編集欄のいちばん上に貼り付け、「変更する」ボタンを押します。

※管理者ページ上部メニューの「カスタマイズ」から、「詳細カスタマイズ > 座標指定によるオリジナルHTMLの配置」を選択すると、編集画面が開きます。

4.CSSの設定を追加します

管理者ページの「CSSの追加」を開いて、編集欄のいちばん下に以下の記述を加えます。

英数字のフォントが指定されているすべての箇所をWebフォントに置き換える場合

body, td, .main_en, .navi_en, .title_en, .sitename_en {

}

メニュー項目をWebフォントに置き換える場合 ※ページ上部の設定(初心者用)をご利用時

#HeaderMenu {

}

そして、Google Fontsの「 Specify in CSS 」欄に表示されている記述をコピーし、「CSSの追加」の記述に加えます。

以上の編集が終わったら、ページ下の「 変更する 」ボタンを押して完了です。