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

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

  • このトピックには10件の返信、2人の参加者があり、最後にさとぽんにより4年、 1ヶ月前に更新されました。
10件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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をサイトタイトルに指定する例です。

      • この返信は4年、 1ヶ月前にわいひらわいひらが編集しました。理由: 文字化け(エスケープ文字)の修正
    • #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フォントが表示されています!!
      感動です。
      この度はご丁寧に教えていただき、ありがとうございました。
      大変助かりました。

10件の返信スレッドを表示中
  • トピック「AMPページのgoogleフォント使用について」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)