ルクセリタス

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 私困 232x300
困っている人
LuxeritasのAMP化の方法&注意点を教えてほしい

上記のお悩みを解決します。

こんな方におすすめ

  • LuxeritasでAMP化しようと検討している方

 

本記事の根拠

  • 兄弟ブログの『ぶろぐしる~』もAMP化済み

 

 

ポイント

Luxeritasを使っているなら、AMP化しないのは損です。
style.css(AMP用)を適用することができるので、デザイン崩れは最小限です。

AMP化したくないページがあるなら、個別にAMP無効化すればいいだけです。

 

それでは、本題に入ります。

 

Luxeritas(ルクセリタス)AMP化手順

LuxeritasでAMP化する流れを簡単にご説明します。

 

step
1
style.cssをAMP用style.cssへ貼り付け

 

step
2
グーグルアドセンスAMP用自動広告コード取得

 

step
3
AMP用ウィジェットを準備

 

step
4
LuxeritasをAMP化

 

step
5
AMP検証&修正

 

詳しく説明します。

 

style.cssをAMP用style.cssへ貼り付け

子テーマのstyle.cssをAMP用style.cssへ貼り付けします。
とりあえず、全部コピペでOKです。

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 01

 

AMP検証をするときに、エラーがあればAMP用style.cssを修正します。
検証して、エラーが無ければラッキーですw。

 

 

ポイント

Luxeritasは、AMP化ページも通常ページと同じようなデザインで表示することが可能です。
Luxeritasのいちばんの目玉と言って良い機能です。

 

当ブログのアフィンガー6ですら、AMP化ページはデザインが崩れてしまいます。(シンプルになっちゃう)
しかし、Luxeritasはページデザインを崩すことなくAMP化が完了します。

 

サラッと書きましたが、AMP化のページデザインを崩さないってかなりスゴイことです。
無料ワードプレステーマで悩まれている方は、Luxeritasをオススメします。

 

ポイント

Luxeritasは無料テーマとは思えないクオリティ

 

グーグルアドセンスAMP用自動広告コード取得

グーグルアドセンスのAMP用自動広告コードを取得します。

 

step
1
グーグルアドセンスにログインして、『AMPサイトをお持ちですか?』をクリック

グーグルアドセンスのUI画面もしょっちゅう変わるので、すでに変わっているかも・・・

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 1グーグルアドセンス自動広告のAMP化

 

step
2
『AMPサイトにディスプレイ広告を自動的に表示』にチェック

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 2グーグルアドセンス自動広告のAMP化

 

step
3
ステップ2のコードをコピー

※ステップ1のコードは不要!

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 3グーグルアドセンス自動広告のAMP化

 

step
4
Luxeritas→カスタマイズ→AMP HTML(body)へ貼り付け

いちばん下にステップ2のコードを貼り付けます。

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 4グーグルアドセンス自動広告のAMP化

 

以上で、グーグルアドセンスのAMP用自動広告の設定は完了です。

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 5グーグルアドセンス自動広告のAMP化

 

AMP用ウィジェットを準備

Luxeritasには、AMP用のウィジェットが用意されています。

 

メモ

AMP用サイドバー(H4タイプ)

ヘッダー下ウィジェット(AMP用)

記事タイトル上ウィジェット(AMP用)

記事タイトル下ウィジェット(AMP用)

投稿内で最初に見つかったH2タグの上(AMP用)

関連記事上ウィジェット(AMP用)

関連記事下ウィジェット(AMP用)

記事下ウィジェット(AMP用)

記事下ウィジェットよりさらに下(AMP用)

 

通常ページに配置しているウィジェットを、AMP用ウィジェットにも配置します。

 

AMPページにも自動で目次を挿入する

step
1
カスタマイズ(外観)→目次

『AMPページにも自動で目次を挿入する』にチェックを入れます。

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 ルクセリタスAMP化ページの目次を忘れないように!

 

AMP化したら目次が消えていたので、焦りましたw。

 

LuxeritasをAMP化

step
1
Luxeritas→カスタマイズ→AMP

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 02

 

AMP化するにチェックを入れることで、全ページAMP化することができます。
管理画面で使用するプラグインにはチェックを付けなくて良いです。

私は、下記のプラグインはチェックを外しました。

メモ

AddQuicktag

Classic Editor

ContactForm7

EWWW Image Optimizer

 

AMP検証&修正

URLの最後に『/amp』を付けます。
すると、AMPページを確認することができます。

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 AMP検証は簡単にチェック可能

 

【検証】ボタンを押すことで、AMPエラーがないのかをチェックできます。
PASS表示があれば、AMP完了です。

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 AMP検証はPASSでクリア

 

AMPエラーがあれば、エラー箇所を表示してくれます。
エラーになっているコードが自分では判断できない場合は、AMP用style.cssをいちど全消しします。

メモ

通常style.cssを順番にAMP用style.cssに貼っていって、その都度【検証】ボタンを押してください。
エラーが出たcssは、AMP用style.cssから除外してください。

 

私がエラーで引っかかったcssは、マウスオーバーエフェクトでした。
トップページにのみ適用しているcssなので、消しても問題ありませんでした。
(トップページはAMP無効化している)

 

もしもアフィリエイトのかんたんリンクが使えない

もしもアフィリエイトのかんたんリンクは、AMP非対応です。
『ぶろぐしる~』には、もしもアフィリエイトのリンクを多用しています(爆)

 

非AMPページ
もしもアフィリエイトのかんたんリンクは問題なく表示されています。

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 01 AMP化するともしもアフィリエイトのかんたんリンクが消える

 

 

AMPページ
もしもアフィリエイトのかんたんリンクが『リンク』の文字だけに!!!

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 02 AMP化するともしもアフィリエイトのかんたんリンクが消える

 

テキストリンクならAMPの影響を受けなさそうなので、アマゾンアソシエイトや楽天アフィリエイトのテキストリンクに変更しました。
この作業が結構めんどうくさかったです・・・。

メモ

私は、テキストリンクのほうがクリック率が高くなると判断しました。
(もしもアフィリエイトのかんたんリンクを貼っているページはAMP無効化しておくのも手です。収益が発生しているページならなおさら)

 

AMP化をしたくないページには、『このページでAMPを無効にする』にチェックを入れてください。
ページを個別に【AMP化をするORしない】を選択できるのも便利です。

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 ルクセリタスAMP無効化はチェックのみで簡単無効化

 

まとめ

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 私普通
ばらもん。
いかがでしたか?

LuxeritasでAMP化する手順をご説明しました。
AMP化したページデザインを崩すことなく表示できるのは、Luxeritas最大の魅力です。

 

注意ポイント

AMP化する前は、スマホからページ表示をすると4秒ほどかかっていました。

 

しかし、AMP化をすることで4秒→即座にページ表示可能になりました。

【Luxeritasルクセリタス】AMP化しないのは損だよ~!手順&注意点 私普通
ばらもん。
AMP化ってすげぇ・・・

 

早いページだと翌日には、検索結果にAMPの稲妻マークが反映されていました。

 

Luxeritasなら、AMP化をしないのは損ですよ。以上です。

 

※本記事でご紹介した作業は必ず自己責任で行ってください。

そろそろ、有料テーマを使ってみたいと考えていませんか?

 

結論です。
あなたの貴重な時間を無駄にしないためにも『AFFINGER5』を買ってください。

LuxeritasとAFFINGER5の2つのブログ運営をしている私が理由を解説します。

 

AFFINGER5は¥14,800(税込)です。

サラリーマンの時給平均って『1,486円』らしいです。

サラリーマンの給料、時給換算するとなんと平均「1486円」
出典元:マイナビ学生の窓口フレッシャーズ(https://gakumado.mynavi.jp/freshers/articles/14142

 

10時間、働けばAFFINGER5を購入できるって計算です。

私は、別ブログでLuxeritasを使い始めて1年以上経っています。
自分なりに、CSSやHTMLをカスタマイズしましたがAFFINGER5の『A』にも及んでいませんw。

正直に言って、CSSやHTMLをカスタムするために費やした時間は10時間は超えています。

 

注意ポイント

ググった時間

デザインを考慮する時間

CSSやHTMLを記述する時間

etc・・・

10時間以上の貴重な時間をカスタムに費やしても、思い通りのデザインにできていないのが現実です。
私は職業柄(得意言語はCOBOL笑)、プログラミングには詳しいと自負していましたが勘違いも良いところでした。

 

繰り返します。
あなたの貴重な時間を無駄にしないためにも、AFFINGER5を買ってください。

あなたがどんなに優れたSEであったとしても、たったの10時間でAFFINGER5並のカスタマイズをすることは不可能です。
¥14,800(税込)で【優れたデザイン✕装飾✕操作性のテーマ】を手に入れることができるなら安いとすら感じます。

 

注意ポイント

失った時間は取り戻すことはできません。
CSSやHTMLに時間を費やすくらいなら、記事を書いていたほうが有意義です。

 

Luxeritasで別ブログを運営している私が断言します。
『AFFINGER5』を買うということ=貴重な時間を買うこと。

\ブログ汁限定特典付き/

AFFINGER5(特典付き)を手に入れる

 

ドメインパワー=6.4でも1位を取れた検索クエリを教えます

-ルクセリタス