こんにちは。こんばんは。
みき です
今回は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にすればCSSを作れました。
続いて文字コードをUTF-8にします
保存ボタンの左側にある文字コードと書かれたドロップダウンメニューから[UTF-8]を選択します
これで文字コードの変更も終わりました
ここまで変更できたら[保存]をクリックして保存してください
これでamp.cssが完成しました
amp.cssの設置
続いてはamp.cssを設置していきたいと思います
今回amp.cssの設置はFTPソフトのFFFTPを利用します
ではFFFTPを開いてください
FFFTPを開いたら左側からamp.cssを作成した場所を開きます
続いて右側から
wordpressまでのパス>wordpress(もしくはwpなど)>wp-content>themes>simplicity2-child
を開きます
両方開き終わったらamp.cssを左側にドラックします
これで設置完了です
※モザイク多くてすみません m(_ _)m
では最後に正常に設置できたか確認してみましょう♪
amp.cssの設置確認
まずはWordPress管理画面にログインしてください
ログインができたら管理画面>外観>テーマの編集をクリックします
テーマの編集ページにamp.cssが含まれていれば成功です。
アップロード前↓
アップロード後↓
まとめ
どうでしたでしょうか?
案外簡単ですね
Simplicityを子テーマでAMP機能搭載前からご利用の方はamp.cssがないので
追加しておくと良いと思います
特に目立った損はないですし♪
今回ご紹介したSimplicityはcomivel(当サイト)でも利用させていただいております
とても良いWordPressテーマなので皆さんもぜひ♪
では今回はとても短いですがこの辺で終わりたいと思います
追記:2017年3月11日21時5分
文を修正、追記していったら最終的に1500文字ぐらいになりました
追記終わり
この記事が役に立った、上手く設置できたその他感想はコメントからお待ちしております!!
同時にシェアもよろしくお願いします!!m(_ _)m
それでは
バイバイ♪
コメント
すごい分かりやすいです！こういう記事がほしかったんです(*^^*)
Simplicityのお蔭で、AMPに簡単に出来たのは嬉しかったのですが、ページが少し暗い感じがして明るくできたらいいなと思っていました。
良い記事を書いて下さり、ありがとうございました！
コメントありがとうございます!!
フォーラムでも書かせていただきましたが解決できてよかったです!!
自分の好きなようにデザインが変えれると気持ち良いですよね 笑
なのでCSSは好きです 笑
amp.cssの追加お疲れ様でした!!
本当にありがとうございました！
ただ、もう一度記事を読み直してみますと
この部分をやっていませんでした。
ファイルの種類「テキスト文書」文字コードは「ANSI」になっていましたので、そのまま作ってしまっていました。
作り直して、差し替えた方がいいのでしょうか？
どうぞよろしくお願いします。
お返事ありがとうございます!!
CSSが動いているということであればおそらく問題ないかと思います
Simplicity(親テーマ&子テーマ)のCSSはすべて文字コードがUTF-8になっていたので念のためといったところです(^_^;)
何かしら問題があれば差し替えたほうが良いと思います
もしくは問題がある前に差し替えるか…
追記:2017年3月13日0時55分
すべて文字コードが…と書いていますが
正確には確認をしたCSSはすべてUTF-8でした。
ありがとうございます！
念のため差し替えました(^^)
お忙しいところ何度もありがとうございました。
ご返事ありがとうございます!!
了解です (^_-)-☆
一番の安全策なので良かったです
こちらこそありがとうございました!!
今後もよろしくお願いします!!