単語記事: ニコニコ大百科:HTMLエディタヘルプ

編集

この記事では記事を編集で使用するHTMLエディタ」の使用方法について記述します。

HTMLエディタを使用しない編集方法については「ニコニコ大百科:記事の編集方法」を参照して下さい。

基本的な使用方法

記事の編集は直接HTMLで記述する方法と、HTMLエディタを使用して作成する方法の2種類があります。

記事編集画面において、オレンジ色の[htmlエディタの有効を効を切り替える]ボタンクリックすることにより、その切り替えが可です。

見出しを作成したり、文字の色や太さを変えたり、記事中にニコニコ動画リンクを挿入する場合など、HTMLエディタで簡単に行えます。

まずは文章を入し、ドラッグして効果を適用したい部分を選択し、入欄上部にあるアイコンクリックして効果を適用するのがお勧めの方法です。

Enter」キーを押すと新しい段落での記述に成ります。Windowsの「メモ帳」やテキストエディタへの印字を念頭に置いた一般的日本語ワープロソフト改行」と「段落」は概念が異なりますのでご注意願います。

段落内で改行をするにはShiftキーを押し続けて離さない状態で「Enter」キーを押してください。

Spaceキーを押しての「空白を挿入」する「見ただけ改行」は行わないで下さい。

お手持ちのパソコンメモ帳テキストエディタで原稿を下書きをして、コピーアンペーストをして入し、エディタで記事を整形・装飾するのもトラブルによるデータ消失を回避出来て便利です。更にお手持ちのパソコンHTMLエディタを導入して、パソコンローカル環境である程度の整形・装飾を施した下書き原稿をコピーアンペーストも便利でしょう。

動画マイリストニコニコ市場等の挿入においては、まず該当箇所にカーソルを移動させ、アイコンクリックして動画URLなどを入して記事中に動画などを入してください。


下の画像のそれぞれのアイコンクリックすると、それぞれの機の説明にジャンプします)

各アイコンについて(上段)

左上から右下に向かって順に解説するものとします。画像からのリンクが全ての環境において確実でない為、アイコン上にカーソルを移動させたときにでるポップアップ文字[]を参考にしてください。

ショートカットキーについて、Mac OS Xをご使用の場合は、[Ctrl]→[⌘キー]と内変換してください。

[フルスクリーン](左から1)
このアイコンクリックすると、編集画面がブラウザ上でフルスクリーン表示に切り替わります。元に戻すにはもう一度クリックします。
[元に戻す(Ctrl+Z)](左から2)
一度行った作業を取り消す場合にクリックします。何回でもさかのぼって取り消しが行えます HTMLエディタを有効にしていた場合、作業毎に取り消しが行えます。(※「投稿内容を実際に表示してみる」を押した場合、それ以前に行った作業については、取り消しは行えません。)
FirefoxLunascapeの場合は、効にしていた間を1回の作業として取り消す事が可
方法:効状態で編集する→切り替えボタンを押し有効にする→何もせずに切り替えボタンを押し効にする→編集して、もう一度切り替えボタンを押し有効にする→元に戻すボタンを押す→取り消しが有効になる
これは、2度の切り替え動作以降有効になるので一箇所だけチェックしたい等の場合は何もせずに2度の切り替え作業を行って下さい。(IEでは不可、他の環境でのテストむ)
[やり直し(Ctrl+Y)](左から3)
一度取り消した作業を復帰させる場合にクリックします。
[切り取り](左から4)
切り取りを行います(Ctrl+X)。
[コピー](左から5 )
コピーを行います(Ctrl+C)。
[貼り付け](左から6)
貼り付け(ペースト)を行います。コピーされた属性を維持します(Ctrl+V)。
[テキストとして貼り付け](左から7)
貼り付け(ペースト)を行います。このアイコンクリックすると[テキストとして貼り付け]ダイアログボックスが開くので、そこに貼り付けたいテキストペーストします(Ctrl+V)。挿入ボタンクリックすると、属性が破棄されテキストとして記事編集ウィンドウ内に、テキストの貼り付けが実行されます。
[表の挿入](左から8)
表組みを簡単に挿入することができます。ダイアログボックスが開きますので、各項定してください。
[行のプロパティ](左から9)
表組みの行の設定を行います。表組みの中にカーソルを入れた場合に有効になります。
[セルプロパティ](左から10)
表組みのセルの設定を行います。表組みの中にカーソルを入れた場合に有効になります。
[前に行挿入] (左から11)
表組みに行を挿入します。カーソルを入れている行の一つ上に行が追加されます。表組みにカーソルを入れている場合に有効になります。
[後ろに行挿入](左から12)
表組みに行を挿入します。カーソルを入れている行の一つ下に行が追加されます。表組みにカーソルを入れている場合に有効になります。
[行削除](左から13)
カーソルを入れている行を削除します。表組みにカーソルを入れると有効になるメニューです。
[前に列挿入](左から14)
表組みに列を挿入します。カーソルを入れている行の一つ左に列が追加されます。表組みにカーソルを入れている場合に有効になります。
[後ろに列挿入](左から15)
表組みに列を挿入します。カーソルを入れている列の一つ右に行が追加されます。表組みにカーソルを入れている場合に有効になります。
[列削除](左から16)
カーソルを入れている列を削除します。表組みにカーソルを入れると有効になるメニューです。
[結合されたセル分割](右から10)
結合されたセル分割する場合に使用します。結合されたセルカーソルが入っている場合に有効になります。
[セルを結合](右から9)
セルを結合する場合に使用します。クリックするとダイアログボックスが開きますので、結合したい数のセル定します。
[ガイドラインの表示/非表示](右から8)
ガイドラインの表示と非表示を切り替えます(要確認)。表組みの中にカーソル が入っている場合に有効になります。
[左え]、[中央え]、[右え]、[両端え](右から7〜4)
段落をそれぞれの状態にえます。
[インデント解除](右から3)
インデントを左に戻します。インデントが入っている場合に有効になります。
[インデント](右から2)
全角文字3文字分の左インデントを挿入します。
[引用](一番右)

選択したテキスト引用として表示するために使用します。

外部サイトなどの文章などをコピペする場合などは、このアイコンを使用して、必ず出展元を記載して引用である旨を明記します。

○○○から引用

各アイコンについて(下段)

[フォーマット段落)](一番左)
段落の書式を定義します。段落ごとに設定するのでカーソル段落に入っていればメニューが有効になります。以下の項を選択出来ます。(Ctrl+1~6、8、9)で操作可、詳しくはこちら
  • 段落 - 通常の文章(内容)を表すのに使用します。
  • 見出し2 - 見出し 内容についてのまとまりを表します。記事上部に見出し2へのジャンプが自動で生成されます。
  • 見出し3 - 見出し 内容についてのまとまりを表します。見出し2の中での「小見出し」として使用します。
  • 見出し4 - 見出し 内容についてのまとまりを表します。見出し3の中での「小見出し」として使用します。
  • 見出し5 - 見出し 内容についてのまとまりを表します。見出し4の中での「小見出し」として使用します。
  • 見出し6 - 見出し 内容についてのまとまりを表します。見出し5の中での「小見出し」として使用します。
  • ソースコード - プログラムコードHTMLCSS等のコードを表す際に使用します。
  • コードサンプル - プログラムなどの出サンプルを表す際に使用します。
表示サンプル

見出し2

見出し3

見出し4

見出し5
見出し6
[フォーマット解除](左から2)
ボールドなどを解除して、文字の状態を戻します。(Ctrl+7)(要確認)
[リンクの挿入/編集](左から3)
外部サイトなどへのリンク文字列に割り当てることができます。テキストを選択後、このアイコンクリックしてください。リンクURLマウスオーバー時のタイトルを入できるウィンドウが表示されますので、各項を入して[挿入]ボタンクリックしてください。
このメニューテキストなどを選択すると有効になります。
[リンク削除](左から4)
上記で挿入したリンクの解除ができます。リンクられているテキストを選択してこのアイコンクリックしてださい。
このメニューテキストなどを選択すると有効になります。
[アンカー挿入/編集](左から5)
任意の位置にアンカーを挿入することができます。アンカーを入れたい位置にカーソルを置き、このアイコンクリックしてください。アンカー名を入後、[挿入]ボタンクリックします。
挿入したアンカーを選択するとバウンディングボックスが表示され、アンカー領域を自由に拡大することができます。
[ニコニコ動画](左から6)
任意の位置に、ニコニコ動画を一つ挿入することができます。的の位置にカーソルを移動させ、このアイコンクリックしてニコニコ動画URLを入してください。
テンプレートにある[■関連動画]において使用するといい感じです。
例:sm9
[ニコニコ市場](左から7 )
任意の位置に、ニコニコ市場リンクを挿入します。的の位置にカーソルを移動させ、このアイコンクリックし、開いたウィンドウに市場IDを入して[挿入]ボタンクリックしてください。
こちらもテンプレートにある[■関連商品]において使用するといい感じです。
例:azB001OFB6L2
また「古いスタイルの商品表示」にチェックを入れると旧バージョンニコニコ市場リンクを挿入することが出来ます。記事のスタイルに合わせ使い分けて下さい。
例:az4758010633
[マイリスト](左から8 )
任意の位置に、マイリストのコンポーネントを配置することができます。的の位置にカーソルを合わせ、このアイコンクリックして表れるウィンドウにマイリストIDを入してください。[挿入]ボタンクリックするとマイリストが挿入されます。
例:2903734
[ニコニコ生放送](左から9)
任意の位置に、ニコ生放送サムネイルを挿入することができます。 的の位置にカーソルを合わせ、このアイコンクリックして表れるウィンドウにニコニコ生放送IDを入してください。[挿入]ボタンクリックすると挿入されます。
例:lv8931212
[コミュニティ/チャンネル](左から10)
任意の位置に、ニコニコミュニティリンクを挿入することができます。 的の位置にカーソルを合わせ、このアイコンクリックして表れるウィンドウにニコニコミュニティIDを入してください。[挿入]ボタンクリックすると挿入が実行されます。
例:co92
[ニコニコ静画](左から11)
任意の位置に、ニコニコ静画のお題またはイラストを挿入することができます。 的の位置にカーソルを合わせ、このアイコンクリックして表れるウィンドウにニコニコ静画のお題IDまたはイラストIDを入してください。[挿入]ボタンクリックすると挿入されます。
例:sg1
例:im355089
[nicopedia.pikokakiko](左から12)
掲示板ピコカキコを記事中に貼付けるのに使います。的の位置にカーソルを合わせ、このアイコンクリックして表れるウィンドウにピコカキコIDまたは、貼り付け用タグを入してください。[挿入]ボタンクリックするとピコカキコが挿入されます。
例:ピコカキコID296』または貼り付け用タグ『<img src="/img/pikoplayer.png" alt="296">』
296
[番号リスト](左から13)
番号を付けないリストを作成するときに使用します。テキストを選択後、このアイコンクリックするとリスト形式になります。
[番号付きリスト](左から13)
番号を付けたリストを作成するときに使用します。テキストを選択後、このアイコンクリックするとリスト形式になります。
  1. 開く
  2. 編集する
  3. レビューする
  4. 保存する
  5. 閉じる

[線](左から14)
任意の行に、ラインを挿入する場合に使用します(区切り線的な意味で)。

[画像の挿入/編集](右から10)
お絵カキコで描かれた画像や各種サムネイル画像を本文中に挿入します。
[特殊文字](右から9)
特殊文字を入するのに使用します。このアイコンクリックする とダイアログボックスが開きますので、任意の文字クリックして本文中に挿入してください。
& " ¢ € £ ¥ © ® ™ ‰ µ · • … ′ ″ § ß
‹ › « » ‘ ’ “ ” ‚ „ < > ≤ ≥ – — ¯ ‾ ¤ ¦
¨ ¡ ¿ ˆ ˜ ° − ± ÷ ⁄ × ¹ ² ³ ¼ ½ ¾ ƒ ∫ ∑
√ ≈ ≠ ∏ ¬ ∩ ∂ ´ ¸ ª º † ‡ À Á Â Ã Ä
Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Œ
Š Ù Ú Û Ü Ý Ÿ Þ à á â ã ä å æ ç è é ê ë
ì í î ï ð ñ ò ó ô õ ö ø œ š ù ú û ü ý þ
ÿ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ
Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο
π ρ ς σ τ υ φ χ ψ ω ← ↑ → ↓ ↔ ♣ ♥
[太字](右から8)
文字ボールドにしますCtrl+B)。
文字を選択してこのアイコンクリックします。設定されるとアイコン背景グレーになるので、元に戻すときはもう一度アイコンクリックします。
[斜体](右から7)
文字をイタリックにしますCtrl+I)。に欧文で使用し、引用文献のタイトルなどに使用します。
文字を選択してこのアイコンクリックします。設定されるとアイコン背景グレーになるので、元に戻すときはもう一度アイコンクリックします。
[下線](右から6)
文字に下線を引きますCtrl+U)。
文字を選択してこのアイコンクリックします。設定されるとアイコン背景グレーになるので、元に戻すときはもう一度アイコンクリックします。
[取消し線](右から5)
文字に取消し線を付けます。
文字を選択してこのアイコンクリックします。設定されるとアイコン背景グレーになるので、元に戻すときはもう一度アイコンクリックします。
[下付き](右から4)
下付き文字を作成します。あまり使わないかもしれません。
[上付き](右から3)
上付き文字を作成します。2m2←ココ
[文字色](右から2)
文字の色を変更することができます。
アイコンの右側の小さい三角形クリックするとが表示されますので、任意の色を選択してください。
[背景色](一番右)
文字背景色を変更することができます。
アイコンの右側の小さい三角形クリックするとカラーパレットが表示されます。お好きな色を選択下さい。

関連項目


【スポンサーリンク】

携帯版URL:
http://dic.nicomoba.jp/k/a/%E3%83%8B%E3%82%B3%E3%83%8B%E3%82%B3%E5%A4%A7%E7%99%BE%E7%A7%91%3Ahtml%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%98%E3%83%AB%E3%83%97
ページ番号: 446615 リビジョン番号: 1613385
読み:ニコニコダイヒャッカエイチティーエムエルエディタヘルプ
初版作成日: 08/08/09 20:40 ◆ 最終更新日: 12/08/22 10:01
編集内容についての説明/コメント: 抜けているショートカットキーを加筆
記事編集 / 編集履歴を閲覧
このエントリーをはてなブックマークに追加

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

ニコニコ大百科:HTMLエディタヘルプについて語るスレ

45 : ななしのよっしん :2013/10/13(日) 04:09:34 ID: +g9aqaO+M1
ていうかブロック要素を縦方向に中央えしたいときに
テーブルレイアウトしなくちゃいけないのがとてもよくないと思う

最低でも display:table-cell; に、
できれば display:box; からの box-align; とかに対応して欲しい
46 : ななしのよっしん :2014/05/12(月) 23:18:25 ID: Dn2cAPxkJ0
ここに書いてある通りにリンクの挿入を試してみたのですがうまくいきません。
テキストドラッグして、リンクの挿入アイコンを選んで、URLして(コピーじゃダメなのかな?)ドラッグしたテキスト通りのタイトルを入して挿入を押したんですが、間違ってますでしょうか・・・?
47 : ななしのよっしん :2015/02/04(水) 12:22:45 ID: By6wonf3Lm
http://dic.nicovideo.jp/oekaki/*****.png
48 : ななしのよっしん :2015/02/04(水) 12:24:38 ID: By6wonf3Lm
誤爆失礼
49 : ななしのよっしん :2015/04/24(金) 23:50:02 ID: 18KjwgWZD1
HTMLエディタ、使えなくなってないか?
50 : 49 :2015/04/25(土) 01:06:54 ID: 18KjwgWZD1
どうやら実装したばかりのせいか、新しいエディタが出るときと出ないときがあるみたい
51 : ななしのよっしん :2015/11/14(土) 10:45:16 ID: Y2SZr3XSY4
すみません。表のセルの大きさをエディタで変更したいのですが、どうすればいいのでしょうか?
52 : ななしのよっしん :2016/01/12(火) 21:22:24 ID: E1mDzGxdsT
今のエディタだと編集中の記事の見た大百科デザインが反映されないのは俺だけ?
53 : ななしのよっしん :2017/02/20(月) 16:38:48 ID: MYGVG4xupf
ずっとプレビューが観られなくなってるよね リンク切れだったりブログパーツに対応してなかったときにミスに気が付かないので結構不便
というか編集者あっての大百科なんだしそこの負荷はケチってはダメなのでは・・・
54 : ななしのよっしん :2017/07/23(日) 17:05:50 ID: KduISXf9HO
ニコニコ市場リンクを古いスタイルの商品表示でできないのだが
ニコニコニューストピックス
電ファミwiki
  JASRAC許諾番号: 9013388001Y45123
  NexTone許諾番号: ID000001829