Simplicityの子テーマにamp.cssを作成&設置する方法

こんにちは。こんばんは。
みき です

今回はWordPressテーマであるSimplicityの子テーマにamp.cssを作成&設置する方法をご紹介したいと思います

SimplicityのAMP機能はSimplicity2.3.1から追加された機能で
AMP(Accelerated Mobile Pages)はモバイルページ高速化プロジェクトです

AMP対応ページはとてつもなく速いです…

↑この前開いた記事がAMP対応でスパッと切り替わって驚きました…

amp.cssを追加することでSimplicityのAMPページをカスタマイズすることができます

amp.cssは最新版の子テーマには付属していますが
以前のバージョンでは付属していません

なのでamp.cssを以前のバージョンの子テーマに追加する方法をご紹介したいと思います

ではいきましょう!!

スポンサーリンク

amp.cssを作成

まずはamp.cssを作成します

amp.cssを作るためにWindows付属のメモ帳やサクラエディタなどを開いてください

今回はメモ帳で行っていきます

amp.cssを作成する方法-メモ帳を開く

メモ帳を開いたら何も入力せずにツールバーから
ファイル>名前をつけて保存をクリックしてください

amp.cssの作成-名前をつけて保存へ移動

すると以下のような保存画面が表示されます

amp.cssを作成する方法-保存画面

表示されたらファイル名に「amp.css」と入力します

ファイルの種類は[すべてのファイル]を選択します

試してみたところどの種類(形式)が選択されていても
名前をamp.cssにすればCSSを作れました。

続いて文字コードをUTF-8にします

保存ボタンの左側にある文字コードと書かれたドロップダウンメニューから[UTF-8]を選択します

これで文字コードの変更も終わりました

ここまで変更できたら[保存]をクリックして保存してください

amp.cssを作成する方法-保存の入力サンプル

これでamp.cssが完成しました

amp.cssを作成する方法-amp.cssの完成

amp.cssの設置

続いてはamp.cssを設置していきたいと思います

今回amp.cssの設置はFTPソフトのFFFTPを利用します

ではFFFTPを開いてください

FFFTPを開いたら左側からamp.cssを作成した場所を開きます

続いて右側から
wordpressまでのパス>wordpress(もしくはwpなど)>wp-content>themes>simplicity2-child
を開きます

両方開き終わったらamp.cssを左側にドラックします

これで設置完了です

amp.cssをffftpでアップロード

※モザイク多くてすみません m(_ _)m

では最後に正常に設置できたか確認してみましょう♪

amp.cssの設置確認

まずはWordPress管理画面にログインしてください

ログインができたら管理画面>外観>テーマの編集をクリックします

テーマの編集ページにamp.cssが含まれていれば成功です。

アップロード前↓

amp.cssのアップロード前

アップロード後↓

amp.cssのアップロード後

まとめ

どうでしたでしょうか?

案外簡単ですね

Simplicity子テーマAMP機能搭載前からご利用の方はamp.cssがないので
追加しておくと良いと思います

特に目立った損はないですし♪

ちなみにAMP機能が追加されたのはSimplicity2.3.1からです

今回ご紹介したSimplicityはcomivel(当サイト)でも利用させていただいております

とても良いWordPressテーマなので皆さんもぜひ♪

Simplicity2のダウンロード
無料WordpressテーマSimplicity2のダウンロードはこちらです。インストール方法はこちら。テーマのアップデート方法は、以下を参照してください。Simplicity2のダウンロードWordPress4.1以上、PHP5.4以上で

では今回はとても短いですがこの辺で終わりたいと思います

追記:2017年3月11日21時5分

文を修正、追記していったら最終的に1500文字ぐらいになりました

追記終わり

この記事が役に立った、上手く設置できたその他感想はコメントからお待ちしております!!

同時にシェアもよろしくお願いします!!m(_ _)m

それでは

バイバイ♪

CSSWordPress
スポンサーリンク
スポンサーリンク
みき

「みきのお家」運営者の「みき」です(*´ڡ`●)
「みきのお家」では、ソフトウェアや商品レビュー、プログラミング関係の情報を公開しています!!
SNSへのシェアやフォローもよろしくおねがいします!!

みきをフォローする
みきをフォローする
みきのお家

コメント

  1. kchan より:

    すごい分かりやすいです!こういう記事がほしかったんです(*^^*)

    Simplicityのお蔭で、AMPに簡単に出来たのは嬉しかったのですが、ページが少し暗い感じがして明るくできたらいいなと思っていました。

    良い記事を書いて下さり、ありがとうございました!

    • みきみき より:

      コメントありがとうございます!!

      フォーラムでも書かせていただきましたが解決できてよかったです!!

      自分の好きなようにデザインが変えれると気持ち良いですよね 笑

      なのでCSSは好きです 笑

      amp.cssの追加お疲れ様でした!!

  2. kchan より:

    本当にありがとうございました!

    ただ、もう一度記事を読み直してみますと

    ファイルの種類は[すべてのファイル]を選択します
    続いて文字コードをUTF-8にします

    この部分をやっていませんでした。

    ファイルの種類「テキスト文書」文字コードは「ANSI」になっていましたので、そのまま作ってしまっていました。

    作り直して、差し替えた方がいいのでしょうか?
    どうぞよろしくお願いします。

    • みきみき より:

      お返事ありがとうございます!!

      作り直して、差し替えた方がいいのでしょうか?

      CSSが動いているということであればおそらく問題ないかと思います

      Simplicity(親テーマ&子テーマ)のCSSはすべて文字コードがUTF-8になっていたので念のためといったところです(^_^;)

      何かしら問題があれば差し替えたほうが良いと思います
      もしくは問題がある前に差し替えるか…

      追記:2017年3月13日0時55分
      すべて文字コードが…と書いていますが
      正確には確認をしたCSSはすべてUTF-8でした。

      • kchan より:

        ありがとうございます!

        念のため差し替えました(^^)

        お忙しいところ何度もありがとうございました。

        • みきみき より:

          ご返事ありがとうございます!!

          念のため差し替えました(^^)

          了解です (^_-)-☆
          一番の安全策なので良かったです

          お忙しいところ何度もありがとうございました。

          こちらこそありがとうございました!!

          今後もよろしくお願いします!!