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

納豆、Web、雑記など

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

Web はてなブログ HTML・CSS

Sample graffiti

前々回前回と続いたAMPの記事も今回で最終回です。

今回ははてなブログのAMP CSSで、実際に使えるCSSをいくつかご紹介します。

といっても、特別難しいことはありません。AMPページを開いてデベロッパーツールなどで見ていただけたら分かりますが、構造自体は簡単にできており、はてなブログが前もって設定しているデフォルトのCSS自体も比較的かんたんに出来ています。

ただ、容量制限の50KB(デフォルトCSSを差し引いて約43KBほど)は超えないように注意してくださいね。

続きを読む

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

Web はてなブログ HTML・CSS
style.css

前回の記事では、はてなブログの記事(HTML)に関する、気をつけておきたいことを紹介しました。

今回は、はてなブログのAMP配信で設定できるようになったCSSの設定についてです。

記事、つまりHTMLに関しては、はてなブログ側がほとんど自動で変換してくれるます。ですが、CSSに関してはユーザー自身で設定しなくてはいけません。そしてAMPのCSSには、HTML同様に使用の禁止や、制限されているものがあるのです

CSSを設定するときは、これらに注意しなければいけません。今回はその、はてなブログのAMPでCSSを設定するときに、気を付けなければならないことについての記事です。

続きを読む

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

Web はてなブログ HTML・CSS
Google AMP search result

はてなブログでAMP配信がスタートし、つい先日、CSSを設定することが、できるようになりました。

AMPに適用するCSSを設定できるようにしました - はてなブログ開発ブログ

これによりAMPでもデザインがカスタマイズできるようになり、このブログでもCSSを設定してみました。

リンク:
http://www.tomotanuki.com/entry/hatena-amp-html?amp=1

デザインは、このブログでインストールしているテーマ「stripe」のデザインに合わせて、ほぼ同じデザインを使わせていただきました。制作者のMinimal-Greeさんには許可をいただいています(感謝)

このAMPに対応するのに、いろいろ調べました。その調べたことなど、ブログで公開したら何らかの参考になるかな?と思い、3回に分けて記事にいたします。

ご参考になれば、幸いです。

続きを読む

position:absolute は位置指定をしていないと親要素の影響で思わぬ動きをするときがある、という話

Web HTML・CSS

【追記 (

そのときよく使われるCSSがpositionプロパティです。

このプロパティなのですが、親要素と子要素の表示形式やプロパティによって、いろいろややこしかったのです。

続きを読む

CSSでツムツム風の縫い目付きボタンを作ってみた

Web HTML・CSS
f:id:tomotan_uki:20160714092005j:plain

【追記 ():Flexbox(フレキシブルボックスレイアウト)対応ブラウザが増えてきたので、Flexboxを使ったCSSに一部を大幅変更しました。】

今回はCSSの話です。

みなさんは「ツムツム」というゲームをご存知ですか?

ツムツムとはツムツムと呼ばれるぬいぐるみをつないで消していくパズルゲームなんですが

そのゲームはぬいぐるみを基調としているため、ボタンなどゲーム画面がフェルトを縫い付けたようなデザインなんです。

そのデザインをCSSで作ってみるというのが、今回の記事です。

続きを読む
TOP