「知識編Ⅰ【空白文字】」の編集履歴（バックアップ）一覧に戻る
知識編Ⅰ【空白文字】 - (2018/01/02 (火) 01:27:53) のソース
[[トップページ>コメントアートwiki トップページ]]
----
#blockquote(){コメントアートで使う文字で最も多く占める部分は何だと思いますか？
花の文字？星の文字？それとも四角いブロック文字？
……答えは、&bold(){&sizex(5){「空白」}}です。
コメントアートの構成の大部分を占めるのが空白。
全角・半角スペースであったりもしますが、
ほとんどの場合は&bold(){「空白文字」}を使用します。
このページではそんな空白文字について解説させていただきます。}
&bold(){&color(red){※こちらの項目の記載事項は}}
&bold(){&color(red){ flash版プレイヤー専用となります。}}
&bold(){&color(red){ 2016年10月以降登場したHTML5版プレイヤーでは以下の項目は適用されません。}}
&bold(){ HTML5版プレイヤーにて有用な空白文字は以下の新CAwikiのページを御覧ください。}
→&link(CAwiki2「空白文字」){https://www65.atwiki.jp/commentart2/pages/17.html}
#region(close,flash版プレイヤーの空白文字はこちらを参照してください。)
※とりあえず何を使えばいいか知りたい人は一番下の&bold(){「⑥まとめ」}をご覧ください。
※画像は旧プレイヤーのインターフェースとなっていますが、
基本的なボタン配置はほぼ同じなため、解説に支障がないものに
関してはそのまま使用していますのでご了承ください。
&bold(){&sizex(6){◎目次}}
#contents_line(sep=/)
----
*&bold(){&sizex(7){①右寄せ・左寄せ}}
コメントの画面の左右に表示させるためにはどうすればよいでしょうか？
「ue「shita」のコメントは画面に対して&bold(){中央揃え}の配置となります。
よってコメントを左右に配置したい場合は&bold(){文言の前後に空白を追加する}必要があります。
右寄せの場合は配置したい文言の前に空白を追加すればいいでしょう。
最も簡単な空白の追加方法は&bold(){&color(green){「全角スペース(U+3000)」「半角スペース(U+0020)」を入力する方法}}です。
&blankimg(emptiness letter 1.jpg,width=408,height=330)
このように適当に全角スペースを入力するだけでコメントの右寄せが出来ます。
では、左寄せはどうでしょうか？
このように左寄せになるように全角スペースを入力しても・・・。
&blankimg(emptiness letter 2.jpg,width=408,height=330)
投稿の際に入力がキャンセル(削除)されてしまいます。
&blankimg(emptiness letter 3.jpg,width=408,height=330)
コメントの&bold(){一番最後の文字が全角・半角スペースである場合}、
そのスペースと、それに隣接するスペースが
&bold(){全てキャンセルされてしまう}というコメント機能の仕様のためです。
このような時に&bold(){&sizex(6){&color(orange){「空白文字」}}}を使用します。
*&bold(){&sizex(7){②空白文字とは}}
空白文字とは&bold(){&color(green){「見えない文字」}}の事です。
この画面、画面中央に「コメント」されていますが、
&blankimg(emptiness letter 4.jpg,width=408,height=330)
実はこのようにコメントを積み上げて表示させています。
&blankimg(emptiness letter 5.jpg,width=408,height=330)
空白文字を使えば、見えないところにコメントを配置することも出来ますし、
先ほどの左寄せの際にも、スペースの後に空白文字を配置することで
「フタ」をするようになり、左寄せが出来るようになります。
&blankimg(emptiness letter 6.jpg,width=408,height=330)
空白文字はいくつか種類がありますが、
コメントで使用が推奨されている文字はあまり多くはありません。
推奨、非推奨の空白文字を以下に紹介します。
*&bold(){&sizex(7){③推奨される空白文字}}
空白文字は様々な種類があるのですが、
使用を推奨される空白文字とそうでない空白文字があります。
理由は、ニコニコ動画のコメントはPCのOSによって
皆見え方が異なり、あるOSではきちんと表示されているものでも、
&bold(){他のOSではおかしな表示になっている、といった文字が多々ある}ためです。
表示がおかしくなっているCAは見る方にとっては
不快なものにうつります。
それがもとでコメントが荒れてしまったら元も子もありません・・・。
空白文字はきちんと、推奨されている文字を
使用することをおすすめいたします。
では、推奨されている空白文字を見ていきましょう。
**&sizex(6){※&color(orange){「U+00A0&s(){[ ]}」}}(webページからの直接コピペ不可)
&bold(){&color(red){推奨空白文字No.1。}}
&bold(){現在確認されている中で最も優秀な空白文字}です。
今のところ、全てのOS、ブラウザで文字化けが確認されていません。
|&blankimg(U+00A0 1-1 XP.jpg,width=326,height=264)|&blankimg(U+00A0 1-2 vista.jpg,width=326,height=264)|
|&blankimg(U+00A0 1-3 win7.jpg,width=326,height=264)|
&bold(){幅は半角スペースと全く変わらない}うえ、
U+00A0単体の投稿でもコメントとして成立するため
半角スペースの代用として重宝されています
&bold(){入力方法に少々癖がある}のが初心者泣かせな所です。
主な入力方法は以下の3点です。
・&bold(){&color(green){IMEパッドから入力する}}
IMEパッドを開き「U+00A0」の文字を入力。
&blankimg(U+00A0 2.jpg,width=601,height=205)
・&bold(){&color(green){メモ帳などのテキストエディタ上で「Alt+160」と入力する}}
テキストエディタ上でAlt+テンキー入力を行うと、
対応したアスキーコード(文字コードの一つ)を入力出来ます。
16進数の「00A0」を10進数に変換すると「160」。
&bold(){Altキーを押しながらテンキーで順番に「1」「6」「0」と押す}と、
「U+00A0」を入力できます。
(注)テキストエディタによって出来るものと出来ないものがあります。
出来るもの：メモ帳、ワードパッド、Excel、Emeditor等
出来ないもの：Word等
・&bold(){&color(green){ニコ動のプレイヤーから直接コピーする}}
コメント欄に投稿されている「U+00A0」を右クリックでコピーすることで入力できます。
**&sizex(6){※&color(orange){「U+2001[ ]」}}
&bold(){推奨空白文字No.2。}
&bold(){&sizex(5){漢字幅とほぼ同じ幅を持つ空白文字}}であり、使い勝手がとてもいいです。
ただし、「U+00A0」のようにどの状況でも使えるというわけでなく
使用にはいくつかの条件が付きます。
・&bold(){&color(green){全角文字と隣接させる必要がある}}
使用の際には&bold(){&sizex(5){全角文字を隣接させる必要があります。}}
単体で使用した場合、あるいは半角文字を隣接させた場合は
XPで四角のような記号(&bold(){&sizex(5){&color(orange){「豆腐化」}}}と言います)で表示されてしまいます。
(半角ｶﾀｶﾅは例外となり、隣接で豆腐化を防げます。)
|&blankimg(U+2001 1-1 XP.jpg,width=326,height=264)|&blankimg(U+2001 1-2 vista.jpg,width=326,height=264)|
|&blankimg(U+2001 1-3 win7.jpg,width=326,height=264)|
・&bold(){&color(green){ゴシック体でのみしか使用できない}}
&bold(){&sizex(5){コメントのフォントがゴシック体である時のみ使用が可能}}です。
&blankimg(U+2001 2 font OS.jpg,width=408,height=288)
明朝フォントの際には、windows7で文字幅が変化します。
丸文字フォントの際には、XPで「のような記号で表示されてしまいます。
明朝化、あるいは丸文字化をする文字とは 一緒に使わないようにしましょう。
windows7の登場で今まで明朝体でも使用できた
U+2001の使用価値が下がってしまいましたが、
ゴシック体に限れば、依然として便利な空白文字です。
&bold(){&sizex(4){ ・(参考)「U+2000」～「U+200A」}}
&blankimg(U+2000 series 1.jpg,width=641,height=202)
U+2001と同列にある文字群は
&bold(){U+2001とほぼ同じ条件}で使える空白文字が多くあります。
U+200Aまでは幅のある文字として、空白に使用することができます。
|&blankimg(http://www37.atwiki.jp/commentart?cmd=upload&act=open&pageid=18&file=U%2B2000+series+2-1++vista+win7.jpg,width=408,height=420)|&blankimg(U+2000 series 2-2 XP.jpg,width=326,height=336)|
|~|&bold(){※U+2001と同じく、単体だとXPで化けるので&br()全角文字等と隣接させること。}|
※px数は「big」時のもの
このように、それぞれの文字の幅が違うため、
コメント幅の微調整を行う際には使用するのもありです。
ただし、あまり使用する空白文字の種類を増やすと、
管理が大変になるのでお勧めしません。
コメント幅の調整でどうしても必要になった場合以外は、
使用する空白文字は2～3個程度に留めておくのがよいでしょう。
**&sizex(6){※&color(orange){全角スペース「U+3000[ ]」}}
&bold(){推奨空白文字No.3。}
全角スペースです。
当たり前ですが、全ての環境で化けません。
しかし&bold(){&sizex(5){フォントによって文字幅が変わる}}点に注意する必要があります。
&blankimg(U+3000 1.jpg,width=408,height=288)
&bold(){&sizex(4){ゴシック体では漢字幅よりも狭い幅での表示}}になります。
一方、&bold(){&sizex(4){明朝・丸文字では漢字幅と同じ}}になります。
ゴシック体で漢字幅と同じ分のスペースを作りたい場合は
U+3000にU+00A0を追加すれば、ほぼ漢字幅と同じ幅になります(漢字幅より2px狭い)
普通に使う分にはこれで十分です。
また、U+2008を追加すれば、漢字幅と全く同じ幅になります。(上図参照)
1pxのズレも気に食わない！という人はお試しください。
全角スペースは先に触れたとおり、コメントの末尾に置くと
表示が削除されてしまいますので、
空白文字を合わせて使用することを忘れないようにしましょう。
全角スペースは全てのフォントで使用できる空白ではありますが、
&bold(){&sizex(4){コメントの負荷により、明朝体、あるいは丸文字体へのフォント変化が起きやすい}}です。
そのため、ゴシック体においてはU+2001のほうが、より安定した空白文字として推奨されます。
**&sizex(6){※ゼロ幅文字 「U+200B[]」}
ゼロ幅文字とはその名の通り、幅がない文字のことです。
コメントの一番右側に蓋として配置する際は、
このようなゼロ幅文字を使用することも1つの手です。
ゼロ幅文字もいくつか種類がありますが、
そのうちの一つ、U+200BはU+2001と同じく、
全角文字を隣接させれば全ての環境で化けません。
単体で使用すると、win2000で文字化けしてしまいます。
ゼロ幅文字は確かに使用の上では推奨の文字ではあるのですが、
一目見ただけではそこにあるかどうかわからないことなどから、
管理が大変な文字でもあります。
カーソルを合わせてそこにあるかどうかを
確かめることはできますが、空白の中に紛れてしまうと探すのに一苦労です。
75文字というコメント文字数の制限がある中、
無駄な文字数を使用することにもなりかねません。
ちゃんと管理ができるという方は問題ありませんが、
そうでない方は半角スペース幅のU+00A0の使用で
十分事足りるでしょう。
*&bold(){&sizex(7){④推奨されない空白文字}}
ここまでは空白文字として使用を推奨されている
文字について紹介いたしました。
今度は、OS間の表示差がひどく、使用が推奨されていない
空白文字についていくつかご紹介いたします。
・&bold(){&sizex(4){&color(green){「U+007F[]」}}}
2007年ごろはよく用いられていた空白文字でした。
&bold(){&color(red){win2000,win7で文字化けする}}ため、現在は非推奨の文字です。
&blankimg(http://www37.atwiki.jp/commentart?cmd=upload&act=open&pageid=18&file=U%2B007F.png,width=408,height=288)
・&bold(){&sizex(4){&color(green){「U+05C1[ׁ]」}}}
こちらも2007年ごろよく用いられていた空白文字です。
ですが、&bold(){&color(red){vista,win7で文字化けする}}ため、現在は非推奨の文字です。
&blankimg(http://www37.atwiki.jp/commentart?cmd=upload&act=open&pageid=18&file=U%2B05C1.png,width=408,height=288)
・&bold(){&sizex(4){&color(green){「U+0E3A[ฺ]」}}}
主に特殊記号と共に使われる事が多いです。
XPなら特に問題ない表示ですが、
&bold(){&color(red){vista,win7ではU+0E3Aが文字化けするうえ、}}
&bold(){&color(red){特殊記号もおかしな表示になります。}}
&blankimg(http://www37.atwiki.jp/commentart?cmd=upload&act=open&pageid=18&file=U%2B0E3A.png,width=408,height=288)
・&bold(){&sizex(4){&color(green){「U+3164[ㅤ]」}}}
丸文字体へのフォント変化を起こす空白文字として
発見当初は重宝されていましたが、&bold(){&color(red){Macにて変な記号に文字化けします。}}
この文字化け後の記号から、しばしば「トミタケ」などと呼ばれる文字です。
このように、あるOSでは空白でも違うOSでは空白ではない文字がたくさんあります。
自分でコメントアートを作るときに使用しないのはもちろんですが、
どこかからコピーをしたときに、このような空白文字が
紛れ込んでいることもあるので注意が必要です。
特に&bold(){&color(red){ネット上から特殊文字をコピーする場合は注意してください。}}
多くの場合で&bold(){U+0E3Aが空白文字として使われている}ため、
そのままコメントアートに使用してしまうことが非常に多いです！
詳しくは「[[知識編Ⅳ【文字の挙動】]]」にて説明いたしますが、
文字のコピーを行う際は必ずユニコードを調べ、
&bold(){非推奨の空白文字が含まれていないか}確認しましょう。
使用している空白文字の文字コードがわからなくなった時は
こちらで調べることが出来ます。
http://code.cside.com/3rdpage/jp/unicode/converter.html
(10進、16進文字コードin HTMLユニコード)
※使い方は[[基礎編Ⅲ【フォントとユニコード】]]で説明しています。
*&bold(){&sizex(7){⑤「タブ(tab)」について}}
タブは、ニコ動のコメント上では空白として機能します。
&blankimg(tab 1.jpg,width=408,height=288)
画像の通り、&bold(){コメントの中で最大の横幅を持っています。}
全角スペース・半角スペースなどと同じく、
OS間での文字化けは起こりませんが、コメントの末尾に
配置すると削除されてしまいます。
&bold(){コメント欄での直接入力ができません。}
メモ帳などのテキストエディタ上で入力したタブを
コメント欄にコピペしましょう。
(エディタ上で「タブキー」を押せば入力できます。)
**&sizex(6){※タブの挙動}
タブは他の空白とは異なる特殊な挙動をします。
・&bold(){&color(green){横幅が安定しない}}
&bold(){&sizex(6){&color(red){非常に不安定です。}}}
表示のたびに細かく横幅が変わります
コメントが表示されてからでも変わるため、
左右に揺れるように見えることもあります。
他の文字との組み合わせでも細かく横幅が変わります。
新プレイヤー(NP4)ではその法則も当てはまるか判別が出来ないほど
盛大に横幅が変わります。
&blankimg(tab 2.jpg,width=816,height=288)
表示によっては中央揃えにすらなりません・・・。
横幅が広いため、高速のコメントをする際などに利用されてきましたが、
現在においては、その不安定過ぎる表示から&bold(){あまり推奨できる空白ではありません。}
*&bold(){&sizex(7){⑥まとめ}}
色々な空白文字を紹介してきましたが、
&bold(){&sizex(7){結局何を使えばいいんだよ。}}……という人へ。
&bold(){&sizex(5){・&color(red){ゴシック体においては基本的には「U+00A0」「U+2001」を使用し、}}}
&bold(){&sizex(5){&color(red){「U+2001」が全角文字と隣接していない箇所では「全角スペース」を合わせて用いる。}}}
&bold(){&sizex(5){・&color(red){明朝体・丸文字体においては「U+00A0」「全角スペース」を使用する。}}}
……これだけです。
各空白文字の仕様上のルールを守れば、これのみで細かい調整まで十分可能です。
慣れてきたら他の空白文字に手を出すのもよいでしょう。
しかし、その際は&bold(){表示の確認を怠らないよう、十分に注意してください。}
#endregion
----
&sizex(6){&bold(){next:}[[知識編Ⅱ【改行】]]}
&bold(){prev:[[基礎編Ⅳ【製作環境】]]}
[[トップページ>コメントアートwiki トップページ]]
