小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

HTMLタグを右クリックメニューから入力する方法

最終更新日: 2016-08-10
右クリックでHTMLタグを挿入

CMS「すぐ使えるCGI」では入力にHTMLタグが使えます。このHTMLタグを右クリックメニュー(コンテクストメニュー)から簡単に入力する方法をご紹介します。

マウス操作で、選択中のテキストを挟んでリンクタグ(<a>)で囲んだり、太字にする(<b> タグで囲う)事が可能です。HTMLタグ以外にも、定型入力や固定の文言(連絡先情報など)を右クリックで簡単に挿入できます。

右クリックメニューで HTML タグ入力可能な製品

右クリックメニューによるタグ入力機能は全ての「すぐ使えるCGI」製品で使えます。Ver. 4.8 以上の製品では予め製品に組み込まれています。

右クリックメニューが導入されているかの確認方法

お使いになる製品に既にこの機能が組み込まれているかを確認するには、ダウンロード前のオンラインデモか、設置した管理画面上で実際に右クリックしてみてご確認下さい。

右クリックメニュー導入方法

このページでは、以下の方法をご案内します。

ダウンロードと設置

使用する「すぐ使えるCGI」製品をダウンロードしてサーバに設置して下さい。

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

テスト登録

テストデータとして記事を1件登録して、管理画面が正常に動作する事を確認して下さい。

テスト時には、右クリックメニューの導入作業が本当に必要かを確かめるために、「記事内容」の入力の際に、入力欄の位置にマウスカーソルを合わせて右クリックしてみて下さい。何も表示されなければ未導入ですので、引き続き以下の変更を行って下さい。

管理画面テンプレートの編集

動作確認が終わったら、管理画面用のテンプレート templates/admin/2.html を編集します。このファイルをテキストエディタで開いて下さい。

【備考】バージョンによる編集対象ファイルの違い

下記のHTMLコードは Ver. 4.7 以下の製品のテンプレートをベースにしています。Ver. 4.8 以上の製品は元のHTMLコードが例とは異なっていたり、CSS が外部ファイルに分かれている場合があります。適宜調整して下さい。

templates/admin/2.html 変更例

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

  1. 右クリックメニュー用のスタイルシート指定
  2. JavaScript ファイルの読み込みを指定
  3. 入力テキストエリアにID属性を追加(忘れがちなのでご注意下さい。「id="body"」を追加。)
  4. ページ末尾にメニューの内容を指定

なお、細かい調整方法は後述します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<TITLE>ページ %_mode_title_%入力</TITLE>
<STYLE type="text/css">
<!--
p, ol, ul, li {
    line-height: 150%;
}
 :
(省略)
 :
.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: 320px; 
    background-color: #efefef;
    position: absolute;
    left: 0px; top: 0px;
    border: 1px solid black;
    display: none;
    overflow: auto;
}
/* 右クリックメニューパネル設定 ここまで */
-->
</STYLE>
<script type="text/javascript"><!--
function show_format(){
    var FmtPart = document.getElementById('inputformat');
    var HideLink = document.getElementById('link2hide');
 :
(省略)
 :
function set_imemode(myobj, mymode){
    switch(mymode){
        case 0: myobj.style.imeMode = "inactive"; break;
        case 1: myobj.style.imeMode = "active"; break;
        default: break;
    }
}
// --></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"></script>
<!-- 右クリックメニューのために読み込み ここまで -->
</HEAD>

<BODY BGCOLOR="#FFFFFF" onLoad="hide_format();">
<H1>Webサイト管理ツール</H1>
<H2>%_mode_title_%</H2>
 :
(省略)
 :
<TR>
<TH CLASS="titem">記事内容※</TH>
<TD CLASS="contents">
<TEXTAREA name="body" cols="60" rows="10" class="imeauto" id="body">%_body_%</TEXTAREA>
<!-- input format begin -->
<div class="link2show" id="link2show"><A href="javascript:show_format()">よく使うタグ</A></div>
<div class="link2hide" id="link2hide">下表からコピーして使って下さい。
<A href="javascript:hide_format()">隠す</A></div>
 :
(省略)
 :
<TABLE border="0" cellspacing="0" cellpadding="6">
<TR>
<TD><INPUT type="submit" value="確認画面へ" onClick="return set_order('filelist');"></TD>
<TD><INPUT type="button" onClick="window.location='%_myname_%?n=%_n_%&amp;i=%_i_%'" 
value="中止(一覧に戻る)"></TD>
</TR>
</TABLE>

</FORM>

<script type="text/javascript"><!--
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>
<div id="panels">
</div>
<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(
[
    '<span style="display: block; text-align: right; font-size: 0.7em">x</span>',
    '__TEXT__'
],
//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>',
    '\\n{__TEXT__}\\n'
],
[
    '<h3 style="margin: 0px auto;">中見出し</h3>',
    '\\n[__TEXT__]\\n'
],
[
    '<h4 style="margin: 0px auto;">小見出し</h4>',
    '\\n(__TEXT__)\\n'
],
[
    'HTMLタグ(動画/広告)',
    '{{{__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);
    }
}
// -->
</script>
</BODY>
</HTML>

アップロード

とりあえずこの段階で、編集した以下のファイルをサーバに上書きアップロードして下さい。

templates/admin/2.html

確認

管理画面にアクセスすると、右クリックメニューが使えるようになっている筈です。入力を試してHTMLタグの挿入ができる事を確認して下さい。

右クリックで入力できるHTMLタグの種類を追加・変更

引き続き、お使いの環境に合わせて以下の調整を行って下さい。以下の点が変更できます。

  • 右クリックで表示されるパネルのデザイン
  • 右クリックメニューの内容

右クリックで表示されるパネルのデザイン変更

右クリックメニューのパネルの大きさや色を変更するには、templates/admin/2.html に先ほど追加したスタイルシート(CSS)設定を変更して下さい。例えばメニューの数を増やしたり表示を変更した時は、パネルの幅や高さを調整すると使いやすくなります(下記青字部分)。

変更対象箇所は以下の部分です。詳しくは一般のスタイルシート参考書などを参照して下さい。

【注意】バージョンによる編集対象ファイルの違い

  • Bootstrap を使ったレスポンシブWebデザインの製品では、この設定は webdir/parts/css/admin.css にあります。
  • 上記以外の Ver. 5.0 以上の製品ではこの設定は webdir/parts/css/sugu-admin.css にあります。

右クリックパネルのデザインスタイル設定箇所

/* 右クリックメニューパネル設定 ここから */
.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: 320px; /* パネルのサイズ */
    background-color: #efefef; /* パネル全体の背景色 */
    position: absolute;
    left: 0px; top: 0px;
    border: 1px solid black;
    display: none;
    overflow: auto;
}
/* 右クリックメニューパネル設定 ここまで */

右クリックメニューの内容の変更

右クリックメニューに表示する内容と挿入タグを変更するには、templates/admin/2.html のページ末尾にある JavaScript 内の設定に追加、変更、または削除して下さい。下記を参考に、既にある例をコピーして設定して下さい。下記は「青字」メニューを追加した所です。

※この設定は、バージョンに依らず templates/admin/2.html 内にあります。

//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>}}}'
],
[
    '<span style="color: blue;">青字</span>',
    '{{{<span style="color: blue;">__TEXT__</span>}}}'
],
[
    '<b>太字</b>',
    '{{{<b>__TEXT__</b>}}}'
],

メニューパネルへの表示は任意

設定のうち、上の行(4行のうちの2行目)は、メニュー上に表示される内容をHTMLタグで指定します。実際に挿入されるHTMLタグと全く異なる内容でも構いません。

例えば以下の例では、リンクタグ(<a>)タグの挿入を指定していますが、表示上は本物のリンクタグ(<a>)ではなく下線タグ(<u>)に色を付けて指定しています。

[
	'<u style="color: blue;">リンク(別ウィンドウ)</u>',
	'{{{<a href="■URL■" target="_blank">__TEXT__</a>}}}'
],

選択(反転)されたテキストの挿入

挿入されるHTMLタグの設定に「__TEXT__」(アンダーバー2つずつに挟んで半角アルファベットで「TEXT」)という文字列が含まれていたら、その部分には右クリックしたときに選択(反転)されていたテキストが挿入されます。

HTMLタグ以外でも設定可能

挿入する「HTMLタグ」は、下記例のように固定のテキストも指定できます。

[
    '総務部電話',
    '03-1234-5678'
],


アップロードと確認

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

右クリックで入力できる欄の変更・追加

上記で行った初期設定では、「記事内容」欄に右クリックメニューを導入しました。この欄は追加、変更できます。下記の様に設定して下さい。

指定の仕組み

templates/admin/2.html の JavaScript に下記の様な部分あります。青字の「"body"」は「記事内容」欄に付けた id属性と一致しています。右クリックメニューを表示する欄は id属性をここに設定します。

初期設定の JavaScript

<script type="text/javascript"><!--
var PanelClass = "rightclickmenupanel";    // スタイルシートに指定したDIVタグのクラス属性
var FormId = new Array("body"); // テキストエリアのID属性
var myTags = new Array;
/* よく使うタグの指定
 :

導入対象欄に id属性を追加

templates/admin/2.html を開き、右クリックメニュー機能を導入する入力欄(<input type="text"> または <textarea>)に id属性を追加して下さい。

JavaScript の設定変更

例えば上で入力項目に「id="blocktext1"」と指定したのであれば、この欄に右クリックメニュー機能を追加するには以下の様に指定します(赤字部分)。「"body"」と「"blocktext1"」の間は半角のカンマで区切って下さい。3つ以上も同様に追加できます。不要な欄の指定は削除して下さい。

<script type="text/javascript"><!--
var PanelClass = "rightclickmenupanel";    // スタイルシートに指定したDIVタグのクラス属性
var FormId = new Array("body","blocktext1"); // テキストエリアのID属性
var myTags = new Array;
/* よく使うタグの指定
 :

アップロードと確認

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

制限事項

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

スマホ(スマートフォン)、iPadでの既知の問題

スマホ(スマートフォン)、iPad では長押し(ロングタップ)で利用できますが、選択した文字をタグで挟む操作はできません。(元々持っているテキスト選択の機能と競合してうまく機能しません。)

また、新規登録画面で全く入力がされていない状態で「記事内容」欄で長押しをするとフォームが送信されてしまう場合があります。このタグ入力の機能を使う場合は何か入力してから初めて下さい。

関連リンク

さらに詳しく