We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
  • Tipsコーナーに相当するボードがないので、こちらでトピ立てます。

    MODxで標準で同梱されているTinyMCEですが、そのまんまだといろいろ使いにくい気がします。
    ツールバーの並びやタブブラウザとの相性、立ち上がりの重さ、編集ウィンドウのデザインなど。
    使いやすくするための方法がいろいろあるので、ここで紹介します。

    まず、ツールバーカスタマイズの話題から。



    標準では上記のような並びになっていますが、個々に見ていくと、いくつか気付く点があります。

    • フォントの色の変更はどうするの?
    • せっかくWYSIWYGなのにtable編集ができない
    • 全選択とか印刷とか、ほとんど使わなさそうなアイコンがある
    • 「検索」と「検索・置換」のアイコンは実際には同じ機能なので、ダブっている
    • よく使う順番とかを考慮してないようで、使いにくい
    • アイコンの数が多くて、投稿画面を開くのにワンテンポ遅れる

    実際の構成設定は以下のようになっています。
    読み込むプラグイン:style,advimage,advlink,searchreplace,print,contextmenu,paste,fullscreen,nonbreaking,xhtmlxtras,visualchars,media
    
    ツールバー1:undo,redo,selectall,separator,pastetext,pasteword,separator,search,replace,separator,nonbreaking,hr,charmap,separator,image,link,unlink,anchor,media,separator,cleanup,removeformat,separator,fullscreen,print,code,help
    
    ツールバー2:bold,italic,underline,strikethrough,sub,sup,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect,separator,styleprops

    というわけで、下記のようにカスタマイズしてみました。


    アイコンの数を減らすことで、読み込むプラグインの
    数も減らすことができるので、若干ながら負荷軽減にもつながります。



    もっとシンプルでもよければ、こんな感じで。MODx設定の選択肢にも「simple」ってのがありますけど、
    確かにアイコンの数は少ないけど構成が今ひとつだったりします。

    実際の設定例は以下のとおり。
    プラグイン:table,style,advimage,advlink,searchreplace,contextmenu,paste,fullscreen,media
    ツールバー1:undo,redo,|,bold,forecolor,backcolor,formatselect,fontsizeselect,|,styleprops,removeformat,code,|,help
    ツールバー2:image,media,link,unlink,anchor,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,outdent,indent,|,table,|,hr,|,search,|,pastetext,pasteword,|,fullscreen


    プラグイン:advimage,advlink,contextmenu,paste,fullscreen
    ツールバー1:bold,forecolor,backcolor,|,formatselect,fontsizeselect,|,image,link,unlink,|,bullist,numlist,|,code,fullscreen


    MODxはユーザごとにツールバーをカスタマイズできるので、担当部署の特性に応じて設定するといいと思います。
    • 次は、編集領域のカスタマイズの話。

      デフォルトではこのような状態です。


      フォントが小さいうえ行間が狭いので読みづらいです。編集領域のマージンがピチピチに詰まっているのも窮屈です。



      このようにカスタマイズできます。

      ツール→MODx設定→インターフェースとその他の機能→CSSファイルへのパス でロケーションを指定して、編集領域用の
      CSSを置くと、このように編集領域の見た目をカスタマイズできます。
      ちなみに上記のサンプルイメージのCSSは以下のようにしています。textareaじゃなくてbodyに設定します。
      body {
      	font-size:12px;
      	font-style: normal;
      	line-height: 150%;
      	color: #000000;
      	background-color: #FFFFFF;
      	font-family: Verdana, Arial, sans-serif;
      	text-align: left;
      	padding: 0px;
      	margin: 10px;
      	background-repeat: repeat-x;
      	background-image:url(tinymcebg.gif);
      	}
      
      a {
      	text-decoration: none;
      	}
      
      a:link {
      	text-decoration:none;
      	color: #0000FF;
      	}
      
      a:visited {
      	text-decoration:none;
      	color: #0000FF;
      	}
      
      a:active {
      	color: #0000FF;
      	}
      
      a:hover {
      	color: #FF0000;
      	}


      • コンテンツはボリューム感とリズム感が重要。CSSを調整すると、長文を書くのも楽しくなります。
        見出しタグやリストタグ、引用タグなどを積極的に使えるようになると思います。
        下記のサンプルイメージでは、少しNucleusっぽい配色にしてみました。



        ※上記サンプル内の文章はMODxをよく理解していない昔に書いたものなので気にしないでください。
         MODx自体も未熟だったし。。。MODxは機能型コンテンツに向いてないってことはないですよ embarrassed


        • 背景画像を工夫すればこういうこともできますね
          • http://modx.jp/blog/529.html

            上記ページに参考記事を書きました


            [ed. note: yama last edited this post 10 years, 5 months ago.]