linkAMPで推奨されているソーシャルメディアの埋め込み設定をきれいに表示する方法です。WordPressでこれから新規投稿をすることを仮定し、テキストエディタにクイックボタンを設定します。インスタグラム、YouTube、ツイッターと、giphyというgifアニメ、フェイスブックなどにiframeを使用します。gettyimagesの参照についても書きました。link基本事項AMPについては割愛します。head内に、各SNSのAMPスクリプトを貼り付けます。最初の一行でスクリプトを呼んでいます。AMPサイトを作っているなら既に書いてあると思います。インスタ、YouTube、ツイッターと、gifアニメ用のamp-anim、フェイスブックなどにiframeを使っています。AMPの外部読み込み画像についてAMPサイトは参照する外部URLのimg画像(動画含む)の読み込み先がhttpsでないとエラーになります。WordPressでアップロードしたimgファイルはhttpでもOKとなっていました。WordPressのクイックボタンを使うWordPressのテキストエディタで、タイトルと本文の間にあるボタンは追加することができます。これを使って埋め込み用のボタンを作ります。functions.phpに以下を追加します。);/////////////////////////////////////////////投稿画面を更新するとボタンが増えていると思います。ボタンを1回押すと、閉じタグも一緒に挿入されるようにしてあります。それぞれ「ショートコード」の部分に「wl9atFDq2Dgk0」のようなショートコードを入れるとレスポンシブに埋め込み表示しれくれます。幅と高さは公式サンプルのままなので、うまく表示できなければ変更しても大丈夫だと思います。amp-iframeなどの中に、border=”0′′などを入れるとエラーになり埋め込みが表示されないなど、これらの埋め込み用スクリプトは、AMP内での指定が厳しいので、公式のまま利用しています。class=”pink”></span>などを入れて、CSSでクラスを設定しておくと、毎回classと打たなくても、ピンクのマーカーで好きな場所に色をつけることができるので、便利です。HTTPS.アニメーションファイルは、HTTPSじゃないとダメですよ。公式に書いてありました。他にも、amp-iframeで参照するURLは、httpは使えないよとエラーになりました。iframe関係の外部参照は、httpsでないといけないということのようです。わたしが多用している「giphy」は以下の設定にすると表示できます。src="https://giphy.com/embed/ショートコード"></amp-iframe>幅、高さ、ショートコードの部分を参照したいgifに変更して使っています。giphyのサイトでURLをチェックするとgifのURLは、httpなのですが、上のコードでエラーにならずレスポンシブに表示してくれます。公式のサンプルに載っているものをそのまま利用しました。gettyimagesはエラーになるスポーツやニュースなどでgettyimagesの埋め込みをサイトに表示している場合、iframeを使っているので、amp-iframeを使えそうだと思ったのですが、gettyはhttpなので、エラーになりました。Foundgettyは、amp-iframeに入れるとhttpは使えないというエラーになり画像が表示されません。iframeのままだと画像は表示されますが、AMPサイトエラーになってAMPページ扱いになりません。今のところgettyを表示するページはAMPを諦めるという選択にしています。gettyがhttps化するのを待つか、giphyのようにAMP対応するのを待つしかなさそうです。gettyは、サッカーの試合のトップ記事などで使われるプロの現場写真が、埋め込みで利用できます。画像をダウンロードすることなく、ニュース記事の補足に写真を増やせるので便利です。英語サイトの方が使いやすいです。APIがあるのでうまく設定すればAMP表示できそうな気がしますが、調査中です。-WordPressWordPressにAMP対応スマホ用サイドバーメニューを設置するモバイル向けに、タップするとサイドバーが出てくるというのを設置しました。覗いてみたところ「samara」という国からのアクセスが日本につい...googleに良いと思われるサイトを作る方法googleのことはgoogleにしか分からない。200以上あるgoogleアルゴリズムは非公開です。Fundamentalsに載っていたので、調べてみました。するだけで、ソフトがダウンロード&インストールされる...PC上でモバイル画面を確認する簡単な方法もちろんプラグイン無し。Chromeを開けば、一瞬で確認と切り替えができます。Chrome拡張機能も必要ありません。ip...vagrant:puttyがタイムアウトする時の解決方法ドットインストールでローカル開発環境を作っているときにつまづいたので、メモ。仮想マシンにログイ...2カラムのレスポンシブをWordPressのPHPで実装するモバイルからのアクセスが9割のfwaryでは、サイドバーは、いらないと思って、ずっと1カラムサイトを作ってきていました。...2カラムレイアウトを簡単なCSSで作る方法ボックスレイアウトにするためのCSSの作り方。float:leftとかいらない。CSS少なくて済む方法。BYfwaryは、kiinaが運営する個人サイトです。世界中の気になるウワサを集めて配信しています。最新情報は、ツイッター配信中です。