【レスポンシブ】AAつまり、アスキーアート(やる夫)をスマホ表示でずれないようCSSを修正したTips【デザイン】

とうとうこのブログが念願のアスキーアートのスマホ対応が完了したのでちょっとエントリー！
もともとある程度ずれないようにアスキーアートが表示はできていたんだけど、それはあくまでPCでの表示だけで、スマホやタブレットなどでこのブログを閲覧するとアスキーアートがずれてたのね。

それが悩みどころで長らくこのブログはレスポンシブ対応をためらっていて、前回の記事でも「電気通信主任技術者のススメ」はレスポンシブデザイン対応するのをためらってたのよね。」なんて書いていましたけど、腰が重かった理由の大部分はこのアスキーアートのためです。

ちなみにアスキーアートっていうのはこんなヤツね。

　　　　　 　　　／￣￣￣＼
　　　　　　　／　　_ノ 　 ヽ_ ＼
　　　 　　／　　 （＞） 　（＜） ＼　俺のことだおｗｗｗ
　　　　 　|　　::::::⌒（__人__）⌒:::::l
　　　　 　＼　　　　|r┬-/ 　　／
.　　　ｸﾞｯ /⌒/＾ヽ､`ー’´　,ィヽ、
　　　 　 /　 ,ゞ　,ノ　　　　 　, 　＼
　　　　　l ／　 /　　　　　　　ト　　 >
　　 　 　 ヾ＿,/ 　 　 　 　　 |／ ／
　　　　　　 |　　　　　　　　　 |／

そう、アスキーアートっていうか殆ど「やる夫」です。

いわゆるやる夫のAAってやつです。

さっきも書いたけど、以前のWordpressのThemeでもPC表示なら正常にずれないで表示することができていていて、閲覧者がスマホやタブレットでアクセスしてきた場合でもPC表示させていたから、それほどズレずに済んでいたのね。

だから長らくレスポンシブデザインのThemeは採用しなかったんだ。

　　　　　　　　　　　　 ／）
　　　　　　　　　　　／／／）
　　　　　　　　　 ／,.=ﾞ””／　　　　　　　　　　　　　　人人人人人人人人人人人人
　　　／　　　　 i f　,.r='”-‐’つ＿＿＿_　　　　　 ＜　　　　　　　　　　　　　　　　　　＞
　　/　　　　　 /　　　_,.-‐’~／⌒　　⌒＼　　　　＜　細けぇ事はいいんだよ！！　＞
　　　　／　 　,i　　　,二ﾆ⊃（ ●）.　（●）＼　　　＜　　　　　　　　　　　　　　　　　　＞
　　　/　 　　ﾉ　　　 ilﾞフ::::::⌒（__人__）⌒::::: ＼　　　YYYYYYYYYYYYYYYYYYYYYY
　　　　　　,ｲ｢ﾄ､　　,!,!|　　　　　|r┬-|　　　　　|
　　　　　/　iﾄヾヽ_/ｨ”＼ 　　 　 `ー’´ 　 　 ／

はい、細かいことですけど大切なことなので続けます。

もともと最小していたCSS

もともとPC表示でアスキーアートをずれないように記述していたCSSは下記のようなものです。

.aa{
display: block;
font-size:12pt;
line-height:18px;
font-family: 'Mona','IPA MONAPGOTHIC','MS PGothic','ＭＳ Ｐゴシック','MS Pｺﾞｼｯｸ','MS Pゴシック',sans-serif;
-moz-text-size-adjust: none;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

んで、ブログ本文でやる夫をspan class=”aa” とかで囲うの

でもね、これではPC表示は大丈夫だけど、スマホやタブレットで表示するとずれちゃうの。

これはやる夫をブログで使っている人たち共通の悩みなんじゃないかな？

そこで、参考にしたのは下記のサイト。

スマホでブログのAAが正常表示されるようにした話 | 旅の道第三停留所

わかりやすくて、私と同じ悩みで最高だ！

　　　　　　　　 ＿＿＿_
　　 　 　 　 ／　_ノ　ヽ､＼
　　　　　 ／oﾟ(（＞）)　(（＜）)ﾟo　　おなじだおｗｗｗ
　　 　 ／　 　 .:ﾟ~（__人__）~ﾟ:＼
　　 　 | 　 　 　 　 |ｒ┬-|　 　 |
　　 　 ＼、　　 　 i⌒i‐’　 ,;／
　　　　／　 ⌒ヽ.ﾉ　ﾉ　 く
　　　/　,＿ ＼　l||l 从＼ ＼
　 　 と_＿＿）_ヽ＿つ_;_ヾ_つ.;.
　　　　　　　　　ﾍﾞｼﾍﾞｼﾍﾞｼ

さっそくこちらで紹介されていたCSSを採用してテストしてみたんだけど、まだウマくいかない・・・

スマホで表示したときに、なんとなくサイズが変わってレスポンシブな表示をしようとしている変化はあったんだけど、どうにもズレてウマくいかなかったの。

最終的な結論は・・・

前置きが長くなってしまったけど、先ほどの「旅の道第三停留所」で紹介されていたCSSだけでは、ウチのブログではWebフォントが適応してなかったのが原因らしい。

最終的に下記のようなCSSにしてすべてが解決したんだ。

@media only screen and (max-width: 768px) {
.aa {
font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', 'MS Pｺﾞｼｯｸ', 'MS Pゴシック', ＭＳＰゴシック, MSPゴシック, IPAMonaPGothic, 'IPA モナー Pゴシック', 'IPA mona PGothic', 'IPA MONAPGOTHIC', Mona, Monapo, Saitamaar, sans-serif;
color: #000000;
line-height: 110%;
letter-spacing: 90%;
font-size: 60%;
padding-left: 3px;
padding-right: 3px;
overflow: hidden;
margin-left: 0;
}
}

@font-face{
font-family: 'Saitamaar';
src: local('Saitamaar'),
url('http://keage.sakura.ne.jp/fonts/Saitamaar.eot?') format('eot'),
url('http://keage.sakura.ne.jp/fonts/Saitamaar.woff.php') format('woff'),
url('http://keage.sakura.ne.jp/fonts/Saitamaar.ttf') format('truetype'),
url('http://keage.sakura.ne.jp/fonts/Saitamaar.ttf.php') format('truetype');
font-weight: normal;
font-style: normal;
}

ここで、最初の行にディスプレイの最大サイズをpxで指定する箇所があって、このサイズ以下のディスプレイで表示した場合に下のCSSが適用されるってわけ。

スマホやタブレットにはいろんなサイズがあると思うんだけどとりあえず、ウチでは一般的な768pxを指定してみることにした。

これによってスマホで見ても、タブレットで見てもスマホを横にしても正常にやる夫が表示されるようになったってワケさ。

完璧だ！！

　　　　　　　　　＿＿＿
　　　　　　　／ ⌒　　⌒＼
　　　　　 ／　（⌒）　 （⌒）＼　やったおｗｗｗ
　　　　／ 　 ///（__人__）///＼
　　 　 |　　 u. 　 `Y⌒y’´　　　 |
　 　 　 ＼ 　 　 　 ﾞー ′　　,／
　　　 　 /⌒ヽ　 　ー‐ 　 　ｨヽ
　 　 　 / rｰ’ゝ　　　　　　　〆ヽ
　　　　/,ﾉヾ　,>　　　　　　ヾ_ノ,|
　　　　|　ヽ〆　　　　　　　　|´　|

ただね・・・

まだ弱点はある

確かに「これによってスマホで見ても、タブレットで見てもスマホを横にしても」・・・だ。

ただし、タブレットを横にするとディスプレイサイズによってずれることはまだあるんだ。

これはたぶんCSSのmax-width: 768pxの部分をもう少しサイズを大きくすれば解決するんだと思う。

もしくは、もういっそのことどのサイズでも同CSSを適用するようにしたらいいんだけどね。

なんとなく、PC表示は今のままでいきたいので、しばらくはこのままそっとしておこうと思うよ。

　　　　　　　　　＿＿＿_　　　　対応しねぇのかよ
　　　　　　　 ／_ノ 　ヽ､_＼　　 　 　 　 ━━┓┃┃
　　　　　 　oﾟ(（●）) (（●）)ﾟo　　　　　　　　 ┃　　　━━━━━━━━
　　　　 ／::::::⌒（__人__）⌒:::: ＼　　　　　　　┃　　　　　　　　　　　　　　　┃┃┃
　　　　|　　　 ゝ’ﾟ　　　　　≦　三　ﾟ｡　ﾟ　　　　　　　　　　　　　　　 　 　 　 　 　 ┛
　　　　＼ 　 ｡≧　　　　　　　三　＝=-
　　　　　　　 -ｧ,　　　　　　　　≧=-　。
　　 　　　　　 ｲﾚ,､　　　　　　　＞三　　｡ﾟ　･　ﾟ
　　　　　　　 ≦｀Vヾ　　　　　　　ヾ　≧
　　　　　　　 ｡ﾟ　/｡･ｲﾊ ､､　　　　｀ミ　｡ ﾟ　｡ ･

さて、いかがでしたでしょうか？

今から電気通信主任技術者の試験勉強しようとしている人たちには全く関係のない話題でしたね。

まぁ、とりあえず今後はまたボチボチと更新していく気はあるので、忘れたころにまたこのブログに訪問してみてください。

少しくらい記事更新されてるかもよ？