アップロードした画像やファイルを本文内に挿入する方法

画像・ファイルの本文内挿入とは?

「すぐ使えるCMS」の Ver. 4.6 からは、管理画面からアップロードした画像やファイルを本文（「記事内容」欄）内の任意の位置に配置（テキストの間に挟む、右寄せ、左寄せ、挿入）できるようになりました。

この機能は Ver. 4.7 以上では製品に予め組み込まれている場合がありますが、このサポートページでは、お手元の製品にこの機能を追加する方法と、挿入できるタグの変更方法をご紹介します。

オンラインデモと操作方法

文中への画像・ファイル挿入機能は下記のオンラインデモからお試しいただけます。右クリックメニューからアップロードした画像またはファイルを選ぶと、編集エリアに表示用のHTMLタグが挿入されます。

操作手順としては「先に画像をアップロードする」などいくつか注意点がありますので、操作マニュアルもご覧下さい。

画像・ファイルの挿入機能デモ

画像・ファイルの本文内挿入に対応した製品

Ver. 4.6 以上の製品で、管理画面のテンプレートを編集する事により画像・ファイルを文中に埋め込む事ができるようになります。2017年6月現在、この機能に対応するバージョンが発売されているのは以下の製品です。

添付ファイル付ウェブページ更新ツール大容量版（Ver. 4.8 以上）※従来版は未対応
画像付ウェブページ更新ツール大容量版（Ver. 4.7）※販売は終了 ※従来版は未対応
画像付ニュース更新ツール大容量版（Ver. 4.7）※販売は終了
画像付ニュース更新ツール（従来版、Ver. 4.6）※販売は終了

お手元に製品をダウンロードしてお持ちの方は、admin/admin.cgi の冒頭にバージョンが記載されていますのでご確認下さい。

画像・ファイルの本文内挿入機能を使う場合の運用上の注意点

画像やファイルを本文内に挿入する事にした場合は、ホームページ側にこれまで表示されていた固定位置での画像やファイルの表示は削除する必要があります。そうしないと、それらのファイルが2箇所に表示されてしまいます。また逆に、固定位置での表示設定を削除した場合は、編集時に本文内への挿入を忘れるとせっかくアップロードしたファイルが表示されません。

このため、どちらの方法で画像やファイルを表示するかは、編集担当者と相談の上決定して下さい。

なお、画像・ファイルは合計で5つまでアップロードできますので、「本文に挿入する時は1番画像」「固定表示にする場合は2番画像」などの使い分けが可能です。このように使い分ける場合は、管理画面テンプレートに、区別するための追加の指示を入れるなどの工夫をして下さい。

ダウンロードと設置

ご利用になる製品をサーバに設置して下さい。

設置が初めての方はダウンロードした後に表示される「ステップ by ステップガイド」をご覧になりながら設置を行って下さい。テストは1か月間無料でご利用いただけます。

テスト登録

動作確認のために、記事を1件登録して管理画面が正常に動作する事を確認して下さい。

初期機能の確認

次に、入力画面で画像を1つ選択して「先にアップロード」ボタンを押して下さい。すると再度入力画面が表示されますが、この時、「画像」欄にはアップロードした画像が表示されているはずです。この状態で「記事内容」の入力欄にマウスカーソルを合わせて右クリックしてみて下さい。

右クリックした場合の表示に下記の3パターンある筈ですので、それぞれのパターンによって次の作業を行って下さい。

A. 表示されるメニューパネルに「画像とファイル」という項目が含まれている

右クリックした時に表示されるメニューパネルに「画像とファイル」という項目が含まれていれば、既にこの機能は導入済です。タグの調整だけ行って下さい。

B. メニューパネルは表示されるが「画像とファイル」という項目は無い

右クリックした時にメニューパネルは表示されるが「画像とファイル」とは表示されていない場合、管理画面テンプレートの編集が必要です。

なお、「画像とファイル」はメニューパネルの下の方に表示されますので、パネル内にスクロールバーが出ていたらスクロールして確認して下さい。

C. 右クリックしても何も起こらない

右クリックしても何も起こらない場合は右クリックメニュー全体をこれから導入します。

なお、本文内挿入に対応したバージョンは通常右クリック機能は備えている筈ですので、お持ちのファイルが対応バージョンの製品かどうかを念のため再確認して下さい。対応の無いバージョンに設定だけしても機能は使えません。

旧バージョンからバージョンアップしたり、デモサンプルのテンプレートを使った場合は対応バージョンでも右クリック機能が付いていない場合がありますので、admin/admin.cgi に記載されているバージョンを確かめて下さい。Ver. 4.6 以上であれば問題ありません。

テスト登録の保存

画像をアップロードした記事は後での動作確認に使いますので、タイトルや本文を入力の上登録を確定しておいて下さい。

管理画面テンプレートの編集（B とC の方のみ）

初期機能の確認結果が B または C だった方は、管理画面用のテンプレート templates/admin/2.html を編集して下さい。

編集のポイント

下記例のサンプルコードをファイル内にコピーして下さい。ポイントは上から順番に以下の3か所です。

<head> - </head> 内にスタイルシート指定（B、C の方）
記事内容のテキストエリアにID属性を追加（C の方のみ）
ページ末尾に JavaScript の指定（B、C の方）

<head> - </head>内にスタイルシート指定（B とC の方のみ）

<head> - </head>内に下記を参考にスタイルシート（CSS）を追加します。

編集の際、上記の「初期機能の確認」でCに該当した方は太字の部分を全て（緑字、赤字、青字）追加して下さい。

「初期機能の確認」でBに該当した方は下記の通り作業して下さい。

緑字部分は既にファイル内にある筈ですので追加は不要です。
赤字部分は必ず追加して下さい。
青字部分は、既存のコードの書換えが必要な点や、場合によっては既にファイル内に記載されている可能性がある部分です。既存のコード内で同様の部分が無いかを探して適宜修正や追加を行って下さい。なお、スタイルシートが別ファイルに分かれている可能性もあります。読み込まれているスタイルシートファイルに同様の設定があるかどうかも確認して下さい。

コピー

<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<META name="robots" content="noindex, nofollow">
<TITLE>ページ %_mode_title_%入力</TITLE>
<STYLE type="text/css">
<!--
:(略)
.noime{
    ime-mode: disabled; /* always off */
}
.imeoff{
    ime-mode: inactive; /* default off */
}
.imeon{
    ime-mode: active;
}
.imeauto {
    ime-mode: auto; /* no change */
}

.rightclickmenupanel li a
{
    display: block;
    padding: 0.2em 0.3em;
    text-decoration: none;
    color: black;
}
.rightclickmenupanel li a:hover
{
    background-color: #ffffdf;
}
.rightclickmenupanel ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.rightclickmenupanel
{
    width: 200px; height: 376px; 
    background-color: #efefef;
    position: absolute;
    left: 0px; top: 0px;
    border: 1px solid black;
    display: none;
    overflow: auto;
}
/* 画像とファイルへのリンク */
.link2subpanel:after {
    content: "画像とファイル ->";
}
.filelink {
    padding-left: 20px;
    margin-right: 10px;
    background: url(%_relative_web_dir_%icons/general.gif) no-repeat top left;
}
.doc {
    background-image: url(%_relative_web_dir_%icons/doc.gif)
}
.pdf {
    background-image: url(%_relative_web_dir_%icons/pdf.gif)
}
.ppt {
    background-image: url(%_relative_web_dir_%icons/ppt.gif)
}
.txt {
    background-image: url(%_relative_web_dir_%icons/txt.gif)
}
.xls {
    background-image: url(%_relative_web_dir_%icons/xls.gif)
}
.zip {
    background-image: url(%_relative_web_dir_%icons/zip.gif)
}
textarea {font-size: 1em;}

-->
</STYLE>
</HEAD>

記事内容のテキストエリアにID属性を追加（C の方のみ）

記事内容の入力エリアにID属性が付いていなかったら追加して下さい。

コピー

<TEXTAREA name="body" cols="60" rows="10" class="imeauto" id="body">%_body_%</TEXTAREA>

ページ末尾に JavaScript の指定（B とC の方のみ）

</body> の直前に、以下の太字部分を追加して下さい。

編集の際、上記の「初期機能の確認」でCに該当した方は太字の部分を全て（青字、緑字、赤字）追加して下さい。

「初期機能の確認」でBに該当した方は下記の通り作業して下さい。

緑字部分は既にファイル内にある筈ですので追加は不要です。
赤字部分は必ず追加して下さい。
青字部分は、場合によっては既にファイル内に記載されている可能性がある部分です。既存のコード内で同様の部分が無いかを探して適宜修正や追加を行って下さい。

コピー

:（略）
var mainFM = document.getElementById("mainform");
for (i=0; i<=mainFM.elements.length; i++){
    if (mainFM.elements[i] && mainFM.elements[i].type == 'text'){
        mainFM.elements[i].onkeydown = goConfonEnter;
    }
}
// --></script>
<script type="text/javascript" src="//lcns2.sugutsukaeru.jp/26303ec1ce859dc/4.7/65fcd604a07352712be0267ca2b0277a/jquery-1_7_1_min.js"></script>
<script type="text/javascript" src="//lcns2.sugutsukaeru.jp/26303ec1ce859dc/4.7/65fcd604a07352712be0267ca2b0277a/rightclick2tag.js" charset="utf-8"></script>
<script type="text/javascript"><!--
var PanelClass = "rightclickmenupanel";    // 右クリックメニューパネル用のDIVのクラス（スタイル指定用）
var FormId = new Array("body"); // テキストエリアのID属性。複数指定可能。
var myTags = new Array;
/* 【よく使うタグの指定】
・4行で設定ワンセットです。
・上から順に表示されます
・必要な設定を追加、削除、変更して下さい。
・2行目が右クリックメニューへの表示、3行目が実際に挿入されるコードです。
・実際に挿入されるコードについては以下のルールがあります。
 
[挿入コードの記載方法]
- HTMLタグを使用する場合は全体を {{{ と }}}で囲って下さい。
- __TEXT__ の位置に操作時に選択していたテキストが挿入されます。
- シングルクオートは使わないでください。
- 実際の改行は含めず1行で記載して下さい。
- 改行を挿入したい位置には「\\n」と記載して下さい。
- 閉じタグなどで使うスラッシュ（/）は、「\/」と記載して下さい。
*/
myTags.push(
//1件分 ここから
[
    '<u style="color: blue;">リンク（同じウィンドウ）<\/u>', //メニューへの表示（タグ可）
    '{{{<a href="■URL■" target="_top">__TEXT__<\/a>}}}' //実際に挿入されるコード
],
//1件分 ここまで
[
    '<u style="color: blue;">リンク（別ウィンドウ）<\/u>',
    '{{{<a href="■URL■" target="_blank">__TEXT__<\/a>}}}'
],
[
    '<b>太字<\/b>',
    '{{{<b>__TEXT__<\/b>}}}'
],
[
    '<b style="color: red;">太赤字<\/b>',
    '{{{<b style="color: red;">__TEXT__<\/b>}}}'
],
[
    '<h2 style="margin: 0px auto;">大見出し<\/h2>',
    '{__TEXT__}\\n'
],
[
    '<h3 style="margin: 0px auto;">中見出し<\/h3>',
    '[__TEXT__]\\n'
],
[
    '<h4 style="margin: 0px auto;">小見出し<\/h4>',
    '(__TEXT__)\\n'
],
[
    'HTMLタグ（動画/広告）',
    '{{{__TEXT__}}}'
]
);
 
var myAttachedTags = new Array;
var ImgTplt = new Array;
var FileTplt = new Array;
/* 【画像挿入タグの指定】（画像付製品のみ）
・記事内容への画像表示のための指定です。
・「先にアップロード（本文内に挿入）」ボタンでアップロードした後、「記事内容」欄の
  右クリックメニューから挿入できるようになります。
・左寄せにする、右寄せにする、拡大画像あり／なし等を必要に応じて指定して下さい。
・2行目が右クリックメニューへの表示、3行目が実際に挿入されるコードです。
 
[画像用HTMLタグの記載方法]
- HTMLタグを使用する場合は全体を {{{ と }}}で囲って下さい。
- __HREF__ の位置に画像のパスが挿入されます（拡大サイズ）。
- __THUMB__ の位置にサムネイル画像のパスが挿入されます。
- __ALT__ の位置に「画像の説明」欄の入力が表示されます。
- シングルクオートは使わないでください。
- 実際の改行は含めず1行で記載して下さい。
- 改行を挿入したい位置には「\\n」と記載して下さい。
- 閉じタグなどで使うスラッシュ（/）は、「\/」と記載して下さい。
*/
ImgTplt.push(
[
    '<span style="display: inline-block;"><img src="__THUMB__" alt="__ALT__" style="width: 50px;" title="左寄せ"><\/span>',
    '{{{<a href="__HREF__" target="_blank"><img src="__THUMB__" alt="__ALT__" style="float:left;"><\/a>}}}'
],
[
    '<span style="display: inline-block; width: 100%; text-align: center;"><img src="__THUMB__" alt="__ALT__" style="width: 50px;" title="上下で改行して中央"><\/span>',
    '\\n{{{<div style="text-align: center;"><a href="__HREF__" target="_blank"><img src="__THUMB__" alt="__ALT__"><\/a><\/div>\\n}}}'
],
[
    '<span style="display: inline-block; width: 100%; text-align: right;"><img src="__THUMB__" alt="__ALT__" style="width: 50px;" title="右寄せ"><\/span>',
    '{{{<a href="__HREF__" target="_blank"><img src="__THUMB__" alt="__ALT__" style="float:right;"><\/a>}}}'
]
);
/* 【ファイルリンク挿入タグの指定】（画像付製品でファイルをアップロードしている場合と、添付ファイル付製品
・記事内容のテキストの間にアップロードしたファイルを表示したい場合の設定です。
・「先にアップロード（本文内に挿入）」ボタンでアップロードした後、「記事内容」欄の
  右クリックメニューから挿入できるようになります。
・2行目が右クリックメニューへの表示、3行目が実際に挿入されるコードです。
 
[ファイルリンク用HTMLタグの記載方法]
- HTMLタグを使用する場合は全体を {{{ と }}}で囲って下さい。
- __HREF__ の位置にファイルのパスが挿入されます（拡大サイズ）。
- __ICON__ の位置に、ファイル拡張子に応じたアイコン表示のためのクラス名（「gif」「png」など）が表示されます。
- __ALT__ の位置に「リンクテキスト」欄の入力が表示されます。
- シングルクオートは使わないでください。
- 実際の改行は含めず1行で記載して下さい。
- 改行を挿入したい位置には「\\n」と記載して下さい。
- 閉じタグなどで使うスラッシュ（/）は、「\/」と記載して下さい。
*/
FileTplt.push(
    [
        '<u style="color: blue;" class="filelink __ICON__">__ALT__<\/u>',
        '{{{<a href="__HREF__" target="_blank" class="filelink __ICON__">__ALT__<\/a>}}}'
    ]
);
myAttachedTags.push(
    [
        '<span style="display: block; text-align: right; font-size: 0.7em">x<\/span>',
        '__TEXT__'
    ]
);
$('a[id^="current_image_"][class~="current_image"]').each(function(){
    var myHref=$(this).attr("href");
    var myAlt=$(this).attr("title");
    var thumbSrc=$(this).find("img").first().attr("src");
    for (i=0; i < ImgTplt.length; i++){
        myAttachedTags.push(
            [
                ImgTplt[i][0].replace(/__THUMB__/g, thumbSrc).replace(/__ALT__/g, myAlt).replace(/__HREF__/g, myHref),
                ImgTplt[i][1].replace(/__THUMB__/g, thumbSrc).replace(/__ALT__/g, myAlt).replace(/__HREF__/g, myHref)
            ]
        );
    }
});
//画像が登録されていたら、クリアのタグも挿入
if (1<myAttachedTags.length){
    myTags.push(
        [
            '左右寄せのクリア',
            '\\n{{{<div style="clear: both;"></div>}}}\\n'
        ]
    );
}
$('a[id^="current_image_"][class~="current_file"]').each(function(){
    var myHref=encodeURI($(this).attr("href"));
    var myAlt=$(this).attr("title");
    var myClass=$(this).attr("class").replace(/\s*current_file\s*/, "").replace(/\s*filelink\s*/, "");
    for (i=0; i < FileTplt.length; i++){
        myAttachedTags.push(
            [
                FileTplt[i][0].replace(/__ALT__/g, myAlt).replace(/__HREF__/g, myHref).replace(/__ICON__/g, myClass),
                FileTplt[i][1].replace(/__ALT__/g, myAlt).replace(/__HREF__/g, myHref).replace(/__ICON__/g, myClass)
            ]
        );
    }
});
$('a[id^="current_file_"]').each(function(){
    var myHref=encodeURI($(this).attr("href"));
    var myAlt=$(this).attr("title");
    var myClass=$(this).attr("class").replace(/\s*current_file\s*/, "").replace(/\s*filelink\s*/, "");
    for (i=0; i < FileTplt.length; i++){
        myAttachedTags.push(
            [
                FileTplt[i][0].replace(/__ALT__/g, myAlt).replace(/__HREF__/g, myHref).replace(/__ICON__/g, myClass),
                FileTplt[i][1].replace(/__ALT__/g, myAlt).replace(/__HREF__/g, myHref).replace(/__ICON__/g, myClass)
            ]
        );
    }
});
/* 【タッチデバイスの対応】（通常は変更の必要ありません）
iPhone や iPad などのタッチデバイスでは、右クリックメニューを開くための長押しが、
ブラウザの初期設定の機能(選択/コピー/...)と競合するために、右クリックメニューの表示が入力を邪魔する事があります。
以下は、右クリックパネルを無効にするためのエントリです。
「'__ENABLE_USER_SELECT__'」の行は変更しないで下さい。
*/
var myUI = navigator.userAgent.toLowerCase();
if ( myUI.indexOf('iphone') > 0 || myUI.indexOf('ipad') > 0 || myUI.indexOf('ipod') > 0 || myUI.indexOf('android') > 0) {
    myTags.unshift(
        [
            '<span style="display: block; text-align: right;">再読み込みするまで隠す<\/span>',
            '__ENABLE_USER_SELECT__'
        ]
    );
}
//閉じるボタン
myTags.unshift(
    [
        '<span style="display: block; text-align: right; font-size: 0.7em">x<\/span>',
        '__TEXT__'
    ]
);
var i;
var ParentPanel = document.getElementById("panels");
for (i=0; i< FormId.length; i++){
    if (document.getElementById(FormId[i])){
        makeTaglist(ParentPanel,FormId[i],PanelClass,myTags);
        if (1<myAttachedTags.length){
            makeAttachedItemsTaglist(ParentPanel,FormId[i],PanelClass,myAttachedTags);
        }
    }
}
// -->
</script>
</BODY>
</HTML>

アップロード

編集した以下のファイルをサーバに上書きアップロードして下さい。

templates/admin/2.html

確認

管理画面にアクセスし、動作確認時に登録した記事の「編集」ボタンを押して入力画面を表示させて下さい。

「記事内容」エリアで右クリックして、今度は「画像とファイル」が表示され本文内にHTMLタグが挿入ができる事を確認して下さい。

挿入されるタグの調整（A、B、C 共通）

引き続き、お使いの環境に合わせてHTMLタグの調整を行って下さい。HTMLタグの調整とは、例えばスタイル指定やクラス指定をしたり、拡大表示のためのリンクを外す、または、リンクのターゲット属性を変更したりする事です。

画像タグの調整

挿入される画像タグを変更するには、templates/admin/2.html 内の JavaScript の設定を追加、変更、削除して下さい。以下の部分が該当します。

画像タグの設定場所

コピー

[画像用HTMLタグの記載方法]
- HTMLタグを使用する場合は全体を {{{ と }}}で囲って下さい。
- __HREF__ の位置に画像のパスが挿入されます（拡大サイズ）。
- __THUMB__ の位置にサムネイル画像のパスが挿入されます。
- __ALT__ の位置に「画像の説明」欄の入力が表示されます。
- シングルクオートは使わないでください。
- 実際の改行は含めず1行で記載して下さい。
- 改行を挿入したい位置には「\\n」と記載して下さい。
- 閉じタグなどで使うスラッシュ（/）は、「\/」と記載して下さい。
*/
ImgTplt.push(
[
    '<span style="display: inline-block;"><img src="__THUMB__" alt="__ALT__" style="width: 50px;" title="左寄せ"><\/span>',
    '{{{<a href="__HREF__" target="_blank"><img src="__THUMB__" alt="__ALT__" style="float:left;"><\/a>}}}'
],
[
    '<span style="display: inline-block; width: 100%; text-align: center;"><img src="__THUMB__" alt="__ALT__" style="width: 50px;" title="上下で改行して中央"><\/span>',
    '\\n{{{<div style="text-align: center;"><a href="__HREF__" target="_blank"><img src="__THUMB__" alt="__ALT__"><\/a><\/div>\\n}}}'
],
[
    '<span style="display: inline-block; width: 100%; text-align: right;"><img src="__THUMB__" alt="__ALT__" style="width: 50px;" title="右寄せ"><\/span>',
    '{{{<a href="__HREF__" target="_blank"><img src="__THUMB__" alt="__ALT__" style="float:right;"><\/a>}}}'
]
);

青字で示した4行が右クリックメニュー上に表示される選択肢1つを指定する1セットです。このうち、上の行（4行のうちの2行目）は、メニュー上に表示される内容をHTMLタグで指定します。下の行には、実際に挿入されるHTMLタグを {{{ と }}} に挟んで指定して下さい。

初期設定中に「__THUMB__」、「__HREF__」、「__ALT__」という文字がありますが、これらの場所は後でそれぞれ各画像のサムネイルのパス、画像のパス、画像の説明欄の入力に置き換わりますのでこのまま残して下さい。

編集例

例えば以下では、中央寄せの画像の表示サイズを拡大し、拡大画像へのリンクを削除しています。

コピー

[
    '<span style="display: inline-block; width: 100%; text-align: center;"><img src="__THUMB__" alt="__ALT__" style="width: 50px;" title="中央表示（大）"><\/span>',
    '\\n{{{<div style="text-align: center;"><img src="__HREF__" alt="__ALT__" style="width: 500px;"><\/div>\\n}}}'
],

ファイルリンクの調整

ファイルのリンクについても画像の場合と同様ですが、設定場所が違います。ファイルリンクは以下の場所を探して変更して下さい。

ファイルリンクの設定場所

各ファイルの情報に置き換わる記号は「__HREF__」、「__ICON__」、「__ALT__」の3つです。それぞれファイルパス、ファイルの種類（アイコン表示に利用）、リンクテキストに置き換わります。

コピー

[ファイルリンク用HTMLタグの記載方法]
- HTMLタグを使用する場合は全体を {{{ と }}}で囲って下さい。
- __HREF__ の位置にファイルのパスが挿入されます（拡大サイズ）。
- __ICON__ の位置に、ファイル拡張子に応じたアイコン表示のためのクラス名（「gif」「png」など）が表示されます。
- __ALT__ の位置に「リンクテキスト」欄の入力が表示されます。
- シングルクオートは使わないでください。
- 実際の改行は含めず1行で記載して下さい。
- 改行を挿入したい位置には「\\n」と記載して下さい。
- 閉じタグなどで使うスラッシュ（/）は、「\/」と記載して下さい。
*/
FileTplt.push(
    [
        '<u style="color: blue;" class="filelink __ICON__">__ALT__<\/u>',
        '{{{<a href="__HREF__" target="_blank" class="filelink __ICON__">__ALT__<\/a>}}}'
    ]
);

編集例

例えば、「アイコンなし」のリンクも準備しておくのであれば、以下のようになります（青字が追加部分）。

コピー

FileTplt.push(
    [
    '<u style="color: blue;">__ALT__<\/u>',
    '{{{<a href="__HREF__" target="_blank">__ALT__<\/a>}}}'
    ],
    [
        '<u style="color: blue;" class="filelink __ICON__">__ALT__<\/u>',
        '{{{<a href="__HREF__" target="_blank" class="filelink __ICON__">__ALT__<\/a>}}}'
    ]
);

アップロードと確認

編集が終わったらもう一度以下のファイルをアップロードして動作を確認して下さい。
templates/admin/2.html

ホームページ側の固定表示の削除

管理画面から画像・ファイルの挿入ができる事を確認したら、記事ページ側のテンプレートから本文内に挿入する事にした画像やファイルの固定表示を削除して下さい。削除しないと、同じ画像やファイルが固定位置と本文内に重複して表示されます。

書き出されるページとテンプレートファイルの対応、また、どのテンプレート変数がどの画像に対応するかは、お使いの製品の説明書から「テンプレート対応図」をご覧下さい。

説明書は、ダウンロードした製品の docs/index.html からの他、サイト上の「マニュアル一覧」からもご覧頂けます。

HTMLタグやパネルのデザインの調整方法

表示されるパネルのデザインや、画像とファイル以外のメニュー（1段階目のパネル）の調整方法は下記ページをご覧下さい。

HTMLタグを右クリックで簡単に入力する方法

制限事項

ブラウザによってはうまく動作しない場合があります。