AMP前々回と前回と続いたAMPの記事も今回で最終回です。CSSで、実際に使えるCSSをいくつかご紹介します。いっても、特別難しいことはありません。AMPページを開いてデベロッパーツールなどで見ていただけたら分かりますが、構造自体は簡単にできており、はてなブログが前もって設定しているデフォルトのCSS自体も比較的かんたんに出来ています。容量制限の50KB(デフォルトCSSを差し引いて約43KBほど)は超えないように注意してくださいね。CSSを設定する際の注意点など、詳しいことは前回の記事をご参照ください。追記あり)スポンサーリンクページ全体のフォントや文字色などを変える記事本文全体の文字の大きさや行間を変える。sans-serif;}ページ全体の基本となるフォント設定は、bodyで設定しています。記事本文全体の文字の大きさや行間を変える。100%;}先ほどとは違い、記事本文のフォントなどに影響がでます。記事本文とは、記事タイトルをふくめた記事全体の部分です。AMPでは、全体の文字が小さく感じている方も多いと思われます*1。ここを変えれば文字は大きくすることができます。110%;}記事中の文(段落)だけ変えるなら、ここに設定します。今のところ.paragraphだけでも段落全体に設定できるようですが、デフォルトではp要素も一緒に設定しているので、それに習って同じように設定しています。130%}デフォルトの見出しのフォントサイズは、全て.entry-contentの子孫要素で指定されています。h3やh4など各見出しは、この組み合わせで個別に設定する必要があります。#ff9900;}上記と同じように、日付のスタイルも子孫セレクタで設定しています。変更する際は.entryを忘れずに付けてください。#999999;}カテゴリーのフォントや大きさを変更するだけなら.categoriesだけに設定してもいいです。文字色も変更するときはa要素も同時に設定しなくてはいけません。80%;}脚注全体を一括で設定したいときに有効です。子要素だけにスタイルを適応する>は忘れずに付けてください。.footnoteだけだと脚注の全体と個別にスタイルが二重で設定されてしまいます。脚注全体ではなく、脚注の文(段落)だけに指定する場合は、.footnote.paragraphで指定するという方法もあります。none;}トップ画像がない状態でのブログアイコンは【デザイン設定】から消すことはできません。消したい場合はCSSで設定する必要があります。Blog.」を消したい場合は、このクラスに設定することで消すことができます。Awesome」といったアイコンフォントは使えません。日付やカテゴリーの先頭にアイコンを付けたい場合は、何らかの工夫が必要になります。画像を使った方法その中でも単純で文字数(バイト数)も少なくてすむ方法は、画像を使った方法です。);}img要素を挿入することはできませんので、背景画像として設置するしかありません。大きさはAMPでの日付やカテゴリーの要素の高さである15pxに合わしています。画像自体の大きさはRetinaディスプレイに合わせて大きく作くると過程してますので、background-sizeで画像サイズを調整しています。ちなみに、はてなブログの画像である「はてなフォトライフ」にある画像のURLを取得する方法はいくつかあり、簡単な方法を2つほど紹介しますと「画像を投稿」などして、記事中に画像を貼り付けた後、右クリック→「画像アドレスをコピー」などで取得する。「はてなフォトライフ」でアップロードした画像を表示させ、右クリックで→「画像アドレスをコピー」などで取得する。このような方法があります。このように個別で設定してもいいのですが、日付とカテゴリーの2つのアイコンを設置する場合、アイコン画像を1つにまとめ表示位置をずらすことで各アイコン表示する方法もあります。いわゆるCSSスプライトです。0;}CSSスプライトは昔から使われた技術なので、作り方などは検索すれば多くの情報がヒットします。作り方や設置の仕方に関しては、これらのサイトを見れば参考になると思います。WebクリエイターボックスCSSのみでアイコンを表現するただし、画像を使った方法は代替テキストである"alt"を設定できないという欠点があります。Scriptも使えないAMPでは、日付やカテゴリーにタグを挿入するといったカスタマイズはできませんので、こればっかりはどうすることもできません。そこで少々力技ですが、CSSのみで日付やカテゴリーのアイコンとして使えそうなデザインを作る、という方法を考えてみました。CSSの量は増えますが、代替テキストといったものを必要としないというメリットがあります。いちおう、表示テスト用にサンプルページも用意しています。3px;}単純に円をCSSで作って、中にL字デザインのborderを設置し、「時計」のようなデザインにしたものです。設定しているCSSによって、中のL字の位置が微妙に変わる場合があります。デザインが小さいので、1ピクセルでもずれたら崩れてしまうのです。ちなみに、CSSの量を減らすため、中のL字を実際のフォントの"L"の文字で代用するという方法も考えたのですが、訪問者側の環境に大きく左右されるのでボツにしました。2.5px;}長方形に三角を合わせ、それに小さな白い丸を設置して、タグのようなデザインにしています。大きくすればデザイン的に荒いところが目立つのですが、小さなアイコンの場合は荒い所は目立ちにくいように感じます。これも三角形を作っているborderの大きさが長方形の大きさ(height)と合わなくなることがあるので、微調整が必要なときもあります。タグのようなデザインに、角に丸みを付けたCSS少々CSSが長くなりますが、先ほどのカテゴリーアイコンの角を丸めたものも作ってみました。2.5px;}CSSは長くなりますが、こちらのほうがカテゴリーで使われているアイコンにまだ近い感じになります。これらは本来は相対値で設定して、フォントサイズで大きさを簡単に変えれるようにすると利便性が高くなるのですが、CSS節約もかねて、要素の大きさに合うように直接ピクセルで設定しています。CSSライブラリがありました。アイコンを表現したい時には非常に参考になると思います。三回に分けて、はてなブログのAMPに関する記事を書きました。はてなブログのAMPは、HTMLのほとんどをシステム側で調整してくれるの、今のところはCSSをデザインするときに気をつけるぐらいです。CSS自体も容量制限などはありますが、はてなブログのAMP自体の構造は非常にシンプルなので、そう簡単には容量オーバーになるとは思いません。デザイン自体の自由度はかなり高いのではないのでしょうか。サイドバーや記事前後のHTML挿入がない分、どうしても出来ることの幅は従来よりは狭まりますけね。はてなブログは機能追加といったシステム開発が活発で、また、はてなブログのAMPもまだベータ版と開発途中のものなので、もしかしたらこれからもっと機能が充実するかもしれません。わたしとしては、CSSのスタイル設定ができるようになっただけでもたいへん嬉しい機能だったので、とてもありがたかったです。これからも当分の間は、設定のAMP配信にチェックを入れておきたいと思います。↓過去2回の記事です。90%;*2:ただし、h6はデフォルトのcssでは設定されていません。はてなブログAMPのソーシャルボタンをCSSでアレンジ以前にこのような記事を、別ブログにて書いたのですがこの度、...2018-02-15はてなブログのAMPで、SNSボタンのデザインをCSSでアレンジ超久々にWeb系、はてなブログのカスタマイズに関する記事を少し...2017-08-06リストのマーカーをCSSでカスタマイズする方法まとめHTMLでリストを作ると、自動でマーカーが付きます。非常に便利...2017-06-24はてなブログのスマホ版アイコン画像をフォトライフやインラインイメージを使って変える方法スマホ版を作るにあたり、アイコンにもこだわりました。はてなブログPro冬眠しないタヌキ。プロフィールはこちら。わたしと納豆ごはんスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。