テンプレート編集ページのjsファイルは以下の通りです。codemirror,parsecss,parsexml以外は二度読み込まれています。既にハイライト機能のある記事編集ページも同様です。

http://blog-imgs-1.fc2.com/js/admin/codemirror/js/codemirror.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/editor.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/editor.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/parsecss.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/parsexml.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/select.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/select.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/stringstream.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/stringstream.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/tokenize.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/tokenize.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/undo.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/undo.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/util.js
http://blog-imgs-1.fc2.com/js/admin/codemirror/js/util.js

　ソースを見るとiframeでテンプレート編集ページをもう一つ挿入していることがわかります。元からあった編集エリアは不可視にしています。

<textarea style="width: 565px; height: 400px; margin-top: 0pt; display: none; visibility: hidden;" wrap="VIRTUAL" name="html" id="html_textarea">

<iframe frameborder="0" src="javascript:false;" style="border: 1px solid rgb(165, 172, 178); width: 570px; height: 400px; display: block; visibility: visible;" id="html_textarea_cm"/>

　つまり、このページには編集エリアが4つあります。ユーザースタイルシートで可視化すると以下のようになります。プレビューで反映されるのはiframeで挿入された編集エリアのみです。

　codemirror.jsのみ許可して他のスクリプトをブロックすれば、一応以前と同じ軽さで編集・プレビューできます。このスクリプトは記事編集ページでも使われているので使い分けが必要です。

テンプレ編集ページのユーザースタイルシートを使用している方へ

[!] 最新のスタイルはテンプレ編集ページなどの管理ページカスタマイズよりコピーしてください

---

※ここに掲載されているコードは過去のものです

　高さの伸縮とハイライトの編集エリアが正常に表示されるように以下の変更をしてください。(1)から(5)まであります。またはFC2テンプレ編集ページなどのカスタマイズより必要なものをコピーし直してください。

Stylishの編集方法：スタイルの管理→概要を選択→編集またはダブルクリック

　IE6については、高さの伸縮が可能になったため、テンプレ編集エリアのスタイルを使う必要はなくなったと思います。(2)の部分を削除してください。

(1)HTML/CSS編集エリアを書き換える

変更箇所

/* - HTML編集エリア - */
div#setting_area textarea[name="html"]{
 width: 750px !important; /* 入力エリアの横幅 */
 height: 280px !important; /* 高さ */
 font-size: 13px !important; /* 文字サイズ */
 font-family : monospace !important; /* フォント */
 background: #fffefb; /* 背景色 */
 color: #000000; /* 文字色 */
 border: 1px #666666 solid;
}
/* - CSS編集エリア - */
div#setting_area textarea[name="css"]{
 width: 750px !important; /* 入力エリアの横幅 */
 height: 320px !important; /* 高さ */
 font-size: 13px !important; /* 文字サイズ */
 font-family : monospace !important; /* フォント */
 background: #f9f9ff; /* 背景色 */
 color: #000000; /* 文字色 */
 border: 1px #666666 solid;
}

変更後

/* - HTML編集エリア - */
div#setting_area textarea[name="html"],#html_textarea_cm,#html_textarea_box{
 width: 750px !important; /* 入力エリアの横幅 */
}
div#setting_area textarea[name="html"],#html_textarea_cm{
 /* 高さ */
 position: relative;
 font-size: 13px !important; /* 文字サイズ */
 font-family : monospace !important; /* フォント */
 background: #fffefb; /* 背景色 */
 color: #000000; /* 文字色 */
 border: 1px #666666 solid;
}
/* - CSS編集エリア - */
div#setting_area textarea[name="css"],#css_textarea_cm,#css_textarea_box{
 width: 750px !important; /* 入力エリアの横幅 */
}
div#setting_area textarea[name="css"],#css_textarea_cm{
 /* 高さ */
 position: relative;
 font-size: 13px !important; /* 文字サイズ */
 font-family : monospace !important; /* フォント */
 background: #f9f9ff; /* 背景色 */
 color: #000000; /* 文字色 */
 border: 1px #666666 solid;
}

自分で高さを指定する場合（高さ固定）は、/* 高さ */ の行に height を追加します。

/* - HTML編集エリア - */
div#setting_area textarea[name="html"],#html_textarea_cm,#html_textarea_box{
 width: 750px !important; /* 入力エリアの横幅 */
}
div#setting_area textarea[name="html"],#html_textarea_cm{
 height: 280px !important; /* 高さ */
 position: relative;
 font-size: 13px !important; /* 文字サイズ */
 font-family : monospace !important; /* フォント */
 background: #fffefb; /* 背景色 */
 color: #000000; /* 文字色 */
 border: 1px #666666 solid;
}
/* - CSS編集エリア - */
div#setting_area textarea[name="css"],#css_textarea_cm,#css_textarea_box{
 width: 750px !important; /* 入力エリアの横幅 */
}
div#setting_area textarea[name="css"],#css_textarea_cm{
 height: 320px !important; /* 高さ */
 position: relative;
 font-size: 13px !important; /* 文字サイズ */
 font-family : monospace !important; /* フォント */
 background: #f9f9ff; /* 背景色 */
 color: #000000; /* 文字色 */
 border: 1px #666666 solid;
}

(2)以下の部分を削除

/* - IE6等 HTML/CSSエリア - */
div#setting_area .template_editarea {
 width: 95% !important; /* 入力エリアの横幅 */
 height: 280px !important; /* 高さ */
 font-size: 13px !important; /* 文字サイズ */
 font-family : monospace !important; /* フォント */
 background: #fffffb; /* 背景色 */
 color: #000000; /* 文字色 */
 border: 1px #666666 solid;
}

(3) #container > #ajaxcontent の「>」を削除

body > #wrap > #container,
#container #ajaxcontent > #right{
 overflow: visible !important;
}

(4)以下の部分に width を追加

div#setting_area a[name="editform"]{
 position: relative;
 left: 90%;
 display: block;
 width: 10%;
}

(5)以下の部分を赤字に変更

変更箇所

div#setting_area h3#html + ul + textarea + .template_operate{
 display: none;
}

変更後

div#html_textarea_box + .template_operate{
 display: none;
}

• 【関連項目】
• Paroday - FC2ブログインフォメーション
• 2009 03-03 - [CSS]テンプレ編集ページなどの管理ページカスタマイズ
• FC2総合インフォメーション - 要素のハイライトと縦幅の伸縮ができるようになりました

関連記事

• FC2ブログにiPhone向けの広告が追加されました
• 管理画面レイアウトの崩れ
• FC2禁止ルール、禁止ワードの適用範囲変更
• ブログ最下部にimg要素が挿入されて、スペースができる
• テンプレート編集画面の機能改良について
• [CSS]テンプレ編集ページなどの管理ページカスタマイズ
• FC2禁止ルールを使ったスパムコメント対策