【改訂版】ニコ生のコミュプロフを編集する際の予備知識
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

【改訂版】ニコ生のコミュプロフを編集する際の予備知識

2013-02-22 12:41
  • 8
  • 19
この記事はニコニコ生放送のコミュニティ編集について書いています。
こちらのTIPS の改訂版の記事になります。

HTMLの知識


通常、コミュプロフで装飾の編集をするにはHTMLによる編集が必要になります。色を変えたり文字の大きさを変更したりするためです。 HTMLが出来ないと良いコミュプロフが作れないと思う方がいますが・・・

はっきり言うと、HTMLの知識は大して必要ありません。凝った装飾でも、ドット絵でも、グラデーションでもあまり必要ありません。

ごく基本的な知識があれば、ニコ生のコミュプロフ編集は充分です。なぜならニコ生のコミュプロフ編集で利用できるHTMLには制限があって多くのHTMLタグを利用できないためです。現在、最新のHTMLはかなり複雑で深いものになってきていますが、コミュプロフ編集する上で高度な知識は必要ないので安心して下さい。
ポイント
  • コミュプロフ編集では、HTMLの知識は基礎だけで充分です。

使えるHTMLタグは6つ

<font> ・・・ 文字の色を変えたり、大きさを変える
<br>  ・・・ 改行する
<b>   ・・・ 文字を太字にする
<i>    ・・・ イタリック体にする
<s>   ・・・ 打ち消し線を引く
<u>   ・・・ 下線を引く

下記に実例を示しました。

てすと
ソース
<font color="#ff0000">てすと</font>
てすと
ソース
<font size="5">てすと</font>
あいうえお
かきくけこ
ソース
あいうえお<br>かきくけこ
てすと
ソース
<b>てすと</b>
test
ソース
<i>test</i>
てすと
ソース
<s>てすと</s>
てすと
ソース
<u>てすと</u>
ポイント
  • タグが分からなくても、囲んだ部分が変化する感覚で使いましょう。

使ってはいけない色

上からデフォルト(指定なし)の色、黒色、黄色、ピンクになります。 コミュプロフでは白背景を変更する事ができないため、 必然的に白背景でも読みやすい文字色を選ぶことになります。

この中で一番見にくい・読みにくいのは黄色です。黒色でも充分読めますが、 白との対称色なので少しきつい印象になります。 その場合は黒の明度を下げた色を用いると、デフォルトの指定なしの色のように柔らかい印象になります。

また、白に近い色、淡白な色、明度の低い色は読みにくくなるので注意が必要です。

また、コミュプロフ内の文字に多くの色を利用するのは避けた方が良いでしょう。 何が通常の説明で、どこの説明を強調したいのか分からなくなってしまいます。また配色によっては見づらくなる原因になります。普通は2・3色程度が無難です。

ポイント
  • 背景色に近い色は、文字色になるべく使わない。

書ける文字数は8192文字

ニコ生のコミュプロフは記載できる文字数に上限があります。8192文字。普通に書く文字からHTMLのタグやEnterキーによる改行も1文字ずつ計算されます。少し凝った装飾をしようとすると文字数が足らなくなる場合があります。

通常に編集する場合はあまり気にする必要はありませんが、ドット絵やグラデーションや鏡面反射といったものを利用する場合は残りの文字数に注意しましょう。文字数を調べるために以下のようなサイトやツールを利用すると便利です。

文字数カウンター
Nanmoji

ポイント
  • ドット絵を利用する場合は残り文字数に注意。

特殊文字を利用する

ニコ生のコミュニティでは、普通のサイトのような綺麗で可愛らしい様々な装飾ができません。 でも特殊文字を利用すれば、いくらかは個性的なコミュプロフを作成する事ができます。 どんな特殊文字があるかは、以下のサイトを参照してみて下さい。 お気に入り等に登録して、いつでも利用できるようにしておくと便利です。

特殊文字リファレンス - HTMLクイックリファレンス -
特殊文字一覧 - はーいらんど -

注意すべき事は次の「各ブラウザの表示の違い」を参考にして下さい。

ポイント
  • 特殊文字を上手く活用すると、印象がグッと変化します。

各ブラウザの表示の違い


普段見ているWebサイトは、利用するブラウザで表示が異なります。

それは、ニコ生のコミュニティのコミュプロフでも起きます。 普通に文字を書いて、使用できるタグで編集する程度ではほぼ変わりはありません。 ただし、特殊文字を利用するとブラウザ間の表示の違いが顕著に出てきます。

特殊文字は機種依存文字と言われて、利用するOSやブラウザ等のPC環境によって表示に違いが生じます。 特にSafari、IE7及び9以降で表示の違いが起きやすい事を確認しています。仕様と割り切る事もできますが、ブラウザ間の表示の違いを気遣う事で、見てくれる視聴者に配慮したコミュプロフを作る事ができます。

下の画像は、同じコミュプロフをIE9とIE8で表示した例です。



同じブラウザでもバージョンが違う事で表示が異なります。 これは猫の体毛部分に特殊文字の「▒」「▓」を利用していますが、IE9では描画する範囲が以前のバージョンと異なり、 IE8の表示とは違うずれが生じてしまうためです。

・ドット絵で利用するにお勧めしない特殊文字
 ░ ▒ ▓

・どのブラウザでもほぼ問題なく表示できる主な特殊文字
 █ ♥ ♪

ポイント
  • ブラウザによっては表示されない特殊文字に注意しましょう。

グラデーションの作り方

※応用の内容になります。

ニコ生のコミュプロフでは、特定の手段でグラデーションの表示をする事はできません。 ただし、あたかもグラデーションしているように見せる事はできます。その方法を以下で説明します。

グラデーションとは、規則的に色濃度を変化させたものである。ニコ生のコミュプロフでは、基準とする色を指定して、その色から明度や彩度の数値をずらした色を指定していけばグラデーションっぽく表現する事が可能になります。画像編集ソフト(PhotoshopやGIMP等)のカラーパレットの類を用いて、彩度(S)や明度(V)の数値をずらしていきます。

※画像編集ソフトによりVの表記は異なる。

下の左の画像は、彩度(S)が100。右の画像は、彩度(S)が90。数値が低く減っていくほどに色が薄くなっていきます。

これを「█」を用いて、ニコ生のコミュプロフで表現してみます。彩度100、90、80、70、…10、のHTML表記の色を順に <font color="#"> のcolor値に当てはめていけば以下のような表示になります。

100、90、80…と刻んでいく彩度の数値をもっと細かくすれば滑らかなグラデーションになります。また彩度ではなく明度や他の要素で試しても面白い色の表現が可能となります。色々、試してみると自分だけの綺麗なコミュプロフを作成する事ができます。

※これは一例です。グラデーションを作成するサイトやツール、一覧表を参考にする事もできます。

色一覧
html-色一覧
JIS Color Sample

ポイント
  • 擬似グラデーションは大量に文字数を消費することに注意が必要です。

鏡面反射の作り方

※応用の内容になります。

これは「グラデーションの作り方」からの応用です。上記画像のニコニコテレビちゃんで作ってみます。

左の画像から、まずは本体となる部分を描いた後に「反射の境」となるラインを引きます。画像の場合は「 ̄」で上よりのラインを引いています。 そして右の画像では鏡面部分を描いています。当然、実物とは逆にニコニコテレビちゃんの足部分から描いていきます。 全て描かないで、5・6行位描いています。

これだけではまだ実物を逆に描き足しただけなので、次でグラデーションさせます。

床のライン下の鏡面部分を1行ずつ、 <font color="#"> で色指定していきます。 1行ずつ下に行くほど薄くなるように色指定してあげれば、擬似的に鏡面のような表示にできます。右の画像が実際の表示です。

尚、これは他のドット絵等でも試す事ができます。このニコニコテレビちゃんの場合は黒を基本色にしていますが、他の色でも可能です。色々と試してみると面白いものが出来ると思います。

ポイント
  • 鏡面反射も文字数を多く消費するので注意が必要です。

テンプレートを利用する

コミュ編集が苦手な方や時間をかけられない方に向けて、あらかじめ作られた型のテンプレートを配布しています。使い方は簡単で、好きなテンプレートを選んでコピーしてから必要な部分だけを書き加えて、編集画面で貼り付ける作業となります。

HTMLがあまり分からない人や苦手な人でも、1から作るよりは簡単に編集して利用できると思います。

ここまで色々説明してきましたが、テンプレートを使う方が1から作るよりずっと楽です(笑)。

テンプレート配布
広告
×
いつも素敵なプロフや編集法ありがとうございます><♪
こんな素晴らしいブロマガを見逃していたとは(・_・;)
そっこうw お気に入りです♪
HTML苦手な私ですが凄く助けてもらってます♪
最初は魔法かとおもったくらいですww
これからもお体に気をつけて迷えるニコ生の私達を助けてくださいw
感謝を込めて♪ お疲れ様です♪ ありがと(*´∀`)♪
18ヶ月前
×
>>1 めろんぱん~さん

コメントありがとうございます♪
こんな所にまで来ていただいてびっくりです。
ユーザーの方々が少しでも使える!と思える
瞬間が作れたらいいなと思って好き勝手に書きましたw

体調はいかがですか~痛みが引いていれば良いのですが。
深夜にした放送のタイムシフト見て不覚にも泣いてしまいました;;
あぁ~歳は取るもんじゃないですね。・・・とほほ。
お身体が良い方向へ向かいますようお祈りします♪
18ヶ月前
×
テンプレ活用させていただきました!
味気なかったプロフィールが華やか(過疎)になりました!

ありがとうございます!!!
17ヶ月前
×
>>3 ヨーグルファームさん

コメントありがとうございます。
また、テンプレを活用して下さってありがとうございます。
少しでも生主活動の助けになれれば嬉しいです('▽'*)
17ヶ月前
×
NETEの作者としては悲しくなるww
7ヶ月前
×
>>5 そぉてんさん

えっと、よく分からないのですが
何だかすみませんでしたm(_ _)m?

NETEについては昔コミュで
ご紹介させていただきました。
7ヶ月前
×
今年の年始より生主デビューした新参者です

コミュのトップページがあまりにも寂しくいろいろ探してここにたどり着きました。

かなりいっぱいあったのと実用的なのもありテンプレ使用させていただきます。

またよさそうなのがあれば使用させていただきます
5ヶ月前
×
>>7 chaosさん

生主デビューおめでとうございます。
テンプレをご利用して下さってありがとうございます。
chaosさんのように生主を始めてテンプレを使って下さり
活動の幅を広げてもらえると、作った者として嬉しいです。
また機会がありましたら使ってやって下さい。
5ヶ月前
コメントを書く
コメントをするには、
ログインして下さい。