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

ニコニコダイヒャッカエイチティーエムエルエディタヘルプ

7.4千文字の記事

掲示板へ

記事編集

ニコニコ大百科:HTMLエディタヘルプでは、記事編集で使用する「HTMLエディタ」の使用方法について記述します。

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

スマートフォン版ニコニコ大百科の記事の編集方法については「ニコニコ大百科:スマホエディタヘルプ」を参照してください。

基本的な使用方法

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

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

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

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

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

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

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

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

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

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

各アイコンについて（一段目）

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

[全画面表示]: このアイコンをクリックすると、編集画面がブラウザ上で全画面表示に切り替わります。元に戻すにはもう一度クリックします。

[元に戻す]: 一度行った作業を取り消す場合にクリックします(Ctrl+Z)。何回でもさかのぼって取り消しが行えます。HTMLエディタを有効にしていた場合、作業毎に取り消しが行えます。(※「投稿内容を実際に表示してみる」を押した場合、それ以前に行った作業については、取り消しは行えません。)
※Firefox、Lunascapeの場合は、無効にしていた間を１回の作業として取り消す事が可能。
方法：無効状態で編集する→切り替えボタンを押し有効にする→何もせずに切り替えボタンを押し無効にする→編集して、もう一度切り替えボタンを押し有効にする→元に戻すボタンを押す→取り消しが有効になる
これは、２度目の切り替え動作以降有効になるので一箇所だけチェックしたい等の場合は何もせずに２度目の切り替え作業を行って下さい。(IEでは不可、他の環境でのテスト求む)

[やり直す]: 一度取り消した作業を復帰させる場合にクリックします(Ctrl+Y)。

[切り取り]: 切り取りを行います(Ctrl+X)。

[コピー]: コピーを行います(Ctrl+C)。

[貼り付け]: 貼り付け（ペースト）を行います(Ctrl+V)。コピーされた属性を維持します。

[テキストとして貼り付け]: 貼り付け（ペースト）を行います(Ctrl+V)。このアイコンをクリックすると[テキストとして貼り付け]ダイアログボックスが開くので、そこに貼り付けたいテキストをペーストします。挿入ボタンをクリックすると、属性が破棄されテキストとして記事編集ウィンドウ内に、テキストの貼り付けが実行されます。

[検索と置き換え]: 検索と置き換えを行います。

[表]: 表組みを簡単に挿入することができます。ダイアログボックスが開きますので、各項目を指定してください。

[左寄せ]: 文章を
左寄せします。

[中央揃え]: 文章を
中央揃えします。

[右寄せ]: 文章を
右寄せします。

[両端揃え]: 文章を
両端揃えします。

[インデントを減らす]: インデントを左に戻します。インデントが入っている場合に有効になります。

[インデントを増やす]: 30px分の左インデントを挿入します。

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

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

※○○○から引用

[箇条書き]

番号を付けないリストを作成するときに使用します。テキストを選択後、このアイコンをクリックするとリスト形式になります。

[番号付き箇条書き]

番号を付けたリストを作成するときに使用します。テキストを選択後、このアイコンをクリックするとリスト形式になります。

開く
編集する
プレビューする
保存する
閉じる

[定義リスト]: 言葉などを見出しで定義し、説明文を字下げで表示するリストを作成するときに使用します。テキストを選択後、このアイコンをクリックすると定義リスト形式になります。
最初は見出しを記入(自動で太字強調が付きます): 改行後にTabを押して説明記入。(自動で字下げが付きます); 説明文内で改行、段落分けも可能。
改行後にShift+Tabを押して再び見出しになります: Tabを押して再び説明記入。これの繰り返しでリストを作れます。

各アイコンについて（二段目）

[フォーマット]

段落の書式を定義します。段落ごとに設定するのでカーソルが段落に入っていればメニューが有効になります。以下の項目を選択出来ます。(Ctrl＋1～6、8、9)で操作可能、詳しくはこちら

見出し2 - 見出し　内容についてのまとまりを表します。記事上部に見出し2へのジャンプ機能が自動で生成されます。
見出し3 - 見出し　内容についてのまとまりを表します。見出し2の中での「小見出し」として使用します。
見出し4 - 見出し　内容についてのまとまりを表します。見出し3の中での「小見出し」として使用します。
見出し5 - 見出し　内容についてのまとまりを表します。見出し4の中での「小見出し」として使用します。
見出し6 - 見出し　内容についてのまとまりを表します。見出し5の中での「小見出し」として使用します。
Div
Pre
引用
ソースコード - プログラムコードやHTMLやCSS等のコードを表す際に使用します。

表示サンプル

見出し2

見出し3

見出し4

見出し5

見出し6

[書式をクリア]: ボールドなどを解除して、文字の状態を戻します。(Cｔｒｌ+7)（要確認）

[リンクの挿入・編集]: 外部サイトなどへのリンクを文字列に割り当てることができます。テキストを選択後、このアイコンをクリックしてください。リンク URLとマウスオーバー時のタイトルを入力できるウィンドウが表示されますので、各項目を入力して[OK]ボタンをクリックしてください。
このメニューはテキストなどを選択すると有効になります。

[リンクの削除]: 上記で挿入したリンクの解除ができます。リンクの張られているテキストを選択してこのアイコンをクリックしてださい。
このメニューはテキストなどを選択すると有効になります。

[アンカー(リンクの到達点)]: 任意の位置にアンカーを挿入することができます。アンカーを入れたい位置にカーソルを置き、このアイコンをクリックしてください。アンカー名を入力後、[OK]ボタンをクリックします。
挿入したアンカーを選択するとバウンディングボックスが表示され、アンカー領域を自由に拡大することができます。

[脚注]: 任意の位置に、脚注を挿入することができます。目的の位置にカーソルを移動させ、このアイコンをクリックして脚注を入力してください。

[固定スペース( )]: 任意の位置に、固定スペースを一つ挿入することができます。目的の位置にカーソルを移動させ、このアイコンをクリックして固定スペースを入力してください。

[特殊文字]

特殊文字を入力するのに使用します。このアイコンをクリックするとダイアログボックスが開きますので、任意の文字をクリックして本文中に挿入してください。

€

™

‰

•

…

′

″

‹

›

‘

’

“

”

‚

„

≤

≥

—

‾

−

⁄

∫

∑

∞

√

∼

≅

≈

≠

≡

∈

∉

∋

∏

∧

∨

∩

∪

∂

∀

∃

∅

∇

∗

∝

∠

†

‡

ℵ

ℜ

℘

ℑ

←

↑

→

↓

↔

↵

⇐

⇑

⇒

⇓

⇔

∴

⊂

⊃

⊄

⊆

⊇

⊕

⊗

⊥

⋅

⌈

⌉

⌊

⌋

〈

〉

◊

♠

♣

♥

♦

‌

‍

‎

‏

[水平罫線]: 任意の行に、罫線を挿入する場合に

使用します。（区切り線的な意味で）

[font-size]
文字の大きさを変更します。

[太字]: 文字をボールドにします（Ctrl+B）。
文字を選択してこのアイコンをクリックします。設定されるとアイコンの背景がグレーになるので、元に戻すときはもう一度アイコンをクリックします。

[斜体]: 文字をイタリックにします（Ctrl +I）。主に欧文で使用し、引用文献のタイトルなどに使用します。
文字を選択してこのアイコンをクリックします。設定されるとアイコンの背景がグレーになるので、元に戻すときはもう一度アイコンをクリックします。

[下線]: 文字に下線を引きます（Ctrl+U）。
文字を選択してこのアイコンをクリックします。設定されるとアイコンの背景がグレーになるので、元に戻すときはもう一度アイコンをクリックします。

[取り消し線]: 文字に取消し線を付けます。
文字を選択してこのアイコンをクリックします。設定されるとアイコンの背景がグレーになるので、元に戻すときはもう一度アイコンをクリックします。

[下付き文字]: 下付き文字を作成します。あまり_{使わないかも}しれません。

[上付き文字]: 上付き文字を作成します。2m^2←ココ

各アイコンについて（三段目）

[画像の挿入・編集]: お絵カキコで描かれた画像や各種サムネイル画像を本文中に挿入します。

[ニコニコ静画 (画像挿入)]: ニコニコ静画で投稿された画像を本文中に挿入します。600x600 240x240 180 x180 176x176 170 x170 160 x160 96x72からサイズを選択して表示します。; 例：im355089

[ニコニコ動画]: ツイートを読み込み中です
 https://twitter.com/nicopedian/status/1251315040424058880
任意の位置に、ニコニコ動画を一つ挿入することができます。目的の位置にカーソルを移動させ、このアイコンをクリックすると以下のようなダイアログが表示されます。

×

ニコニコ動画

貼り付ける動画の動画IDを入力してください。

動画ID (例:sm9)

キャンセル

OK

動画IDを入力してください。[OK]ボタンをクリックすると動画が挿入されます。
テンプレートにある[■関連動画]において使用するといい感じです。; 例：sm9

[マイリスト]: 任意の位置に、マイリストのコンポーネントを配置することができます。目的の位置にカーソルを合わせ、このアイコンをクリックして表れるウィンドウにマイリストのIDを入力してください。[OK]ボタンをクリックするとマイリストが挿入されます。; 例：290 3734

[シリーズ]: 任意の位置に、シリーズのコンポーネントを配置することができます。目的の位置にカーソルを合わせ、このアイコンをクリックして表れるウィンドウにマイリストのIDを入力してください。[OK]ボタンをクリックするとマイリストが挿入されます。; 例：39795

[ニコ動プレーヤー]: 任意の位置に、ニコニコ動画の動画プレーヤーを一つ挿入することができます。目的の位置にカーソルを移動させ、このアイコンをクリックすると以下のようなダイアログが表示されます。

×

ニコ動プレーヤー

貼り付ける動画の動画IDを入力してください。

動画ID (例:sm9)

※htmlエディタ上では動画IDのみ表示されます

キャンセル

OK

入力項目に動画IDを入力してください。
[OK]ボタンをクリックすると動画プレーヤーが挿入されます。
編集中のhtmlエディタ内では動画IDのみ表示されます。; 例：sm9

[ニコニコ市場]: 任意の位置に、ニコニコ市場のリンクを挿入します。目的の位置にカーソルを移動させ、このアイコンをクリックし、開いたウィンドウに市場 IDを入力して[OK]ボタンをクリックしてください。; こちらもテンプレートにある[■関連商品]において使用するといい感じです。; 例:azB001OFB6L2; また「古いスタイルの商品表示」にチェックを入れると縦長のニコニコ市場リンクを挿入することが出来ます。記事のスタイルに合わせ使い分けて下さい。

[コミュニティ&チャンネル]: 任意の位置に、ニコニコミュニティのリンクを挿入することができます。目的の位置にカーソルを合わせ、このアイコンをクリックして表れるウィンドウにニコニコミュニティのIDを入力してください。[OK]ボタンをクリックすると挿入が実行されます。; 例：co92

[ニコニコ生放送]: 任意の位置に、ニコニ生放送のサムネイルを挿入することができます。目的の位置にカーソルを合わせ、このアイコンをクリックして表れるウィンドウにニコニコ生放送のIDを入力してください。[OK]ボタンをクリックすると挿入されます。; 例：lv8931212

[ニコニコ静画(ブログパーツ)]: 任意の位置に、ニコニコ静画のイラストを挿入することができます。目的の位置にカーソルを合わせ、このアイコンをクリックして表れるウィンドウにニコニコ静画のイラスト IDを入力してください。[OK]ボタンをクリックすると挿入されます。; 例：im355089

[ニコニ立体]: 任意の位置に、ニコニ立体を一つ挿入することができます。目的の位置にカーソルを移動させ、このアイコンをクリックしてニコニ立体のURLを入力してください。; 例：td 32797

[RPGアツマール]: 任意の位置に、RPGアツマールを一つ挿入することができます。目的の位置にカーソルを移動させ、このアイコンをクリックしてRPGアツマールのURLを入力してください。; 例：gm9226

[ニコニコＱ]: 任意の位置に、ニコニコＱを一つ挿入することができます。

[ピコカキコ]: 掲示板のピコカキコを記事中に貼付けるのに使います。目的の位置にカーソルを合わせ、このアイコンをクリックして表れるウィンドウにピコカキコのIDまたは、貼り付け用タグを入力してください。[OK]ボタンをクリックするとピコカキコが挿入されます。; 例：ピコカキコ ID『296』または貼り付け用タグ『<img src="/img/pikoplayer.png" alt="296">』

[文字の色]: 文字の色を変更することができます。
アイコンの右側の▼をクリックするとカラーパレットが表示されますので、任意の色を選択してください。; パレットの色の一覧はこちら

[背景色]: 文字の背景色を変更することができます。
アイコンの右側の小さい三角形をクリックするとカラーパレットが表示されます。お好きな色を選択下さい。; パレットの色の一覧はこちら

[Twitterのツイート]: 任意の位置に、Twitterのツイートを挿入することができます。目的の位置にカーソルを合わせ、このアイコンをクリックして表れるウィンドウにTwitterのツイート IDを入力してください。[OK]ボタンをクリックすると挿入されます。※htmlエディタ上ではURLのみ表示されます
また、詳細な仕様と注意点については「ニコニコ大百科:Twitter引用」の記事を参照のこと。; 例：https://twitter.com/nico_nico _pedia/status/1001 360077758976001; ツイートを読み込み中です
 https://twitter.com/nico_nico_pedia/status/1001360077758976001

編集者向けページ
マニュアル	記事の編集方法 - HTMLタグ一覧 - HTMLエディタヘルプ - スマホエディタヘルプ - ピコカキコヘルプ - お絵カキコヘルプ
マナー	編集時のマナー - 編集合戦 - 楽しく過ごすために
素材	素材集 - 素材集2 - ニコニコテレビ君 - キャラアイコン - ドットキャラ - 外字・特殊フォント
テンプレ	お知らせ表示 - ユーザーボックス - テンプレートボックス - 作品テンプレート - HTMLテンプレート集 - Twitter引用
カラー	HTMLカラーコード - CSSでの色指定
仕様	仕様 - デフォルトCSS
依頼	一般会員依頼スレ - 記事作成依頼 - 記事加筆依頼 - 要編集記事 - 未作成タグ - 話題の単語
公式企画	百チャレ - 大百科グランプリ
ヘルプ	よくある質問 - エラー・不具合情報
ver20 220711

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

お絵カキコがありません

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

ピコカキコがありません