気ままにニコライフ

アクセスカウンタ

zoom RSS 久々に装飾コメントアート作るよ!【後編―OS間互換編】

<<   作成日時 : 2015/10/23 22:37   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

画像

windows10(Microsoft Edge)に対応します(`・ω・´)

画像

先日制作した装飾コメントアート。
せっかく作るのなら様々な環境に対応させたいということで、
これまで画面サイズ間とブラウザ間それぞれで
共通の表示になるように調整してきました。

画面サイズ間互換編⇒2015/09/13の記事

ブラウザ間互換編⇒2015/09/18の記事

当初はここまでの予定でした( ・3・)
ですが偶然にも(?)その後自力で
windows10を手に入れてしまったのでw
この前の「後編」を中編にして(!)最後にwindows10での
表示互換を行っていきたいと思います(`・ω・´)


さて、windows10の標準ブラウザはIEではなく
「Microsoft Edge」という新しいブラウザです。
個人的にはwindows8のIEより数百倍使いやすいですねw
それはさておき、気になるコメントアートの表示は
どのような感じになっているでしょう( ・3・)
画像

問題ない、と思いきやピンク色のコメントの一部が
わずかにズレてます

どうにも見た目から違っている文字がありますが、
念のためコメントアートを構成してる文字全ての
コメント横幅を調べましょう。

画像


今回の装飾コメントアートで使用している文字は10種類。
そのうち9種類は以上のようなpxとなっており、
windows7のIE等と共通となっています。
しかしただ一つだけ。
画像

この文字だけはpx数が少なくなっていました。
そもそも見た目も違います。
明らかに別のフォントが採用されていますねw

装飾CAのズレの原因はこのハートの文字です。
コメントの表示位置を決定づけている行に含まれている
この文字がズレたためにコメント全体のバランスが崩れました。
画像

2つのコメントを見ると1行目の
ハートを含まない行は共通の横幅を持っていることがわかります。
1行目も中央揃えで表示されるよう調整されていたのですが、
2行目の横幅が変わったことにより
位置がズレてしまっていることがわかります(´・ω・`)

元々このハート文字はchrome対策の時に
たまたま横幅が同じだったので採用したものでした。
そのハート文字がwindows10で横幅が変わるならば、
もう装飾記号を使用するときはどのように取り繕っても
どこかしらでズレが発生すると割りきってしまったほうがよいでしょう。

ズレを許容しながら、かつ最も違和感なく表示させる方法としては
「横幅が変わる文字を使用する行だけ独立したコメントにする」
のが最も有効な手段であると考えられます(`・ω・´)
画像

共通した横幅をもつ文字列の行と
ズレる可能性のある文字を含む行を分離します。
これによって装飾記号を含まない文字列のコメントは
理論上これまで確認した全ての環境で共通の表示になるはずです。

一方、ズレる文字を持つコメントは一行のみ、
または同じ横幅を持つ複数行でまとめます。
これにより、どの環境でも中央揃え(=左右対称)で表示されるので、
ズレの違和感を少なくすることが出来ます。
ズレと言ってもほんの数pxであることがほとんどですので、
今回の装飾コメントアート程度の装飾記号の使用数ならば
見た目の違和感はほぼないといってよいでしょう。


以上のような改良を施したうえで最終的に調整した
ものがこちらとなりますヽ(・∀・)ノ
windows7 Firefox 中画面
画像

windows7 chrome 中画面
画像

windows10 Microsoft Edge 中画面
画像

重ねあわせてもらえるとわかりますが、ハート文字を使用した
コメント以外は全く同じ位置に表示されています(`・ω・´)
ハート文字を含むコメントも共通して中央揃えとなっているので
左右対称の表示を保つ事ができます。


今回の改良によって
装飾記号を自由に変更できるようになりました。


画像



画像

投稿する場面に応じて柔軟に変更できるのは
汎用コメントアートとして大きな強みです(`・ω・´)

そんなわけで、9月の半ばからちまちまと
色々試しながら作ってきた装飾コメントアートですが、
細かい調整はあると思いますがひとまずここで完成です。
久々に作った分随分と力が入ってしまいましたが
その分クオリティの高いものが出来たと思います(・∀・)


あとは投稿ですねw
正直作っただけで満足しちゃってる部分もありますが
折を見てどこかに投稿したいですね^^;

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
久々に装飾コメントアート作るよ!【後編―OS間互換編】 気ままにニコライフ/BIGLOBEウェブリブログ
文字サイズ:       閉じる