アメーバブログのCSSカスタマイズを根本から考え直してみます。
これは先日アメブロがAMP配信していることを発見したことからきています。アメブロ開始から4か月近くも全くAMP配信に気付いていませんでした。
なのでAMP配信用のCSSカスタマイズなど考えたこともありませんでした。今ようやく手をつけたというところですが、まだ考えが完全に固まったわけではありません。
そしてこれをきっかけにスマホ用のCSSカスタマイズも真剣に考えてみようと思い始めました。今まではPC版のCSSカスタマイズだけ考えていました。だからスマホで見た表示はひどいものでした。知っていてワザと放置していました。
しかしAMP配信用の表示を見た人はモバイルでGoogle検索している人です。だからAMP配信用の記事を見た後は普通にスマホ用のCSSが施されたページに遷移してくるはずです。そう考えるとAMP用のCSS/HTMLカスタマイズとスマホ用のCSSカスタマイズは切り離して考えることはできません。
そしてスマホ用のCSSカスタマイズをするならばPC版とどう共存させるかという問題も持ち上がってきます。いろいろと考えることが増えますね。
まず順番を考えてみましょう。一番カスタマイズする上での制約が厳しいのはAMP-HTML対応です。アメブロがAMP配信用に用意したCSSしか効かないからです。AMP-HTMLではインラインのstyle指定ですら効きません。剥ぎ取られてしまいます。だからまずAMP配信用のCSS/HTMLカスタマイズから考えます。
次に考えるべきなのはモバイル用のCSSカスタマイズです。これを実現するにはいろいろなやり方があります。そのうちのどれを選ぶかが問題です。
そして最後にPC版のCSSカスタマイズを考えます。ではさっそく見ていきましょう。
AMP配信用のCSS/HTMLカスタマイズ
AMP配信用のCSS/HTMLカスタマイズではアメーバブログ側が用意してくれたCSSを活用して何とか見出し/パラグラフライティングができるように考えていきます。これはこの前少しトライしてみましたね。
見出しと段落を使ったパラグラフライティングの重要性
ところで多くのブログでは諦めモードに入っているようです。これはスマホ用のCSS/HTMLカスタマイズも同じです。何を諦めているのかというと見出しの活用とパラグラフライティングです。つまり見栄え第一になっています。
具体的には…H2タグを使用していません。この前も少し書きましたがAMP配信用のCSSではH2のフォントサイズに1.96remが指定されていて表示が大きすぎます。
これを何とかするのではなく、もう最初からH2を使わないことにしているのです。そしてH3から見出しを書き始めます。H3には1.4remのフォントサイズ指定がかかっており、このまま何もしなくとも見出しらしく表示されるからです。
中にはH3やH4すら使わない、つまり見出しタグを全く使用しないサイトも多く見かけられます。もともとアメブロ文体（非常に短い文を詩のように連ねて書く文体）で書いていますので、見出しと段落の表示をする必要がないからです。このことが「アメブロはGoogleなどの検索エンジンに弱い」と言われる原因になっています。Googleはこのような記事を評価しないからです。結果として検索キーワードで上位表示することが難しくなります。
段落も使われていないことが多いです。pタグに適切なボトムマージンを設定するのではなく、brタグの多用などでしのいでいます。はるなぴも今それほどパラグラフライティングを意識して書いているわけではありませんが、勝負記事ではきちんと考えます。（勝負記事があればの話ですがビジネスではないので…）
検索エンジン対応としてのCSSカスタマイズ
はるなぴがCSSカスタマイズを考えるのはけっして見栄えだけのためではありません。検索エンジンにしっかり捕まえてもらえるようにSEO対策として行っている面が強いです。つまりアメブロ文体用のCSSカスタマイズではありません。なので他のサイトがお勧めするCSSカスタマイズ法とは一味も二味も違ったものになります。
見出しと段落、強調表示はしっかり対策します。これはこの前考えましたので大体は決まりです。（少し修正したい部分はあります）
そしてもう少し考えましょう。つまりAMP用のページで来てくれた人が次にどうするか？できればサイト内を回遊してもらいたいですよね。何と言っても検索キーワードでわざわざ自分のサイトを訪れてくれたわけですから非常に大事な読者であることに間違いありません。
AMP配信用CSSカスタマイズとスマホページの連続性
ということは…スマホページとあまりにも見栄えが違うと違和感を覚えるのではないかということ。この前、見出しは「緑色にする」と宣言しましたが、それならモバイル用ページも同じような見栄えにしないと連続性が失われます。
強調表示も同じです。emタグは太字、strongタグは赤太字と決めたらこれを守っていくことにします。
悩ましいのは文字の大きさです。AMP配信用のCSSではフォントサイズの指定が非常に限られています。なのでAMPページで文字の大きさをコントロールすることは困難です。今の状態だとpタグで囲まれた地の文章の字が小さすぎるように思えます。しかしこれ以上AMP配信用のページではどうすることもできません。
なおコードブロックについては無理やり適用したCSSですので見栄えが異なる点は諦めることとします。
スマホ用のCSSカスタマイズ
アメーバブログで一番悩ましいのがスマホ用のCSSカスタマイズだと思います。いろいろなやり方で実現している人がいます。どれを選んだら良いのか？考えてみましょう。
インラインCSSで実現しているサイト多数
一番多いのがインラインCSSでカスタマイズを実現しているサイトです。ビジネス用途（とは言っても本来は商用利用禁止ですが）で運営しているサイトが多いです。その理由は後述します。
インラインCSSとはHTMLタグの中にstyleを直接書き込むやり方です。例えば…
<p class="mobile-only">スマホ用のCSS</p>とクラス指定でCSSを書かずに、
<p style="margin: 0 20px; font-size: 1.4rem">スマホ用のCSS</p>などと書くやり方です。
これは強力です。何があってもこの指定が表示されるでしょう。しかし逆を言えばいったん埋め込んでしまった以上、見栄えを変えるには該当記事のインラインCSSをすべて書き直すしか手がありません。
HTML5とCSS3で構造と見栄えを分離したはずが全くできていないことになります。逆にHTMLによる構造とCSS指定による見栄えがガッチリとスクラムを組んでしまっています。
なぜこうまでしなくてはならないのかというと、アメブロではPC版で設定したCSSがスマホでは効かないという事情があるからです。PC版で設定したカスタムCSSはモバイル環境では全く効きません。外部ファイルでCSSを当てるというワザはありますが公式に認められた方法ではありません。（ただし禁止されているということではありません）なのでビジネスサイトはリスクを取らずに安全策を取っているのだと思います。
インラインCSSによるカスタマイズのメリットとして、何があっても指定したCSSが表示される、ということが挙げられますね。ビジネスサイトでは安定性が求められますので、何かブログの仕様が変わったら表示が崩れて見にくくなったということは致命的です。なのでビジネス利用を（は直接は禁止されていますが）しているサイトは安全性の面からインラインCSSを使用しているサイトが多いものと推測しています。
デメリットはもし表示を変えたい場合にはいちいちすべての記事を修正する必要があるということです。
インラインCSSの問題点
インラインでCSS指定をした場合に問題となるのはPC版のCSSカスタマイズとの整合性です。
色や囲み枠などは問題ありませんが、一番問題になるのは文字の大きさです。スマホとPC版では文字の大きさを変える必要があります。特に見出しはそうですね。ところがインラインで指定してしまうとこれは最強です。AMPは別にしてそれ以外の環境ではインラインCSSがまず間違いなく表示されます。これはデスクトップ環境に対してもそうなります。
そうするとモバイル版とPC版で異なった表示ができなくなってしまいます。レスポンシブなんて夢のまた夢！これでは困りますよね。そこでさまざまな手法でみなさん逃げ道を作っています。
まず一番多そうなのはdisplay:noneを使って逃げる手法です。display:noneを使うことによりデスクトップ環境でこの指定をされたCSSを見えなくします。これを使ってモバイルとPCで別の表示をさせる工夫をします。
次に多そうなのがimportant！の指定をPC版のCSSに施すことによりモバイル版と違う表示をPC版にさせる方法です。
display:noneについては漫画村の隠し広告についての記事で指摘しましたが、かなり危険なCSS技法です。実際には広く使われていますが微妙です。上に書いた方法では別に怪しいことをしている訳ではありません。にもかかわらずクローキングというブラックSEOの技法と間違われる可能性がないわけではありません。はるなぴとしてはあまり使いたくない技法です。
CSSにimportant!を指定するのも同じです。こちらはブラックSEOではありませんができれば使用したくない技法です。
インラインCSSを秀丸マクロを使って埋め込む
モバイル用のCSSをインラインで書くのはいいとして、問題はどのようにして書くのかということです。すべてのHTMLをインラインCSS込みで直打ちするのは現実的ではありません。
そこで秀丸エディタと秀丸マクロの出番です。あらかじめ用意したリストに従って置換を行ってくれるマクロが秀丸のマクロライブラリで公開されています。この秀丸マクロを使用すればあっという間にHTMLタグにインラインCSSを埋め込んでくれます。
はるなぴもやってみました。いずれ詳しく記事を書く時が来るかもしれません。まずマークダウン記法で記事を書きます。次にこれを秀丸マクロを使用してHTMLに変換します。そして更にリスト置換による一括置換マクロを使ってHTMLタグにインラインCSSを一気に埋め込みます。
最初にマークダウン記法で記事を書き、秀丸マクロを2回連続で使用するだけで所望のHTMLが手に入ります。あとはアメブロのエディタ窓でHTML入力の方を選択しコピペするだけで記事入力が完了します。実に簡単です。
styleタグをHTMLに埋め込む方法
インラインCSSで実現する以外にどのような方法があるか…
裏技的ですがHTMLにstyleタグを埋め込む方法があります。普通はこれはheadセクションに書くものですがアメブロではheadセクションをいじれません。そこで次のようなタグをHTMLのbodyに書き込みます。これは前にも紹介しましたね。
<style><---
ここにCSSを記述する。
-->
</style>styleタグはアメブロの禁止タグに指定されていませんので、これでCSSを効かせることができるという寸法です。
styleタグ埋め込みのメリットとデメリット
この方法のメリットはいちいちインラインでCSSを埋め込まなくともよくなるということ。埋めこみがなくなるのでHTMLも短くなります。
基本的にclass指定でCSSを効かせることになるためPC版と表現を変えるのにdisplay:noneやimportant!などの怪しげなCSS指定をしなくて済むのも、はるなぴにとってはメリットと感じられます。
デメリットは、やはりインラインでCSSを埋め込むのと同様に書く記事ごとにstyleタグでCSSを書き込まなくてはならない点です。これでは表現を変えたくなった場合にすべての記事のstyleタグ部分を編集しなくてはなりません。
外部CSSファイルをリンクさせる方法
そこで外部CSSファイルを記事からリンクさせる方法を紹介します。
<style><!-- @import url(CSSファイルのURL); --></style>このような記述を記事の上部に埋め込みします。＠importを使用して外部からCSSファイルを読み込ませることが可能です。この時、外部ファイルはSSL化されたドメインからリンクする必要があります。アメブロが完全SSL化されたからです。つまりHTTPSプロトコルを使用してCSSファイルへのリンクを張ることになります。httpプロトコルでリンクすると混在コンテンツになってしまいます。
こう書くとSSL化されたレンタルサーバーと独自ドメインが必要だと思われるかもしれません。実際にそのように記述しているサイトもあります。しかし以前書いたようにこれは必ずしもレンタルサーバー＋独自ドメイン環境が必要なわけではありません。
前は、Amazon S3ならほとんどお金はかからないだろう、と書きました。でも実はもっと簡単な方法があります。それはDropboxのようなところにCSSファイルを置き、共有ファイルの設定をしてCSSファイルへのリンクを張る方法です。
Dropboxも既にSSL化されていますのでこれでOKなのです。これなら無料で外部から簡単にCSSファイルへのリンクを張ることが可能です。先日書いたアメブロのAPM配信に関する記事もこの方法でDropboxからリンクを張りました。実に簡単でした。
興味のある方はドロップボックスのファイルを共有化してから外部CSSとして直リンクする方法を参照してみてくださいね！
外部CSSファイルをリンクするメリットとデメリット
外部CSSでスマホ用のCSSを当てるメリットの第一は管理が簡単なことです。
なんといっても単一のCSSファイルをコントロールするだけです。このファイルの更新によりすべての記事のスマホでの見栄えが変更できます。見栄えと構造を完全に分離することが可能です。
はるなぴは今はてなブログも運用していますが、はてなブログでも同様に外部CSSを当てています。はてなブログではPC版もスマホ版も同じ外部CSSファイルをhead内に読み込ませることが可能です。これは裏技ではなく公式に認められた方法ですので安心です。
更にメディアクエリを使ってCSSファイルを書くことによりスマホだけに効くCSSを書くことが可能です。つまりPC版のCSSと完全に分離して運用可能ということです。これは分かりやすくてラクチンです。スマホのデザインだけを考えて書けばいいわけですから。
デメリットとしては、いつかこれが禁止になるリスクです。とは言っても今のところ禁止タグを使用しているわけではありません。特に禁止された方法というわけでもないので、そんなに気にすることはないのかもしれません。
はてなブログでも認められた方法ですので、あまり何でもかんでも禁止すると読者が離れてしまうかもしれませんしね。
