読者です 読者をやめる 読者になる 読者になる

ペラログ

ぺライチを運営しているホットスタートアップの人・文化・サービスを主に発信します。

フォントを変えてページの雰囲気をガラリと変えてみよう!

通常プラン以上のプランは[フォント変更]機能でフォントを変更することができます。
日本語11書体からフォントを選択し、ページの雰囲気をガラリと変えることができます!
もちろんプレミアムプランでもフォント変更機能を使うことができます!

ペライチの[タグの埋め込み]機能を使うとWebフォントも使うことができます。
プレミアムプラン以上のプランで使用できる[タグの埋め込み]機能を使い、Google Fontsを利用してペライチのページを一味違うテイストにしてみましょう!!

f:id:peraichi:20151229104411p:plain

目次

  1. フォント変更機能
    1. 手順
    2. 注意点
  2. Webフォント
    1. Webフォントとは
    2. Google Fontsとは
    3. 注意点
    4. 手順
      1. Google Fontsでフォントを探す
      2. ペライチのページにタグを埋め込む
    5. 設定例

1.フォント変更機能

1-1.手順

  1. ペライチにログイン
  2. 上部のメニューで[マイページ]をクリック

    f:id:peraichi:20151112131343p:plain

  3. [マイページ]画面で編集したいページの[編集]ボタンをクリック

    f:id:peraichi:20151227134900p:plain

  4. [フォント変更]ボタンをクリック
  5. 任意のフォントを選択してクリック

    f:id:peraichi:20151228110809p:plain

  6. 編集の画面左上の[保存する]ボタンをクリック
  7. プレビューでフォント変更が適用されているか確認

1-2.注意点

  • [フォント変更]機能は通常プラン以上のプランでご利用いただけます。
  • 各プランの詳細はこちらをご確認ください。
    無料プランから有料のプランへ変更する場合は、各プランの表の下のボタンを押してお手続きしてください。
  • フォント変更はページ内の文字を一括して変更します。
  • 一部のテキストのみ変更することはできません。
  • フォントが適用されない文字もあります。
    適用されない文字はデフォルトのフォントで表示されます。

    f:id:peraichi:20151229103012p:plain

▲目次に戻る

2.Webフォント

2-1.Webフォントとは

  • Web上のフォントのデータを使用するため、自分以外の環境でも同じフォントでWebサイトが表示できます。

2-2.Google Fontsとは

▲目次に戻る

2-3.注意点

  • [タグの埋め込み]機能はプレミアムプラン以上のプランでご利用いただけます。
  • 各プランの詳細はこちらをご確認ください。
    無料プランから有料のプランへ変更する場合は、各プランの表の下のボタンを押してお手続きしてください。
  • 通常プランからプレミアムプランへ変更する場合は、こちらからご連絡ください。
  • 下記でご案内する手順はGoogle Fontsの設定方法の一例です。
  • ペライチではGoogle Fontsやその他のWebフォントサービスの詳細や設定方法についてご案内できません。
  • Webフォントを使用する際はフォントの利用規約をご確認ください。
    有料のフォントや利用用途に制限のあるフォントもあります。
  • フォントが適用されない文字はデフォルトのフォントで表示されます。
  • 閲覧環境によって指定したフォントで表示されないことがあります。
  • Webフォントを使用することによって、ペライチのフォント変更で設定したフォントが適用されない場合があります。
  • Webフォントを使用することによって意図せぬ文字になる場合があります。
  • フォントによってそのフォントが使える文字が異なります。

▲目次に戻る

2-4.手順

2-4-1.Google Fontsでフォントを探す

  1. Google Fontsにアクセスする

    f:id:peraichi:20151229094451p:plain

  2. フォントを探す
    ※左側で文字の種類やテイストを絞り込むことができます。
  3. 選択したフォントの矢印のアイコンをクリックする

    f:id:peraichi:20151229094519p:plain

  4. [3. Add this code to your website:]の[Standard]タブのコードをコピーし、メモ帳(Windows)やテキストエディタ(Mac)などに一旦貼り付け
    例(選択したフォントによって青文字部分は異なります)
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
  5. [4. Integrate the fonts into your CSS:]のタグをコピーし、メモ帳(Windows)やテキストエディタ(Mac)などに一旦貼り付ける
    例(選択したフォントによって青文字部分は異なります)
    font-family: 'Pacifico', cursive;

    f:id:peraichi:20151229094613p:plain

  6. 貼り付けたタグを下記のように編集する
    例 (赤文字は追加した箇所です)
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
    <style>
    *{
    font-family: 'Pacifico', cursive;
    }
    </style>

▲目次に戻る

2-4-2.ペライチのページにタグを埋め込む

  1. マイページでWebフォントを使用したページの[編集]ボタンをクリック

    f:id:peraichi:20151227134900p:plain

  2. ペライチの編集の画面で[ページ管理設定]をクリック

    f:id:peraichi:20151229094804p:plain

  3. [ページ管理設定]画面の[タグの埋め込み]タブをクリック

    f:id:peraichi:20151229094847p:plain

  4. [headタグ内の埋め込み]に編集したタグを貼り付ける
  5. [ページ管理設定]画面の[保存]ボタンをクリックする
  6. 編集の画面の[保存する]ボタンをクリックする
  7. プレビューでフォントが適用されているか確認する

▲目次に戻る

2-5.設定例

f:id:peraichi:20151229101118p:plain

<link href='https://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<style> *{
font-family: 'Pinyon Script', cursive;
text-shadow: 4px 4px 2px #CCCCCC;
}
</style>

f:id:peraichi:20151229101144p:plain

<link href="https://fonts.googleapis.com/css?family=Passion+One:700" rel="stylesheet" type="text/css">
<style>
*{
color: #666666;
font-size: 60px;
letter-spacing: 8px;
font-family: 'Passion One', cursive;
text-shadow: -1px -1px 1px #333333, 1px 1px 1px #FFFF99;
}
h2{
font-family: 'Passion One', cursive;
color: #fff;
text-shadow: 0px -2px 4px white, 0px -4px 20px #FFFF00, 0px -10px 40px #FF9900, 0px -16px 80px #FF0000;
}
</style>

▲目次に戻る


年末年始の下記期間のサポート業務は休止いたします。

■年末年始休止期間
2015年12月30日(水)~2016年1月3日(日)
■年末営業
2015年12月29日(火)18:00まで
■年始営業
2016年1月4日(月)10:00から

休止期間中にいただいたお問い合わせは、2016年1月4日(月)より順次回答します。

休止期間中にお問い合わせが集中することも考えられます。
その際は通常よりもご回答にお時間を頂戴する場合がございます。