わたしと納豆ごはん

納豆、Web、雑記など

AMP

【2019年以降・仕様変更版】はてなブログAMPのソーシャルボタンをCSSでアレンジ

以前にこのような記事を、別ブログにて書いたのですがこの度、そのSNSボタンの仕様が変更します。そこで、この最新版に合わせたコードを公開したいと思います。次のCSSで、前記事と同じように丸いSNSボタンになります。ちなみに大きさの変更は、元のボタンの…

はてなブログのAMPで、SNSボタンのデザインをCSSでアレンジ

超久々にWeb系、はてなブログのカスタマイズに関する記事を少し。といっても小ワザですが(笑)はてなブログでもすっかりお馴染みのAMP配信ですが、カスタマイズの自由度が低いのが欠点ですよね。記事本文の自由度は高いですがそれ以外、例えばSNSボタンなど…

はてなブログのAMP配信で、imgからamp-imgへ変換する際の表示サイズの継承ルール

img要素には width属性とheight属性とがあります。これらは通常は指定していたほうが良い、と言われています。あらかじめ表示サイズを指定することで、レイアウトの計算がしやすくなり、体感的に表示が速くなるからです。まあ、CSSでも指定できるので、絶対…

はてなブログのAMPでは、アドセンスのコード(非同期)を自動変換する

先日(2017年5月5日)、はてなブログでAMP用に記事中にGoogle AdSense(アドセンス)をせっせこと設置していたのですが。そのとき、広告の表示を統一だせる目的で、PCなどの従来の記事用とAMP配信の記事用と2つの広告ユニットのコードを並べて記入していたの…

はてなブログのAMPに使える、超簡単なCSSの設定やサンプル集

前々回と前回と続いたAMPの記事も今回で最終回です。今回ははてなブログのAMP CSSで、実際に使えるCSSをいくつかご紹介します。といっても、特別難しいことはありません。AMPページを開いてデベロッパーツールなどで見ていただけたら分かりますが、構造自体…

はてなブログでAMP CSSを設定するときに、気をつけなければいけないCSSの書き方

前回の記事では、はてなブログの記事(HTML)に関する、気をつけておきたいことを紹介しました。今回は、はてなブログのAMP配信で設定できるようになったCSSの設定についてです。記事、つまりHTMLに関しては、はてなブログ側がほとんど自動で変換してくれる…

はてなブログでAMPを配信する際に、気をつけておきたい記事の書き方

はてなブログでAMP配信がスタートし、つい先日、CSSを設定することが、できるようになりました。AMPに適用するCSSを設定できるようにしました - はてなブログ開発ブログこれによりAMPでもデザインがカスタマイズできるようになり、このブログでもCSSを設定し…