アメブロでスマホページ用のCSSカスタマイズ大実験

アメブロでCSSカスタマイズ大実験のスマホ編です。

お見苦しい表示がありましたらご容赦願います。大実験中です。

AMPページのCSSをベースにスマホ記事のCSSカスタマイズを考える

先日はアメブロのAMPページ用CSS/HTMLのカスタマイズを考えました。これをベースにスマホ用CSSカスタマイズを考えていきます。

何故かというとAMPページのCSSはアメブロお仕着せのものが提供されており、これはユーザ側で編集できません。ですからアメブロから与えられた限られたCSSを利用するしか手がありません。表現も限られます。

AMPページとは何か？ユーザがスマホでGoogle検索した後にクリックしてくれたページです。（AMPで検索結果が表示されていればですが）ですからAMPページを見てくれている読者は非常に重要なユーザです。自サイトの記事にあるキーワードに興味があり、しかもそれがGoogleの検索結果の上位の方に表示されており、そして数あるサイトの中から選んでくれて見に来てくれた貴重な人だからです。この読者を大切にしないようでは罰が当たりますね。

AMPページからスマホページへの遷移

例えば、はるなぴはAMPページの見出しは緑色にする、と決めました。AMPページを訪れた読者は緑色の見出しを見ます。その人が他のページに遷移した時に黒い見出しが見えると違和感を抱くでしょう。遷移したページはもうAMPページではありません。通常のスマホページです。AMPページというのはGoogleが主にモバイル検索のためにキャッシュしてくれたページだからです。

つまりAMPページのデザインとモバイル用ページ（スマホ用ページ）のデザインはできる限り共通性を持たせて、遷移した時に違和感がないようにする必要があります。

AMPページとスマホページで共存可能なCSSカスタマイズ

共存できるCSSカスタマイズはそのままスマホページでも引きついでいくようにすると違和感なく遷移できると思います。

まずAMPで使ったCSS/HTML設定を確認しましょう。

見出しは次の通りです。

<h2 class="pagination-large__icon entry-text-green entry-header__theme__anchor">見出しレベル2（ヘッダ2）</h2>

<h3 class="entry-text-green entry-header__theme__anchor">見出しレベル3（ヘッダ3）</h3>

<h4 class="entry-text-green entry-header__theme__anchor">見出しレベル4（ヘッダ4）</h4>

段落（パラグラフ）は次の通り。

<p class="l-m-t l-m-b">これでパラグラフライティングが分かりやすくなると思いますよ。これが段落です。</p>

強調表示はemタグはAMPページのCSSがあたります。

.entry-text b,.entry-text em{font-weight:700}

このままにしておくとスマホやPCではブラウザによっては斜体（イタリック体）で表示されます。日本語主体の環境ではイタリック体での強調表示は見にくいと思います。見栄えをコントロールします。（後述）

strongタグは次のようにしています。

<p>AMP配信で<strong class="entry-text-red entry-header__theme__anchor">strongタグを赤太字で表示させる</strong>ために書き方に工夫をします。</p>

コードブロックは次の通りです。

<pre class="rankitem__ranklabel__2"><code>&lt;p class=&quot;l-m-t l-m-b&quot;&gt;これでパラグラフライティングが分かりやすくなると思いますよ。これが第1の段落です。&lt;/p&gt;
&lt;p class=&quot;l-m-t l-m-b&quot;&gt;ここからは次の段落です。意味のまとまりを考えて検索キーワードを入れるんです。これが第の段落です。&lt;/p&gt;</code></pre>

AMPページとスマホページで共通にするCSS

共通にすべきCSSはまず色です。

.entry-text-darkgray{color:#333}

.entry-text-dimgray{color:#666}

.entry-text-gray{color:#999}

.entry-text-green{color:#2d8c3c}

.entry-text-lightgreen{color:#49c755}

.entry-text-lightblue{color:#58b8ef}

.entry-text-pink{color:#ff547c}

.entry-text-red{color:#f24c3b}

.entry-text-orange{color:#fe9019}

.entry-text-yellow{color:#f8cd21}

.entry-text-bronze{color:#b98353}

色に関してアメブロが用意してくれた上のAMP用CSSはほぼすべてスマホページのCSSにも反映させることとします。特に緑は見出しの色指定に使っていますのでAMPページとスマホページでの見出しの色を統一させるように使います。

なおここで指定されている色は何故か薄いパステルカラーみたいなのが多いです。使い方によってはぼんやりした印象になります。はっきり色を出したい場合には太字と組み合わせて使用するのが良いと思います。太字のAMP用CSSは次の通りです。

.entry-header__theme__anchor {font-weight:700}

従って、このCSS設定もスマホ版で引き継ぎます。PC版でも引き継ぐことになるでしょう。

また、赤色については特別に別のCSSを指定します。何故かというと先ほども述べたようにAMP用の色が薄めでインパクトが弱いからです。ここは敢えてAMPとスマホでCSSを切り替えます。

スマホでの赤色の指定は次のようにします。

.entry-text-red{color: #f00}

.red {color: #f00}

まとめると色指定用のCSSは次のようになります。

.entry-text-darkgray {color:#333}

.entry-text-dimgray {color:#666}

.entry-text-gray {color:#999}

.entry-text-green {color:#2d8c3c}

.entry-text-lightgreen {color:#49c755}

.entry-text-lightblue {color:#58b8ef}

.entry-text-pink {color:#ff547c}

.entry-text-red {color:#f00}

.entry-text-orange {color:#fe9019}

.entry-text-yellow {color:#f8cd21}

.entry-text-bronze {color:#b98353}

.red {color: #f00}

AMPページとスマホページでCSSを変える

まずemタグのイタリック体を止めましょう。これを実現するには次のCSSを当てます。

em {
font-weight: 700;
font-style: normal
}

次に気になるのはpタグに囲まれた字の大きさです。AMPページ用のCSSではフォントサイズを指定できるCSSが非常に限られています。そのままの状態で使っている人がほとんどですが、はるなぴには少し小さすぎて見にくいように感じます。

なのでAMPページから遷移してきたときに見栄えが違ってしまいますが、フォントサイズを変更して少し大きくしてはどうかと考えました。スマホではフォントが大きすぎると却って見にくくなる場合もあります。またスマホと言ってもいろいろな画面サイズのものがありますから、本当はひとつのフォントサイズに決め打ちするのは難しいです。

とりあえずpタグのフォントサイズを1.1remとしてみます。

p {
  font-size: 1.1rem;
  margin: 0 0 20px;
  display: block;
  box-sizing: border-box
}

またh4タグはpタグ内文字よりも小さいとおかしいので1.3remとします。よって見出し用CSSは次のようになります。

.pagination-large__icon {font-size:1.5rem}

h2 {
  margin: 0 0 20px;
  display: block;
  box-sizing: border-box;
}

h3 {
  font-size: 1.4rem;
  margin: 0 0 20px;
  display: block;
  box-sizing: border-box;
}

h4 {
  font-size: 1.3rem;
  margin: 0 0 20px;
  display: block;
  box-sizing: border-box;
}

これでh2とh3見出しのフォントサイズはAMPページと同じながら、本文のフォントサイズは1.2倍大きくなったように表示されます。またh4もこれに合わせ1.3倍の大きさとして見出しであることが分かりやすくなるように表示します。

緑色の指定は色指定のところで以下のように既にしています。

.entry-text-green{color:#2d8c3c}

これでAMPページと同じHTMLを書いてもうまく表示されますね。

<h2 class="pagination-large__icon entry-text-green entry-header__theme__anchor">見出しレベル2（ヘッダ2）</h2>

<h3 class="entry-text-green entry-header__theme__anchor">見出しレベル3（ヘッダ3）</h3>

<h4 class="entry-text-green entry-header__theme__anchor">見出しレベル4（ヘッダ4）</h4>

見出しレベル2（ヘッダ2）

見出しレベル3（ヘッダ3）

見出しレベル4（ヘッダ4）

次に変える必要があるのがコードブロックです。これはAMPページでは仕方なくあるものを無理やり流用した形になっています。ですから本来あるべき見やすい表現になるよう新たにCSSを設定します。

まずインラインコードのCSSから設定します。インラインコードはAMPページでは特段の表示設定がされていません。つまりcodeタグが効いていない状態です。スマホ版ではインラインコードとしての表示ができるようCSSを設定します。

code {
  background: #f1f1f1;
  font-family: monospace;
  overflow: auto;
  margin: 0;
  padding: 4px 8px;
  white-space: nowrap
}

インラインコードを表示してみましょう。赤太字で表示されるようにstrongタグのCSSを設定しました。

次はコードブロックです。

pre > code {
  font-size: 1rem;
  margin: 0 0 20px;
  font-family: monospace;
  padding: 10px 15px;
  box-sizing: border-box;
  display: block;
  background: #1f1f1f;
  color: #fafafa;
  overflow: auto;
  white-space: pre
}

コードブロックは長くなることもあるので、なるべく折り返しが起きないようにフォントサイズを1remとして小さくしてみました。AMPページでは背景色と文字色をうまく設定できませんでしが、スマホ版では自由にできますので背景色をほぼ黒、文字色をほぼ白にしてあります。ただしコントラストがきつくならないように考えてあります。

そして最後に目次（TOC）です。これもAMPページでは無理して囲み枠表示ができるようにCSSを当てました。囲み枠や背景色がきれいに見えるようにスマホ版では次のCSSを適用します。

.toc {
  background: #ffffe0;
  border: outset thin #ccc;
  font-size: 1rem;
  padding: 10px;
  margin: 0 0 10px;
  display: block;
  box-sizing: border-box
}

またTOCの中のリスト表示についても独自CSSが当たるようにします。ホントはAMPページでもこのくらいのCSSは効かせたかったのです。

.toc ul {
  margin: 0;
  display: block;
  box-sizing: border-box;
  padding: 0 5px;
  list-style: disc inside
}

.toc ol {
  margin: 0;
  display: block;
  box-sizing: border-box;
  padding: 0 5px;
  counter-reset: section;
  list-style-type: none
}

.toc li {
  font-size: 1rem;
  margin: 10px 0;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  text-indent: -10px
}

.toc ol li:before {
  counter-increment: section;
  content: counters(section, ".") " "
}

AMPページで指定しなかったHTMLタグへのCSSカスタマイズ

AMPページでCSS効果をあてがっていないタグにCSSを当てます。

まずmarkタグです。何もしないとブラウザの素の表示がなされますが大抵は背景色の黄色がキツ過ぎて見にくいです。なので背景色の黄色を和らげます。

mark {
font-weight: 700;
color: #000;
background: #ffff99
}

次はリスト用のタグです。liタグで囲まれたリスト項目のフォントサイズをpタグと同じ1.1remに拡大します。

ul {
  margin: 0;
  display: block;
  box-sizing: border-box;
  padding: 0 5px;
  list-style: disc inside
}

ol {
  margin: 0;
  display: block;
  box-sizing: border-box;
  padding: 0 5px;
  counter-reset: section;
  list-style-type: none
}

li {
  font-size: 1.1rem;
  margin: 10px 0;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  text-indent: -10px
}

ol li:before {
  counter-increment: section;
  content: counters(section, ".") " "
}

Tableをアメブロのスマホページできれいに表示する方法

AMPページのところで書き漏れがありましたので、こちらで紹介させていただきます。正しくはAMPページでTableをキレイに表示する方法です。スマホページではそれをほぼ引き継ぎします。

AMPページの出来合いCSSの中から次のものを利用します。

.blog_info__main {width:100%}

.l-border {border:1px solid #e2e2e2}

.l-text-center {text-align:center}

width:100%で幅いっぱいにテーブルを広げます。そして、boaderで枠線を作りcenterで中央揃えを実現します。HTMLは次のようになるよう（秀丸マクロで）変換します。

<table class="blog_info__main">
<thead>
<tr class="header">
<th class="l-border l-text-center">サービス</th>
<th class="l-border l-text-center">特徴</th>
<th class="l-border l-text-center">評価</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="l-border l-text-center">はてなブログ</td>
<td class="l-border l-text-center">おたく</td>
<td class="l-border l-text-center">〇</td>
</tr>
<tr class="even">
<td class="l-border l-text-center">FC2</td>
<td class="l-border l-text-center">H</td>
<td class="l-border l-text-center">△</td>
</tr>
<tr class="odd">
<td class="l-border l-text-center">2ch</td>
<td class="l-border l-text-center">論外</td>
<td class="l-border l-text-center">-</td>
</tr>
<tr class="even">
<td class="l-border l-text-center">ライブドア</td>
<td class="l-border l-text-center">炎上</td>
<td class="l-border l-text-center">△</td>
</tr>
<tr class="odd">
<td class="l-border l-text-center">アメブロ</td>
<td class="l-border l-text-center">最高</td>
<td class="l-border l-text-center">◎</td>
</tr>
</tbody>
</table>

スマホ版では枠線の色が濃くなるよう次のようにCSSを修正します。

.blog_info__main {width:100%}

.l-border {border:1px solid #999}

.l-text-center {text-align:center}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  box-sizing: border-box
}

サービス	特徴	評価
はてなブログ	おたく	〇
FC2	H	△
2ch	論外	-
ライブドア	炎上	△
アメブロ	最高	◎

スマホ用CSS総まとめ

スマホ用のCSS設定をまとめます。本文以外のところで使われるとまずいセレクタはarticle配下に限定しておきます。

.entry-header__theme__anchor {font-weight:700}

.entry-text-darkgray {color:#333}

.entry-text-dimgray {color:#666}

.entry-text-gray {color:#999}

.entry-text-green {color:#2d8c3c}

.entry-text-lightgreen {color:#49c755}

.entry-text-lightblue {color:#58b8ef}

.entry-text-pink {color:#ff547c}

.entry-text-red {color:#f00}

.entry-text-orange {color:#fe9019}

.entry-text-yellow {color:#f8cd21}

.entry-text-bronze {color:#b98353}

.red {color: #f00}

em {font-weight: 700;font-style: normal}

article p {
  font-size: 1.1rem;
  margin: 0 0 20px;
  display: block;
  box-sizing: border-box
}

article .pagination-large__icon {font-size:1.5rem}

article h2 {
  margin: 0 0 20px;
  display: block;
  box-sizing: border-box;
}

article h3 {
  font-size: 1.4rem;
  margin: 0 0 20px;
  display: block;
  box-sizing: border-box;
}

article h4 {
  font-size: 1.3rem;
  margin: 0 0 20px;
  display: block;
  box-sizing: border-box;
}

article code {
  background: #f1f1f1;
  font-family: monospace;
  overflow: auto;
  margin: 0;
  padding: 4px 8px;
  white-space: nowrap
}

article pre > code {
  font-size: 1rem;
  margin: 0 0 10px;
  font-family: monospace;
  padding: 10px 15px;
  box-sizing: border-box;
  display: block;
  background: #1f1f1f;
  color: #fafafa;
  overflow: auto;
  white-space: pre
}

article .toc {
  background: #ffffe0;
  border: outset thin #ccc;
  font-size: 1rem;
  padding: 10px;
  margin: 0 0 10px;
  display: block;
  box-sizing: border-box
}

article .toc ul {
  margin: 0;
  display: block;
  box-sizing: border-box;
  padding: 0 5px;
  list-style: disc inside
}

article .toc ol {
  margin: 0;
  display: block;
  box-sizing: border-box;
  padding: 0 5px;
  counter-reset: section;
  list-style-type: none
}

article .toc li {
  font-size: 1rem;
  margin: 10px 0;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  text-indent: -10px
}

article .toc ol li:before {
  counter-increment: section;
  content: counters(section, ".") " "
}

mark {
font-weight: 700;
color: #000;
background: #ffff99
}

article ul {
  margin: 0;
  display: block;
  box-sizing: border-box;
  padding: 0 5px;
  list-style: disc inside
}

article ol {
  margin: 0;
  display: block;
  box-sizing: border-box;
  padding: 0 5px;
  counter-reset: section;
  list-style-type: none
}

article li {
  font-size: 1.1rem;
  margin: 10px 0;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  text-indent: -10px
}

article ol li:before {
  counter-increment: section;
  content: counters(section, ".") " "
}

.blog_info__main {width:100%}

.l-border {border:1px solid #999}

.l-text-center {text-align:center}

article table {
  border-collapse: collapse;
  border-spacing: 0;
}

article td, th {
  box-sizing: border-box
}