2019年11月25日URLをコピーしました!こんにちは、みーまです。将来的にブログをAMP化したほうが良いのでは?という記事を時々見かけますが、このブログは既にAMP対応を済ませています。(参考)AMP化したページはこちらテーマにJINを使ったままAMP対応化させましたので、AMP対応したい人は参考にしてください。この記事ではテーマエディタからWordPressテーマのファイルの中身を修正しますので、事前にバックアップを取りましょう!必要なCSSをJINのテーマファイルの中から移植することになります。大変です!まとまった時間を用意してやりましょう!目次AMP対応するまでの流れJINの「子テーマ」にしていない場合は入れて、有効化するAMP対応プラグインをインストールするテーマエディターで子テーマのfunctions.phpを変更1.JINの子テーマを使ってない人は導入するJIN公式サイトからJIN子テーマをダウンロードする。WordPress管理画面の「外観」「テーマ」「テーマの追加」「テーマのアップロード」から、ダウンロードしたファイルをアップロードする。jin-childが増えるので、有効化する。2.AMP対応化プラグインをインストールする。AMPのプラグインをダウンロードして有効化する。AMPの設定を添付画像の通りにする。(クリックで大きい画像が見られます)GoogleアナリティクスのコードはAMPと別で設定を持つので、「AMP」「Analytics」から新しいコードを入れてSaveする。}}Typeにはgoogleanalyticsと入れる。accountの部分は自分の値を「HTMLタグ設定」広告設定で確認する。「外観」「テーマエディター」で、「jin-child」が選ばれていることを確認する。「functions.php」を選択して、以下のコードを貼り付けする。*/の間に、JINのボックスデザインやアイコンデザインなどのCSSを移植します。テーマエディタからJINのstyle.scssを開くと、どの機能をどこから参照しているかが分かるので、調べる。該当するscssの中身をコピーする。SassMeisterで、scssからcssに変換する。変換エラーが出たら次の注意事項を見て命令を削除する。次の注意事項にある命令を削除してエラーが無いことを確認する。AMPは使えないCSS命令が沢山あるので、その命令を削除しつつ対応する必要があります。grid-media(画面レイアウト分岐系)=SassMeisterサポート外PC、タブレット、モバイルとあるが、どれか1つに統一する。残したいレイアウトは{}の中身だけ残すサンプル:このブログで使っているAMP用CSS私が使っているCSSを公開したいのですが、JINの中からコピーしているので権利はひつじさんにあります。一部をスクリーンショットですが公開しておきます。これは一部で、全体1500行あります。AMPでは命令を強制的に行う「!important」や、画面サイズによって動作を変える分岐命令が使えないので、色が上書きできない、サイズが良くない部分が多くあります。これは仕様上回避できないので、ある程度頑張ったら妥協することが必要です。直したい場合は、Chromeの開発者ツールなどを使ってClass名を調べてから、テーマエディターの中で文字列検索して、そこを直してください。動作確認する普段の記事のURLに、amp/を付けると、AMP用のページになるので、動作確認をします。AMPは元のデザインと比較して少し殺風景になりますが、元々モバイル向け高速化の仕組みなので、仕方ないでしょう。AMP用CSSを追加しなかったら、もっと殺風景になります。色も何もない感じですね!最後にいかがでしたでしょうか。CSSが公開できないのでもやっとした結果になってますが、「頑張ってみる!」という方はチャレンジしてみる価値ありです。