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

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

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

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

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

※はてなブログでAMP CSSを設定する際の注意点など、詳しいことは前回の記事をご参照ください。

（2017年8月27日、追記あり）

ページ全体のフォントや文字色などを変える
記事本文全体の文字の大きさや行間を変える。
段落の文字の大きさを変える
各見出しの文字の大きさを変える
日付の文字色を変える
カテゴリーの文字色を変える
記事下部の脚注全体の文字の大きさを変える
ブログアイコンを消す
ページ最下部のの"Powered by Hatena Blog."を消す
アイコン
- 画像を使った方法
- CSSのみでアイコンを表現する
統括

ページ全体のフォントや文字色などを変える

body {
    color: #454545;
    font-family: Arial, sans-serif;
}

ページ全体の基本となるフォント設定は、bodyで設定しています。

記事本文全体の文字の大きさや行間を変える。

.entry-content {
    line-height: 1.7;
    font-size: 100%;
}

先ほどとは違い、記事本文のフォントなどに影響がでます。

記事本文とは、記事タイトルをふくめた記事全体の部分です。

AMPでは、全体の文字が小さく感じている方も多いと思われます*1。ここを変えれば文字は大きくすることができます。

段落の文字の大きさを変える

.entry-content .paragraph,
.entry-content p {
    font-size: 110%;
}

記事中の文（段落）だけ変えるなら、ここに設定します。

今のところ.paragraphだけでも段落全体に設定できるようですが、デフォルトではp要素も一緒に設定しているので、それに習って同じように設定しています。

各見出しの文字の大きさを変える

.entry-content h2 {
    font-size: 130%
}

デフォルトの見出しのフォントサイズは、全て.entry-contentの子孫要素で指定されています。

h3やh4など各見出しは、この組み合わせで個別に設定する必要があります。*2

日付の文字色を変える

.entry .date {
    color: #ff9900;
}

上記と同じように、日付のスタイルも子孫セレクタで設定しています。

変更する際は.entryを忘れずに付けてください。

カテゴリーの文字色を変える

.categories,
.categories a {
    color: #999999;
}

カテゴリーのフォントや大きさを変更するだけなら.categoriesだけに設定してもいいです。

ですが、文字色も変更するときはa要素も同時に設定しなくてはいけません。

記事下部の脚注全体の文字の大きさを変える

.entry-content > .footnote {
    font-size: 80%;
}

脚注全体を一括で設定したいときに有効です。

子要素だけにスタイルを適応する>は忘れずに付けてください。.footnoteだけだと脚注の全体と個別にスタイルが二重で設定されてしまいます。

また脚注全体ではなく、脚注の文（段落）だけに指定する場合は、.footnote.paragraphで指定するという方法もあります。

ブログアイコンを消す

.header-blog-icon {
    display: none;
}

トップ画像がない状態でのブログアイコンは【デザイン設定】から消すことはできません。

なので、消したい場合はCSSで設定する必要があります。

ページ最下部のの"Powered by Hatena Blog."を消す

.powered-by-hatenablog {
    display: none;
}

ページ最下部にある「Powered by Hatena Blog.」を消したい場合は、このクラスに設定することで消すことができます。

アイコン

はてなブログAMPでは、現在(2017/04/23)のところ「Font Awesome」といったアイコンフォントは使えません。

日付やカテゴリーの先頭にアイコンを付けたい場合は、何らかの工夫が必要になります。

画像を使った方法

その中でも単純で文字数（バイト数）も少なくてすむ方法は、画像を使った方法です。

.blogicon-folder, .date::before {
    background-size: 15px 15px;
    display: inline-block;
    height: 15px;
    vertical-align: text-bottom;
    width: 15px;
}
.date::before {
    background-image: url( /*画像のURL*/ );
    content: "";
}
.blogicon-folder {
    background-image: url( /*画像のURL*/ );
}

img要素を挿入することはできませんので、背景画像として設置するしかありません。

大きさはAMPでの日付やカテゴリーの要素の高さである15pxに合わしています。画像自体の大きさはRetinaディスプレイに合わせて大きく作くると過程してますので、background-sizeで画像サイズを調整しています。

ちなみに、はてなブログの画像である「はてなフォトライフ」にある画像のURLを取得する方法はいくつかあり、簡単な方法を2つほど紹介しますと

「画像を投稿」などして、記事中に画像を貼り付けた後、右クリック→「画像アドレスをコピー」などで取得する。
「はてなフォトライフ」でアップロードした画像を表示させ、右クリックで→「画像アドレスをコピー」などで取得する。

このような方法があります。

このように個別で設定してもいいのですが、日付とカテゴリーの2つのアイコンを設置する場合、アイコン画像を1つにまとめ表示位置をずらすことで各アイコン表示する方法もあります。いわゆるCSSスプライトです。

.blogicon-folder, .date::before {
    background-image: url( /*画像のURL*/ );
    background-size: 30px 15px;
    display: inline-block;
    height: 15px;
    vertical-align: text-bottom;
    width: 15px;
}
.date::before {
    background-position: 0 0;
    content: "";
}
.blogicon-folder {
    background-position: 15px 0;
}

CSSスプライトは昔から使われた技術なので、作り方などは検索すれば多くの情報がヒットします。また作り方や設置の仕方に関しては、これらのサイトを見れば参考になると思います。

参考リンク：

CSSのみでアイコンを表現する

ただし、画像を使った方法は代替テキストである"alt"を設定できないという欠点があります。

Scriptも使えないAMPでは、日付やカテゴリーにタグを挿入するといったカスタマイズはできませんので、こればっかりはどうすることもできません。

そこで少々力技ですが、CSSのみで日付やカテゴリーのアイコンとして使えそうなデザインを作る、という方法を考えてみました。

CSSの量は増えますが、代替テキストといったものを必要としないというメリットがあります。いちおう、表示テスト用にサンプルページも用意しています。

日付アイコンに使えそうな時計風デザインのCSS

リンク：サンプルページ

.date {
    display: inline-block;
    position: relative;
}
.date::before {
    border: 2.5px #3d3f44 solid;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
}
.date::after {
    border-bottom: 2px #3d3f44 solid;
    border-left: 2px #3d3f44 solid;
    content: "";
    height: 4px;
    position: absolute;
    left: 6px;
    top: 3px;
    width: 3px;
}

単純に円をCSSで作って、中にL字デザインのborderを設置し、「時計」のようなデザインにしたものです。

設定しているCSSによって、中のL字の位置が微妙に変わる場合があります。デザインが小さいので、1ピクセルでもずれたら崩れてしまうのです。

ちなみに、CSSの量を減らすため、中のL字を実際のフォントの"L"の文字で代用するという方法も考えたのですが、訪問者側の環境に大きく左右されるのでボツにしました。

カテゴリーアイコンに使えそうなタグ風デザインのCSS

リンク：サンプルページ

.blogicon-folder {
    background: #9aa5ab;
    display: inline-block;
    height: 9px;
    position: relative;
    transform: rotate(45deg);
    width: 12px;
}
.blogicon-folder::before {
    border: 4.5px transparent solid;
    border-right-color: #9aa5ab;
    content: "";
    position: absolute;
    top: 0;
    right: 12px;
}
.blogicon-folder::after {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: 2.5px;
    position: absolute;
    left: -2px;
    top: 3.25px;
    width: 2.5px;
}

長方形に三角を合わせ、それに小さな白い丸を設置して、タグのようなデザインにしています。

大きくすればデザイン的に荒いところが目立つのですが、小さなアイコンの場合は荒い所は目立ちにくいように感じます。

これも三角形を作っているborderの大きさが長方形の大きさ（height）と合わなくなることがあるので、微調整が必要なときもあります。

タグのようなデザインに、角に丸みを付けたCSS

少々CSSが長くなりますが、先ほどのカテゴリーアイコンの角を丸めたものも作ってみました。

リンク：サンプルページ

.blogicon-folder {
    background: #9aa5ab;
    display: inline-block;
    height: 9px;
    position: relative;
    transform: rotate(45deg);
    width: 12px;
}
.blogicon-folder::before {
    background: #9aa5ab;
    border-radius: 1px;
    content: "";
    height: 7px;
    left: -3px;
    position: absolute;
    top: 1px;
    transform: rotate(-45deg);
    width: 7px;
}
.blogicon-folder::after {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: 2.5px;
    left: -2px;
    position: absolute;
    top: 3.25px;
    width: 2.5px;
}