読者です 読者をやめる 読者になる 読者になる

interact

旅行&PC+その他なんでもありなブログ

はてなブログのAMP用CSS設定でヘッダー画像を調整してみました

ブログ運営

Sponsored LINK

f:id:interacting:20170331000136j:plain

 

ようやくはてなブログのAMPもCSSが設定できるようになりました。

はい、皆さんこんにちは。いんたらくとです。

 

 

 

AMPのCSSが編集できる!

f:id:interacting:20170330222610p:plain

 

AMPのCSSはブログテーマがレスポンシブルの設定になっていても関係なく、ヘッダー画像はデフォルトで横100%で縦200pxというCSSが指定されています。それだと、上記のようにヘッダー画像の中央部分だけが表示されて残りが見切れてしまっていました。

 

f:id:interacting:20170330222613p:plain

 

AMPのCSSが編集できるようになったおかげで、上記のように表示が制御できるようになりました。

 

staff.hatenablog.com

 

ヘッダー画像のサイズ調整

ヘッダー画像は「.header-image」というタグで管理されていて、先程にも書きましたが幅が100%で高さが200pxが初期設定のようです。CSSでは「%」よりも「px」が優先されるため高さの200pxに合わせて画像が表示されるので、横幅が概ね320pxで見切れてしまいます。

 

そこで、なかば強引な方法ですが、高さを調整することで全体が表示できるようにしてみました。

 

もともとは、レスポンシブ対応のヘッダー画像の設定方法です。元記事を探してみましたがすぐには見つからなかったので、見つけ次第ここで紹介したいと思います。ご存知の方は教えてくださると助かります。

 

お手軽コピペ

@media screen and (max-width:500px){.header-image{height:64px}}

 

この文字列をAMPのCSS設定に貼り付けてください。貼り付ける場所は上記の公式を参照してください。

 

分かる方向け

@media screen and (max-width: ※2 px){.header-image{height: ※1 px}}

 

※1画像の高さ:「※1」には任意の画像サイズ(高さ)が入ります。おすすめのサイズは以下に記載の手順で計算することで値を求める事ができます。

 

※2分岐条件:「※2」には想定している画面幅が入ります。スマートフォン対応であれば320で問題がないと思われますが、余裕を持って500pxを使用しています。分岐条件を組み合わせることで微調整もできます。

 

手順1:縦横比の算出

高さ÷横幅×100で縦横の比率が算出できます。

 

☆横幅が1000pxで高さが200pxの場合

200px / 1000px x 100 = 20%

200/1000*100 - Google 検索

 

☆横幅が800pxで高さが200pxの場合

200px / 800px x 100 = 25%

200/800*100 - Google 検索

 

手順2:最小サイズの高さの算出

高さを求める必要があるので、画面の横幅×画像の比率で計算をします。条件を組み合わせていくと何パターンでも作る事ができますが、CSSを最小量にするために「小は大を兼ねる」方式でここでは320pxを使用しています。

 

※320pxは市場で出回っている中でも「小さいスマートフォン」であるiPhone5/5S/SEのサイズです。

 

☆横幅が320pxで画像比が20%の場合

320*20%=64px

320/0.2 - Google 検索

 

☆横幅が320pxで画像比が25%の場合

320*25%=80px

320*0.25 - Google 検索

 

ここで算出された数値を※1に入力して完成です。多分見切れずに表示されているはずです。パソコンからならば、URLの末尾に「?amp=1」を追加することでampページの確認ができるので確認して見てください。検索エンジンに登録されてある内容は自動的に更新されます。

 

わからない場合は

これよりももっと分かりやすく「すなばいじり」を運営されている「ぽけっとしすてむ先生」が解説してくれるはずなので、それをお待ち下さい。

 

psn.hatenablog.jp

 

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

 
いちばんよくわかるWebデザインの基本きちんと入門 (Design&IDEA)

いちばんよくわかるWebデザインの基本きちんと入門 (Design&IDEA)

  • 作者: 伊藤庄平,益子貴寛,久保知己,宮田優希,伊藤由暁
  • 出版社/メーカー: SBクリエイティブ
  • 発売日: 2017/02/25
  • メディア: 単行本
  • この商品を含むブログを見る
 

Copyright © 2017 interact All Rights Reserved.

本文・画像・ソースコードの無断転載禁止