サポート

【済】管理画面の本文入力フォーム

あい (2017/05/30 11:23)

設置URL : http://xxx.jp

記事検索で該当の質問が見つかりませんでしたので、新規で質問させて頂きます。
管理画面でエントリーやページを新規登録・編集する際の、本文入力部の文字がとても小さく、その場で文字の修正をするのがとても難しいため、文字を大きくしようとテンプレートやcssを触ってみましたが、まったく反応しませんでした。

触った箇所は、

admin.html の<textarea>内にstyle="font-size: 120%;"
admin.css の textarea {}内にfont-size: 120%;

です。

本文入力フォームの文字の大きさは変えられないのでしょうか?
修正箇所が間違っていましたら、正しい箇所を教えて頂きたいです。
宜しくお願い致します。

ミツ (2017/05/30 13:10)

URL : http://32877.xii.jp

こんにちは。

[freo/js/common.js]の

//設置パス
var freo_path = '/freo/';

部分にfreo設置URLが入っていることを確認して下さい。
入っていない場合は下記のように変更してください。

//設置パス
var freo_path = 'http://freo設置アドレス/';

または

//設置パス
var freo_path = '../../';

その上で、[freo/css/common.css]に下記のように追加して下さい。

body#tinymce{font-size: 120%}

以上お試しください。

あい (2017/05/30 14:00)

ミツさん

ご回答頂きありがとうございます。
ご教示頂いた手順で編集しましたが、文字サイズが変化しません。
freo内のキャッシュを削除し、Ctrl+F5にてページを更新しました。
使用ブラウザは Firefox53.0.3、OSはWindows7 です。

ミツ (2017/05/30 14:46)

URL : http://32877.xii.jp

環境を教えていただきありがとうございます。
同環境で確認しておりますが私の場合文字サイズは変更されるようです。

管理画面のエントリーやページを新規登録・編集する際の、本文入力部(HTMLエディタ)内の文字サイズを変更したいというご要望でいいんですよね?
ちなみに、HTMLエディタ(tiny_mce)はその他のエディタに変更してはいませんか?

念のため[freo/js/common.js]及び[freo/css/common.css]が更新されているか確認して下さい。
また、[freo/js/admin.js]が下記のようになっているか確認して下さい。

//TinyMCE
tinyMCE.init({
~中略~
content_css: freo_path + 'css/common.css',
~中略~
});

あい (2017/05/31 09:37)

ご回答頂きありがとうございます。

ロリポップ!サーバーを使用しているので、サーバー内のFTPツールより確認しましたが、[js/common.js][css/common.css]どちらも更新されています。
freoをサーバー直下に設置しているのですが、それでどこか指定が違うのでしょうか…。([js/common.js]内の設置パスは絶対パスで指定しています)
他にもいくつかjavascriptファイルを使用しているので、それがぶつかっているという可能性もありますか?(使用しているのは通常ページのみで、管理画面には一切反映されていないはずなのですが…)
ちなみにヘッダーは下記のようになっています。(投稿エラーになるのでhttp部分を大文字にしています)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>管理者用 | サイト名</title>
	<link rel="stylesheet" href="http://xxx.jp/css/common.css" type="text/css" media="all" />
	<link rel="stylesheet" href="http://xxx.jp/css/admin.css" type="text/css" media="all" />
	<link rel="stylesheet" href=http://xxx.jp/css/colorbox.css" type="text/css" media="all" />
	<script type="text/javascript" src="http://xxx.jp/js/jquery.js"></script>
	<script type="text/javascript" src="http://xxx.jp/js/jquery.colorbox.js"></script>
	<script type="text/javascript" src="http://xxx.jp/js/jquery.tablesorter.js"></script>
	<script type="text/javascript" src="http://xxx.jp/js/common.js"></script>
	<script type="text/javascript" src="http://xxx.jp/tiny_mce/tiny_mce.js"></script>
	<script type="text/javascript" src="http://xxx.jp/js/admin.js"></script>
</head>

同じ環境下で反映されないということは、私の記載ミスかなにかだと思うのですが…。
HTMLエディタを他のエディタに変更はしていません。が、スタイル要素をいくつか追加はしています。

それから、ページを何度か読み込みし直して気付いたのですが、ページを読み込んだ瞬間、本文入力部内の文字が一瞬だけ大きくなります。すぐに小さくなってしまいますが…。設定自体はうまくいっているものの、なにかが邪魔をするのかな?と思いましたが、なにが原因なのかまではわかりません…。

ccc (2017/05/31 21:40)

URL : http://cccabinet.jpn.org/

これと同じ現象ですよね?
http://cccabinet.jpn.org/customize.cgi?no=31

同記事に記載してあるとおり、tiny_mce/tiny_mce.js から css/common.css が読み込めないと表示の文字が小さくなるようです。

[js/common.js]内の設置パスは絶対パスで指定しています

[js/common.js]内の設置パスが、content_css:の[freo_path]の設定なので、[js/common.js]内の設置パスを絶対パスにしているのなら、[freo/js/admin.js]のcontent_css:も絶対パスで指定してみてください。

そもそもfreoをサーバー直下に設置しているのなら、[js/common.js]内の設置パスは

var freo_path = '/';

でいいと思うのですが...。

ミツ (2017/05/31 22:14)

URL : http://32877.xii.jp

あいさん>
出先からなので読みにくかったらすみません
[js/common.js]を絶対パスで指定されるとき、

var freo_path = 'http://xxx.jp';

var freo_path = 'http://xxx.jp/index.php/';

などにはしていませんか?

var freo_path = 'http://xxx.jp/';

のように、最後のスラッシュを忘れないようにしてください。

また、firefoxならF11の開発者ツールでコンソールタブを確認し、freo_pathがエラーになっていないかを確認することでもできると思います。
cccさんのおっしゃるように、[freo/is/admin.js]を

content_css: 'http://xxx.jp/css/common.css',

のように書き換えても良いでしょう。

TinyMceのエディタ内ではadmin.jsのTinyMce設定部分でで指定したcssが読み込まれるはずです。
admin.jsのcontent_css設定部分でcommon.jsで指定したfreo_pathを利用しているので、jsファイルの読み込み順が関係あると思われますが、ヘッダーを見せていただいた限り問題ないようです。
content_cssがうまく設定されていないのだろうと思われるのですが、一瞬大きくなってすぐに小さくなってしまうという症状が気になります。
content_cssはちゃんと設定されていて、body#tinymce用のタグもcommon.cssに記載されているなら、私ではこれ以上わかりません。
勉強不足で申し訳ないです。

あい (2017/06/02 13:44)

cccさん、ミツさん

御回答頂きありがとうございました。
[css/common.css]の読み込みの関係ということで、そういえば最近css/common.cssの中身を触ったことを思い出し、freoをDLし直して初期の[css/common.css]に上書きし直したところ、文字の大きさが正常に戻りました!
どのタグでそうなるのかわかりませんが、[css/common.css]は触らない方がいいようですね…。
最後は自己完結になってしまい、申し訳ありません。お付き合い頂きありがとうございました!

返信

  • この記事に返信します。
  • 返信の際は、設置URL以外の項目は入力必須です。
投稿フォーム
名前
設置URL
本文(本文の装飾について
編集キー(投稿した記事を編集する際に使用します。)
投稿キー(スパム対策に、投稿キー を半角で入力してください。)