ブロギングライフブロギングライフブログサイト運営関連、AdSenseについての情報などを発信しています。SEO・ウェブマスター関連の主な出来事・発表・ニュースChico@ブロギングライフ2019年12月30日2019年も残りわずかとなりました。2019年の検索・ウェブマスターに関連する主な出来事について、時系列順に振り返って紹介します。年が明けて2020年となりました。2010年代が終わり、2020年代に入りました。過去を振り返ると色々なことがありましたが、これからも色々なことが起こると思います。2020年代は、自分が納得できるようなことをしていきたいと思っています。イメージスライダーの特徴2つの画像を一つの画像スペースに重ねて表示して、垂直に表示されるスライドバーを動かして比較することが可能です。ユーザーは、クリック、タッチ、ドラッグなどの操作でバーを動かして、画像を比較できます。以下はAMP公式ブログの説明を訳したものです。(多少意訳しています。)全ての端末、プラットフォーム上で共通の操作による動作ビルトインアクセシビリティ:他のAMPコンポーネントと同様に、アクセシビリティを考慮して設計されています。コンポーネントは、キーボードのナビゲーション、スクリーンリーダーのどちらでもアクセスできます。<head>タグ内)にamp-image-sliderのコンポーネントをインポートする以下のコードを設置します。左側の画像、2番目が右になります。コンポーネントは、画像のラベル用に2つの<div>要素を含めることができます。ラベルは、画像の上にオーバーレイ表示されます。アトリビュートが必要になります。デフォルトでは、ラベルは左上と右上の角に表示されます。hint)は、デフォルトで常に表示されます。ユーザーがクリックやタッチして、スライダーを操作すると、ヒントはフェードアウトします。スライダーがビューポート内に残っていて、再び戻るとヒントは再表示されます。アトリビュートを加えると、ヒントの再表示が無効になります。その他、ヒントのカスタマイズや初期表示のスライダーバーを位置を中央からずらしたり、ステップサイズを変更することもできます。AMPイメージスライダーを設定してみましたネイティブAMP対応のブロギングライフBLOGにイメージスライダーを設定してみました。パソコンでもモバイルでも、無事にイメージスライダーが動作しました。動作確認後、念の為、AMPのバリデーションテストを行ったところ、amp-image-sliderタグ内に<br>タグが混在していたため、不合格となりました。動作は問題なくしていても、brタグが混在していると、AMPのバリデーションはエラーとなることを知りました。AMPは仕様に厳しいです。brタグが混入した理由は、WordPressの自動整形機能によるものです。自動整形機能を無効にする設定を行って、AMPテストしたところ、無事にバリデーション合格となりました。brタグの自動挿入を無効に設定する方法については、以下の記事をご覧ください。備考:カスタマイズなどを試してみたのですが、カスタマイズの設定は動作しないことがありました。実際に設定してみた感想AMPイメージスライダーの機能は、ビフォーアフターなどの比較画像を表示するのに最適だと思います。Eコマースのサイトなどでの需要もかなりあって、リクエストを受けて、イメージスライダーを開発したのではと推測しています。イメージスライダーは、AMPページでのみ動作します。AMP用と通常頁用で分けて、ページの制作をするのは手間が余分にかかるので、ネイティブAMP対応サイトに適していると思います。モバイルのAMPページの人気やコンバージョン率が高いサイトであれば、AMPページ専用にAMPイメージスライダーを導入するのも選択肢の一つです。AMPでは多数のコンポーネントが用意されています。今回正式リリースされたイメージスライダーの様にユーザーの利便性を高める可能性のある機能を備えたコンポーネントも色々あります。ネイティブAMPが正式導入されると、コンポーネントの利用も増えてくると予想しています。AMPイメージスライダーについての簡単な紹介と設置してみた例などをYouTubeで紹介しています。Chico@ブロギングライフコメント0件AMP関連記事2017年3月18日AMPAMPの検索パフォーマンス分析:CTR(クリック率)は高い。カスタム検索Googleの強力な検索エンジンを使用して、サイト内の記事を検索します。カスタム検索の設置方法は、こちらの記事をご参照下さい。2020年2月...Moreメルマガ・ニュースレター登録サイト運営関連のニュース、更新情報などをメールマガジンで配信しています。以下のフォームにメールアドレスを入力すると、メールマガジンの登録に関するメールが送信されます。届いたメールの内容を確認後、メール内に記載されたURLから登録を完了して下さい。ポッドキャストサイト運営とSEO関連の主な出来事、発表などについて、毎週、ニュースレターと合わせてポッドキャストで配信しています。Blogger関連の情報、Bloggerの使い方、活用法についての情報を発信しています。Blogger@ブロギングライフWebサイト運営関連の情報フォーラム:フォーラムプラットフォームでありながら、多彩なメディアサポート、多機能を提供するphpBBを使用したフォーラムサイトです。