AMPAFFINGER5(WING)のAMPページカスタマイズまとめ2019年3月17日WordPressテーマ「AFFINGER5(WING)」のAMPページのカスタマイズ例をまとめました。AMPは機能に制限がありますが、カスタマイズをすれば少しはマシになります。HTML)のことです。HACKS]AMP対応すると、ウェブページを高速表示でき、ユーザーの離脱率が減る可能性があります。AFFINGER5でAMPを使う条件AFFINGER5でAMP対応する条件は、AFFINGER5を持っているAMPで使用できないタグは削除または非表示にするパーマリンクは「/」で終了する形にするスラッグに「amp」の文字が含まれないようにするなどがあります。詳しくは、公式マニュアルなどを参考にしてください。パーマリンクを「/」で終了する形にしていない方は、以下の記事を参考に変更してみてください。AFFINGER5サイトのURL末尾に/を付けてAMP対応させる手順AFFINGER5(WING)で作ったサイトのURL末尾に/(トレイリングスラッシュ)を後から付け足し、AMP対応させる手順を解説。続きを見るAMPの見出しに色を付ける見出しを赤ベースに編集AFFINGER5のAMPページは、デフォルトのデザインだとほぼモノクロです。見出しの色だけでも変えておきましょう。見出しの色を変えるには、「st-amp-css.php」を編集します。h2タグ(見出し2)なら以下のコードを編集します。27px;}例として、h2タグを赤背景の白テキストに変更しました。27px;}上記のカスタマイズをヒントに、自分なりにアレンジしてみてください。AFFINGER5のAMPページの見出しに好きな色を付ける方法WordPressテーマ「AFFINGER5(WING)」のAMPページのhタグ(見出し)に色を付ける方法を解説。自動広告」は、その名の通りAMPページに自動で広告を配信するシステムです。自動広告を設置することで、AMPページの「ヘッダー」「コンテンツ内」「フッター」などに広告が配信(表示)されます。AMP自動広告は、「head」と「body」の2カ所に、それぞれスクリプトを挿入することで表示ができます。AFFINGER5の場合は、「single-amp.php」ファイルの</head>と</body>の直前に、それぞれスクリプトを挿入します。「head」と「body」の2カ所にスクリプトを挿入したら、正常に自動広告が配信されているかチェックしましょう。自動広告」を配信する方法をご紹介します。続きを見るAMPにいろんなAdSenseを表示するAMPページには「リンクユニット」や「関連コンテンツ」など、さまざまなAdSense広告ユニットを配信できます。?>があるので、この直下に<amp-adlayout="fixed-height"height=100type="adsense"data-ad-client="ca-pub-××××××××"data-ad-slot="××××××××"></amp-ad>を追記してください。××××××は、ご自身の広告IDに置き換えてください。場所も気に入らなかったら自分で変更してください。AFFINGER5のAMPページにAdSense「リンクユニット」を表示させる方法AFFINGER5(WING)のAMPページに、収益性の高いAdSense広告ユニット「リンクユニット」を表示させる方法を解説します。?>があるので、この直下か直前(もしくは上書きでも可)に<amp-adlayout="fixed-height"height=1500type="adsense"data-ad-client="ca-pub-××××××××"data-ad-slot="××××××××"></amp-ad>を記載してください。高さは1500と高め(表示多め)にしていますが、1000くらいでも良いでしょう。AFFINGER5のAMPページにネイティブ広告「関連コンテンツ」を表示させる方法AFFINGER5(WING)のAMPページの記事下に、AdSense「関連コンテンツ」を表示させる方法を解説します。続きを見るスティッキー広告AMPページにスティッキー広告を表示させるには、まずは<header>内にスティッキー広告を表示するために必要なスクリプトを挿入します。src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>次に、<body>内にAMP用広告コードを挿入します。AdSenseなら以下のようなコードになります。</amp-ad></amp-sticky-ad>以上で、スマホフッターに追尾型の広告が表示できます。AFFINGER5のAMPにスティッキー広告(追尾広告)を表示させる方法WordPressテーマ「AFFINGER5(WING)」のAMPページにスティッキー広告を表示させる方法を解説。続きを見るAMPにランキングを表示するアフィリエイトサイトなどで人気のランキング。AFFINGER5のAMPページにも表示できます。今回は、AMPページの記事下にランキングを表示されてみます。コードは以下のような感じになります。class="rankh4">3位</p><p><AMP用のコード></p><p>3位の説明文</p><AMP用のコード>にはASPで取得した広告コードを貼り付けてください。AMP用の広告コードの取得方法は、各ASPのガイドを参考にしてください。AFFINGER5のAMPページにランキングを表示させる方法AFFINGER5のAMPページの記事下に、アフィリエイト向けのランキングを表示する方法をご紹介します。続きを見るAMPページ記事上にSNSボタンを表示するAFFINGER5のデフォルトの設定だと、記事下にのみSNSボタンが表示できるようになっています。これをAMPページの記事上にも表示したい場合は、SNSのコードを任意の場所に挿入します。今回は、本文の直前に挿入してみます。まとめAFFINGER5のAMPページは、デフォルトの状態だとシンプル過ぎるのが難点なので、自分でカスタマイズしてみてくださいね。Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。WordPressAdSenseの「ページビュー」と「表示回数」の違い2019/4/3AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。プラグインBOKUこのサイトのほか、いろんなブログをWordPressで作っている男。テーマはAFFINGER5を愛用。BOKU関連記事AFFINGER52019/8/9AFFINGE5おすすめヘッダーカードのキャッチコピー表示方法AFFINGER5(WING)のver20190801βより、おすすめヘッダーカードにキャッチコピーを表示できるようになりました。キャッチコピーはどうすれば表示されるのか?設定方法を解説します。AFFINGER52019/8/9AFFINGER5ヘッダー用メニュー(横列)のタイトル属性の設定法AFFINGER5(WING)のver20190801βより、ヘッダー用メニュー(横列)が設定できるようになりました。ヘッダー用メニュー(横列)では、タイトル属性でサブテキストも表示できますが、このタイトル属性が表示されないことがあります。AFFINGER52019/5/17AFFINGER5に「この記事は約何分で読めます」を表示する方法WordPressテーマ「AFFINGER5(WING)」の記事上に、自動的に「この記事は約何分で読めます」と表示させるカスタマイズをご紹介します。AMP2019/3/17AFFINGER5のAMPにスティッキー広告(追尾広告)を表示させる方法WordPressテーマ「AFFINGER5(WING)」のAMPページにスティッキー広告を表示させる方法を解説。AFFINGER52019/3/14AFFINGER5の404ページのカスタマイズ方法とサンプルWordPressテーマ「AFFINGER5(WING)」では、ウィジェットから404ページをカスタマイズ可能です。AMP2019/4/3AFFINGER5のAMPページの見出しに好きな色を付ける方法WordPressテーマ「AFFINGER5(WING)」のAMPページのhタグ(見出し)に色を付ける方法を解説。