アメブロのスマホ版のデザイン、どうにかならんもんかなぁ〜って思ってたら、こんなカスタマズ方法があったんですね！

(　 Д )　ﾟ　ﾟ　目からウロコでした。



こんにちはピアノ教室管理人です。


アメブロをはじめとした無料ブログサービスには、従来のPC版の表示に加え、スマートフォンでの表示に最適化されたスマホ版がありますよね。


PC版のヘッダーやサイドバー、フッターなどを省き、記事本文だけを抜き出した表示の軽〜い、しかしデザインが微妙なアレです。


最近はスマホの解像度も向上しPC版がそのまま表示されることが増えてますが、Facebookアプリからブログへ移動したときなど何故かスマホ版のブログが表示されてしまうことがあるんですよぉ。

Why? (・・;?


簡素というか色気のない、どこか表示の壊れたようなスマホ版を見るにつけ、いや、これは何とかカスタマイズせねばお恥ずかしい・・・と思ってきたというわけです、はい。

【追記:2017.06.04】
SSL化（URLがhttps://で始まる）されたアメブロでは、下記の方法は使えなくなりました。ただしSSLではない（URLがhttp://で始まる）場合は、まだ使えるようです。
※現状のアメブロは……
https://ameblo.jp/アメーバID/
http://ameblo.jp/アメーバID/
の2本立てという状況です。

【追記:2017.08.07】
上記URLの2本立てという状況が、https一本化へと動き出しているようです。常時SSL化ですね。
（ただしプロフィールページやマイページ、読者登録ウィンドウ、メッセージ送信ウィンドウなど、非SSLのページが残っているんですが、それでいいのか？）

これによってフリープラグインでのユーザーJavaScriptや、非SSLドメイン,SSLドメイン問わず外部から読み込むJavaScriptファイルは効かなくなりました（アメブロが認めたプラグインは除く）。orz

スマホ版のCSSカスタマイズについては、SSL化されたドメインにCSSファイルをアップロードして、下記のように@importで読み込めば、SSL化されたアメブロスマホ版でも使えることを確認しました。が、SSLドメイン取得に出費が発生。orz

SSLドメイン（CSSファイルUPのためのレンタルサーバーも）取得したくない場合は、別アカウントでアメブロを作りそのCSSを使う手もありますが、面倒くさそうで試してません。

追記が長くなってきたなぁ……orz

【追記:2018.06.27】
この記事で紹介している方法が遂に効かなくなりました。
おそらく記事中から@importで外部CSSを読み込めなくなったんだと思います（禁止タグのページには@importの記載はないけど）。
これでアメブロスマホ版のCSSによるカスタマイズは“詰み”とあいなりました。ありがとうございました。

【追記:2018.06.29】
効かなくなったなって思ってたら、いつの間にか復活してました。
よく観察してみたら、記事の先頭に書いてある＜style＞***＜/style＞タグを、運営側が強制的に削除していたみたいです（←アカンやろ普通に）。
これが何か処理のミスなのか、それとも故意に行ったけど悪影響が大きくて元に戻したのかは、相変わらず運営から何の報告もないのでわかりません。
いずれにしても、この記事で紹介している方法はまだ使えています。

この記事の目次

1. スマホ版アメブロの表示上のいくつかの問題点
2. スマホ版アメブロのCSSをカスタマイズする方法
3. スマホ版CSSカスタマイズのための下準備
4. スマホ版CSSのカスタマイズ作業のポイント
5. このカスタマイズ方法の弱点
6. 他のブログのスマホ版カスタマイズ

1.スマホ版アメブロの表示上のいくつかの問題点

アメブロでも御多分にもれずスマホ版があるんですが、残念なことにCSSのカスタマズはできません。


ブログのスキン自体は選べるんですがやはり痒いとこに手が届きませんし、以下の様ないくつかの致命的な問題があります。

• H1、H2、H3など重要な見出しタグにデザインが指定されていない、もしくはただ太字になるだけというお粗末な状態


• ULやOLなどリストタグのマーカーが非表示かつ左マージンがないので、通常の文章と見分けがつかない


• リンクの文字色が分かりづらい＆文中のリンクにアンダーラインがない


• BLOCKQUOTEやCITE、Qなど引用タグにデザインの指定がない


• 記事に埋め込んだYouTube動画の横幅がはみ出してもお構いなし

などなど。


スマホ版アメブロでHタグの表示テスト

▲クリックすると拡大します。
H1タグからH6タグまで同じ文字サイズで簡素に表示されるだけ。トホホ




他にも定型的に記事下にコピペしているブログランキングのボタンだったり、ブログのメニュー、メルマガやオススメ記事へのリンクなど、ことごとく崩壊しまくっています。

そりゃそうですよね、PC版で編集したCSSのデザインが全部OFFちゃってるわけですからね。


これらを解消するためにはどうしてもスマホ版のCSSを自分でカスタマイズするしかありませんが、アメブロさんが触らせてくれないのでシブシブ諦めていたんです・・・次の方法を知るまでは！

2.これがスマホ版アメブロのCSSをカスタマイズする方法だ！

スマホ版アメブロのCSSをカスタマイズする方法、それは...

<style><!--@import url(CSSファイルのURL);--></style>

このタグを各記事の一番下（追記：2017.08.07 一番上がいいと思う今日このごろ）に書いておくこと、です！

※「CSSファイルのURL」の部分はそれぞれ書き換えてください。
※新エディタではこのタグは消えてしまいます。標準エディタのHTML表示モードか、タグ編集エディタで行ってください。


このタグで外部からCSSファイルを読み込み、スマホ版の表示をカスタマイズする、というわけなんです。

（アメブロ特有の禁止タグにもなってない！）




とはいっても、これ自分で考えたわけじゃありません。^^;
こちらの記事が元ネタです。

⇒ スマホ版アメブロをカスタマイズする方法


上記の記事では詳しいカスタマイズ方法はまだ書かれていませんが、何とか自力でやってみましたので簡単に概略だけまとめておきます。

3.スマホ版CSSカスタマイズのための下準備

アメブロのスマホ版CSSのカスタマイズは公式に用意されている機能ではありませんから、何かと自分で準備しておく必要があります。

3-1.CSSファイルを書くためのテキストエディター

まずアメブロ内にはスマホ版のCSSを編集するための画面がありませんので、CSSファイルを書くためのテキストエディターが必要です。


Windowsにはメモ帳というシンプルなテキストエディターがありますが、いろいろ不便なので管理人は「TeraPad」を使っています。

3-2.CSSファイルをアップロードするサーバー

書いたCSSファイルはアップロードする必要がありますが、アメブロは画像以外のファイルをアップできませんので自前で確保しておく必要があります。


レンタルサーバーでもいいですし、クラウドならGoogle DriveやDropboxなどでもアップロードしたファイルのURLが取得できるみたい。（未確認...）


ここのSeesaaブログは画像以外のファイルもアップできるので、アカウント作っておくのもアリかもしれません。（サーバーの反応は遅いけど^^;）


管理人はエックスサーバーにアップロードしました。
（漂うステマ臭...）


CSSファイルをアップロードしたらそのURLを控えておき、先ほどのタグの該当部分に書き加えておきます。

3-3.必要な要素を詰め込んだ過去記事

当然ですがスマホ版CSSのカスタマイズにはプレビュー機能がありませんので、CSSファイルをアップロードしたらすでに公開している記事を使って表示を確認する必要があります。


もちろんカスタマイズ中には表示が崩れることも頻繁に起こりますから、アクセスの多い最新記事でやっちゃうとスゴく恥ずかしいことに！
(；´Д｀)ｱｳ




そこでカスタマイズに必要な要素を全部詰め込んだ表示確認用の過去記事をひとつ作っておきます。


この過去記事というのは、過去に書いた記事を再編集するということではなく、新規記事を過去の日付で投稿するということです。


表示確認用の過去記事には、先ほどご紹介した外部からCSSファイルを読み込むためのタグを、記事の一番下に書き加えて公開します。

3-4.ブラウザの機能拡張

表示の確認はスマホで行ってもいいんですが、何かと面倒なので、PCのブラウザを使って行います。


管理人はGoogle ChromeにFireMobileSimulator for Google Chrome™という機能拡張を入れて、スマホ表示を確認しています。

こりゃ便利！ヽ(・∀・ )ﾉ

※追記（2017.08.07）：Chromeのデベロッパーツールがあれば事足ります。

4.スマホ版CSSのカスタマイズ作業のポイント

スマホ版アメブロのカスタマイズは、従来のPC版CSSのカスタマイズとは勝手が違い、すこし戸惑ったところもありましたのでまとめておきます。

4-1.PC版CSSとスマホ版CSSの関係性を把握しておこう

スマホ版CSSは記事の一番下で必ず読み込まれますから、PC版の表示では、PC版CSSとスマホ版CSSが両方読み込まれていることになります。


さらにスマホ版CSSの方が後から読み込まれるので、PC版CSSよりも優先が高いので注意が必要です。


どういうことかというと、PC版CSSとスマホ版CSSで重複している要素は、PC版の表示でもスマホ版のデザインで表示されてしまうことがあり得る、ということです。


それを避けるために、PC版CSSの該当する要素には「!important」をつけ、スマホ版CSSに上書きされないようにしています。

本来「!important」の乱用は慎むべきところなんですが...。
(´ε｀；)ｳｰﾝ…


それとは逆に、スマホ版の表示ではPC版CSSが読み込まれませんので、抜けがないようにスマホ版CSSを作り込んでおくことが大切になりますね。

4-2.機能拡張とデベロッパーツールでHTMLタグの確認を

実際のカスタマイズ作業は、用意しておいた過去記事をFireMobileSimulatorを使い「SB iPhone 3GS」もしくは「SB iPhone 4S」で表示し、同時にChromeのデベロッパーツールでHTMLタグのClassやIDを確認しながら行いました。



▲クリックすると拡大します。


アメブロのスマホ版HTMLはPC版とは似ているようでいて違う部分も多いので、しっかりとした確認が大切です。

4-3.スマホ版CSSの読み込みタイミング

スマホ版のCSSは記事の一番最後で読み込まれるので、一瞬元々のデザインで表示された後、カスタマイズしたデザインが後から適応されるんですよね〜。

どうしても表示のタイミングにズレが発生します。


そのためあまりCSSファイルのサイズが大きくなり過ぎたり、助長な記述にならないように、要素を絞り込んで簡潔にカスタマイズしたいところです。


またCSSファイルの中で背景画像を指定すると、これまた表示のタイミングが遅れる原因にもなりますので、できる限り背景画像は使わないほうがいいかもしれません。

5.このカスタマイズ方法の弱点

出来ないと思われていたスマホ版アメブロのCSSカスタマイズを可能にするこの方法ですが、やはり万能ではありませんので弱点もあります。

5-1.一記事ごとに外部CSSファイルを読み込む設定が必要

外部からスマホ版のCSSファイルを読み込むタグは、それぞれの記事ごとに記入しておく必要があります。


タグの書かれていない記事にはカスタマイズは適用されず、また全記事一括でカスタマイズを適応することもできません。


一記事、一記事、読み込むタグを記入する作業は、記事数が少ない場合は問題ありませんが、すでに大量の記事があるブログだと大変な作業になってしまいそうです。
（´ω｀）ﾄﾎﾎ…

5-2.トップページなどカスタマイズできないところがある

このスマホ版のカスタマイズ方法は、記事内で外部CSSファイルを読み込むことで成立します。


逆に言うと、記事が読み込まれないところはカスタマイズできないんです。


スマホ版アメブロのトップページは最新記事の一覧が並ぶスタイルですので、そこでは記事は読み込まれていません。


同様にテーマ別記事一覧や月別一覧などでも、記事は読み込まれません。


そういった箇所はカスタマイズできないんですね。

5-3.ちょっと上級者向けかも...

PC版アメブロのカスタマイズ方法は情報も多く、HTMLやCSSの詳しい知識がなくても見様見真似でできなくもありません。


しかしスマホ版のカスタマイズはまだ一般的ではない上に、公式に機能が提供されていませんから、必然的に難易度が高くなります。


CSSファイルのアップロード先みたいに、自前で用意しておかないといけないものもありますしね。


もしこの

<style><!--@import url(CSSファイルのURL);--></style>

タグを見てピン！とこなかったなら、ちょっとハードルが高いかもしれません。
(´・ω・｀)

6.他のブログのスマホ版カスタマイズでも使えるよ！

今回ご紹介した方法はアメブロだけじゃなく、ほかのブログのスマホ版のカスタマイズにも使えます。


少なくともJUGEMではバッチリ上手くいきました。
v(´∀｀*v)ﾋﾟｰｽ

【追記】
JUGEMスマホ版は2014年10月末にアップグレードし、スマホ版のカスタマイズが可能になりました。

詳しくはコチラ
⇒ 【レビュー】JUGEMブログのスマホ版をカスタマイズしたのでフリースペースの使用方法などをご紹介

ただ、公式にスマホ版のカスタマイズ機能が提供されているブログには無用なんですけどね。

このSeesaaブログとかね。




それではまた。
(´∀｀*)ﾉｼ　ﾊﾞｲﾊﾞｲ

【オヌヌメ】

基本設定からカスタマイズまで! アメブロ逆引き Q&A101

誰もが悩んだ疑問やトラブルを一挙掲載。初心者の悩みもQ&A形式ですっきり解決。アメブロのカスタマイズに必要なCSSコードも掲載。

このブログの目次

　

Comments

アメブロで会話系ブログを開設したのですが、
スマホで見たときに、会話ごとの色分けが全くされておらず、
大変困っていました。

しかし、これでスマホでの色分けも出来そうです♪
つきましては、当方のブログ内で紹介したいと思うのですが、
よろしいでしょうか？

よろしく、お願いします。

Posted by D at 2014年11月17日 15:30

Dさんはじめまして。
コメントありがとうございます。
ヽ(*´∀｀)ノ

お役に立てて光栄でございまするぅ〜。

さらにブログでご紹介いただけるなんて嬉しすぎます。
｡･ﾟ･(ﾉ∀`)･ﾟ･｡

煮るなり焼くなりお好みのままにご紹介くださいませ。
m(_ _)m

Posted by ピアノ教室 管理人 at 2014年11月17日 15:47

ピアノ教室 管理人さん、こんにちは(^o^)／
準備ができしだい、紹介させていただきます。

ホントにありがとうございますm(__)m

Posted by D at 2014年11月18日 14:17

現在は禁止タグに指定されているようなので、この方法はもう使えません。

Posted by まるも at 2015年08月06日 10:22

まるも様
コメントありがとうございます。

今アメブロの禁止タグを確認したのですが、styleも@importも禁止タグに含まれていませんでした。
http://helps.ameba.jp/faq/blog/article/post_107.html

また実際に使っているブログでも今のところ問題は出ていません。

もしどこか公式に禁止タグとして記載されているようでしたら、お手数ですが教えていただけないでしょうか？（ちょっと探しましたが見つけられませんでした。）

確認出来次第、この記事に注意書きを加筆させていただきたいので。

宜しくお願い致します。m(_ _)m

Posted by ピアノ教室 管理人 at 2015年08月06日 12:24