タグ

ampに関するhal7piのブックマーク (6)

  • amp-date-pickerが正式公開。AMPページでカレンダーを見ながら日付指定が可能に

    [レベル: 上級] AMP ページでカレンダーを見ながら日付を指定できるコンポーネントとして、amp-date-picker が正式公開されました。 2月の AMP Conf で amp-date-picker は発表されており、これまでは試験公開の状態でした。 ホテル・フライト手配サイトほか EC サイトでも使える amp-date-picker カレンダーでの日付指定がよく利用されるのは、ホテルやフライトを予約するトラベルサイトですね。 ほかには、レストランの予約だったり、EC サイトであれば配送日指定にも利用できます。 amp-date-picker を実装すれば AMP ページでも使いやすいカレンダー指定が可能になります。 単一日の指定と、開始日と終了日を指定した期間指定ができます。 レイアウトに関してはたとえばライトボックス表示する場合は、モーダルウィンドウで開いたりフルスクリー

    amp-date-pickerが正式公開。AMPページでカレンダーを見ながら日付指定が可能に
    hal7pi
    hal7pi 2018/07/03
  • 『gampとは?』

    gampの正体アメブロは自動でAMP配信gampを元のアメブロ記事のURLにつけるgampページでの表示gampページでのCSSは出来合いのものを利用するアメブロではAMP配信は自動化されているgampページからアクセスがあることの意味アメブロのアクセス解析に記録が残った理由gampページからのアクセスを増やそうgampとは何か、あるいはgamp.amebloとは何か? アメブロのアクセス解析をよーく見てみると、gampあるいはgamp-ameblo-jp.cdn.ampproject.orgといったところがアクセス元になっていることに気付くことがあります。 これらのアクセス元は一体どんなサイト、どんな記事でしょうか?amebloの文字が入っていることからしてアメブロ内の記事からアクセスをもらっていると考えられます。 gampの正体 gampとは実は自分の記事のAMP配信ページについている

    『gampとは?』
  • AMPで配信される記事下にも関連記事を表示するようにしました(追記あり) - はてなブログ開発ブログ

    はてなブログでは、AMP(Accelerated Mobile Pages)で配信される記事の文下(ソーシャルパーツを表示していればその下)でも、関連記事を表示するようにしました。 そのブログに投稿された記事から、表示中の内容に関連するとみられるものを最大5件まで、一覧形式で表示します。AMPで配信される記事の場合、デザイン設定画面(PC画面)から設定できるスマートフォン版関連記事の表示設定に合わせて、表示・非表示が切り替わります。 今回の取り組みは、2017年6月に通常の記事に向けて導入した新機能を、AMPで配信される記事にも適用したものです。 記事下に「関連記事」を表示します - はてなブログ開発ブログ ※はてなブログのAMP配信は、有料プラン「はてなブログPro」に加入しているユーザー向けのベータ版機能です。詳細は関連ヘルプなどをご参照ください。 ※記事によっては関連記事が表示され

    AMPで配信される記事下にも関連記事を表示するようにしました(追記あり) - はてなブログ開発ブログ
  • はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ

    はてなブログのAMP対応AMP対応について、レンタルブログサービスならでは制約もあるので、それらを中心に紹介していきます。 設定編はてなブログでAMP対応するのはすごく簡単です! 有料プランの「はてなブログPro」を利用している方が対象ですが、「設定→詳細設定」にある「Accelerated Mobile Pages (AMP) を配信する」にチェックを入れて変更するボタンを押したら完了です。 注意事項はてなブログでAMPに対応させる場合、注意事項がたくさんあるのでまずはそちらから紹介します。 はてなブログのデザインテーマは反映されないサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)が配信されないstyle属性(CSS)が反映されない記事中のJavaScriptが反映されないはてなスターが反映されないはてなカウンターは非対応(カウントされない)ざっくり説明すると、

    はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ
  • 『アメブロのAMPページでテーブルを表示するCSS』

    はるなぴ日記 アクセスアップ系の技術ブログ アクセスアップ記事を中心とした技術ブログをアメブロで書いています!秀丸エディタや秀丸マクロの記事もたくさんアップするよ! アメブロのAMPページでテーブルを表示するCSSを記事にしました。 tableタグ、thタグ、tdタグを使ってテーブル表示をさせた場合、アメブロのAMPページでは枠線が一切表示されません。テーブル内の項目だけが表示され非常に分かりにくくなります。このためアメブロで敢えてテーブル表示を利用している人は少ないようにみえます。 今回はアメブロ側が用意してくれたAMP用のCSSを利用することでテーブルの枠線を表示させ、テーブル内の項目も中央寄せになるようにしてみました。 これでアメブロでも安心してtableタグが使えます。というか、はるなぴはマークダウン記法で記事を書いていますので、もともとテーブル表示が非常にかんたんにできます。 ア

    『アメブロのAMPページでテーブルを表示するCSS』
  • AMP対応ニュース記事に掲載する画像のサイズ要件をGoogleが変更、横幅を696pxから1200pxへ

    [レベル: 上級] AMP 対応したニュース記事に掲載する画像のサイズ要件を Google は変更しました。 今までよりも大きなサイズの画像でないと、AMP カルーセルに表示されなくなる可能性があります。 横幅が 696 px から 1200 px へ 画像の横幅の最低サイズが拡大されました。 Article(記事)の構造化データの実装方法を解説している Google のデベロッパー向けサイトのドキュメントが次のように更新されています。 【以前】 Images should be at least 696 pixels wide. (画像は横幅が最低でも 696 ピクセルでなければなりません。) 【現在】 Images should be at least 1200 pixels wide. (画像は横幅が最低でも 1200 ピクセルでなければなりません。) 画像の横サイズ要件が、696

    AMP対応ニュース記事に掲載する画像のサイズ要件をGoogleが変更、横幅を696pxから1200pxへ
  • 1