AMPページのgoogleフォント使用について

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも AMPページのgoogleフォント使用について

このトピックには10件の返信が含まれ、2人の参加者がいます。1 週、 2 日前 さとぽん さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #55824

    さとぽん

    いつもSimplicityにお世話になっている者です。

    AMPページで、Googleフォントを使用したいのですが、どのような方法がありますでしょうか?
    それともAMPページではGoogleフォントは使用不可能でしょうか?

    自分でググって試行錯誤しましたが、何分初心者でして、うまくいきませんでした。

    通常ページは、サイトタイトルをGoogleフォントにしております。
    AMPページもサイトタイトルだけ、Googleフォントにしたいtのですが、
    そのやり方をご教授いただけないでしょうか?

  • #55826

    Akira

    AMPでもGoogle Fontsは使用可能です。
    実際、テーマ設定でデフォルト以外のフォントにしている場合には、そのフォントのスタイルシートがAMPページでも読み込まれるようになっています。

    テーマ設定で指定できるGoogle Fonts以外を使用されたい場合には、以下のカスタマイズをします。

    ステップ1:使用したいGoogle Fontsのスタイルシートを読み込む

    親テーマ内にあるsingle-amp.phpを、子テーマにコピペします。
    子テーマにコピペしたsingle-amp.phpを開き、48行目のecho '<link rel="stylesheet" href="https://max'.'cdn.boot'.'strapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">'.PHP_EOL;を探します。
    この下に下記のようにコードを挿入し、Google Fontsのスタイルシートを読み込ませます。
    echo '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">'.PHP_EOL;

    上記のコードはGoogle FontsのRoboto(フォントウェイト:400、フォントスタイル:ノーマル)を読み込む例です。
    hrefで指定しているURLを変更することで、他のGoogle Fontsも使用可能です。

    ステップ2:cssでfont-familyを指定

    Google Fontsを読み込んだ後は、子テーマのamp.cssでサイトタイトルのfont-familyを指定します。

    #site-title a {
      font-family: 'Roboto', sans-serif;
    }

    上記のcssはRobotoをサイトタイトルに指定する例です。

    • この返信は1 週、 3 日前に わいひら わいひら さんが編集しました。理由: 文字化け(エスケープ文字)の修正
  • #55827

    Akira

    おぅ… HTML特殊文字変換ツールを使ったら、文字化けしている…

    しかも、どうやっても403エラーが出てしまいます。

    さとぽんさん、カスタマイズをされるのはちょっとお待ちを。

  • #55828

    Akira

    notepad.pwに貼り付けたコードだったら大丈夫かな?

    https://notepad.pw/share/c42tnsoo8

    誤解を生みかねないので、説明を追加します。あくまでカスタマイズを行うのは、子テーマに設置したsingle-amp.phpです。

  • #55838

    さとぽん

    Akira様
    ありがとうございます。
    初歩的な質問でお恥ずかしいのですが、
    「親テーマ内にあるsingle-amp.phpを、子テーマにコピペします。」
    が分かりません。
    これはサーバー側の話ですか?ワードプレスのカスタマイズから操作する話ではないですよね?

    サーバー側の操作とすればFTPでコピーするということでしょうか?

  • #55842
    わいひら
    わいひら
    キーマスター

    FTPで操作するということですね。

    とりあえず、パソコン側にダウンロードした最新版のSimplicity側のsingle-amp.phpを、サーバー上の子テーマフォルダ直下にアップすれば、Wordpressの「テーマの編集」から編集できるようになると思います。

    ただ、「テーマの編集」から行うと、失敗しやすいですし、エラー部分もわかりづらいので、パソコン側のエディターで必要な編集を行ってからアップロードすることをおすすめします。

  • #55844
    わいひら
    わいひら
    キーマスター

    #55826の文字化け(エスケープ文字)も修正しておきました。

  • #55849

    Akira

    わいひらさん、コードの修正ありがとうございます。

    さとぽんさん、single-amp.phpを変更するのは、さとぽんさんにはリスクが大きい気がしてきました。

    というのも、子テーマにsingle-amp.phpを設置すると、今後Simplicityのアップデートでsingle-amp.phpが変更されても、その変更が適用されないためです。

    ほんの少し手間が増えますが、親ファイルを変更せずGoogle Fontsを使う方法がさとぽんさんに適しているように思えます。
    その方法を紹介するために、以下の情報を教えていただきますか?

    使用するGoogle Fontsの情報(必須)
    ・フォント名
    ・スタイル(ノーマルなのか?イタリック体なのか?)
    ・フォントウェイト(100から900のうち、どのウェイトを使うのか)

    サイトURL(任意)
    URLが分かると、より詳細に説明できます。

  • #55850

    さとぽん

    わいひら様
    丁寧なご説明ありがとうございます。

    Akira様
    ご察しの通りで、子テーマのアップデートがあったときに、それをWordpressへアップロードすると再度設定が必要なのでは?? 果たして、次回のアップデートの時にもう一度同じことが、私にできるだろうか?? と気にしておりました。

    できればテーマのアップデートに関わらず、Googleフォントが適用されることを望みます。

    以下、情報です。
    ・フォント名・・・「Faster One」
    ・スタイル/フォントウェイト・・・「Regular 400」
    ・サイトURL・・・「https://me-her.com/

    ご教授いただけますよう、よろしくお願いいたします。

  • #55852

    Akira

    さとぽんさん、情報のご提供ありがとうございます。

    今度紹介するのは、Googleフォントを子テーマに設置しcssで呼び出す方法です。
    そのため、Simplicityのアップデートの影響を一切受けません。

    以下の3ステップでカスタマイズは完了します。

    ステップ1:Googleフォントをダウンロードする

    使用されるFaster Oneを、まずはダウンロードします。
    Faster Oneを訪れ、ページ右上にある「SELECT THIS FONT」をクリック。右下に現れるポップアップを表示させ、ポップアップ右上にあるダウンロードボタンをクリックするとダウンロードできます。

    ダウンロードしたファイルはzip形式であるため、予め解凍しておきます。
    ファイルの中には、「FasterOne-Regular.ttf」と「OFL.txt」が入っています。

    ステップ2:Googleフォントを子テーマに設置

    FTPソフトを使いsimplicity2-child直下にフォルダを1つ作成し、フォルダ名をfontにします。

    作成したfontフォルダの中に、ステップ1でダウンロードした「FasterOne-Regular.ttf」と「OFL.txt」をFTPソフトを使いアップロードします。

    ステップ3:cssで呼び出しと指定

    子テーマのamp.cssに、以下のcssをコピペします。

    @font-face {
      font-family: 'Faster One';
      src: url("https://me-her.com/wp-content/themes/simplicity2-child/font/FasterOne-Regular.ttf");
    }
    
    #site-title a {
      font-family: 'Faster One', cursive;
    }

    AMPで@font-faceを用いてフォントを呼び出す際には、絶対パスで指定します。
    そのため、urlを指定する際には、必ずhttpまたはhttpsから始める必要があります。

    ご不明な点がありましたら、お手数をお掛けしますがご質問ください。

  • #55874

    さとぽん

    Akira様
    できました!! AMPページでもGoogleフォントが表示されています!!
    感動です。
    この度はご丁寧に教えていただき、ありがとうございました。
    大変助かりました。

トピック「AMPページのgoogleフォント使用について」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)