サポート » 使い方全般 » Twenty Elevenの横幅変更

  • 解決済 kntn13

    (@kntn13)


    「WordPress 3.3.1」で「Twenty Eleven 1.3」を自分でカスタムして使用しています。(http://hisashige.net/)
    今回、サイトの横幅を変更したいと思い(1000pxから880pxに)いろいろ試行錯誤し、なんとか目的達成しました。
    ただサイト表示上の目的は達成したのですが、今度は管理画面で「投稿」や「固定ページ」を編集する時の入力窓の幅が広すぎて、編集画面と実際に表示される画面との差ができてしまい困っています。
    当然1000px幅で使用するのに一番適した状態で作られているのだと思いますが、この編集画面の文字入力ウィンドウの幅をなんとか狭く(できれば880pxに)する方法はありますでしょうか?
    よろしくお願いいたします。

    ちなみにサイトの横幅を変更するにあたっては
    1・「style.css」の「/* =Structure」内の「#page {」の「max-width:」を「880px」に変更。
    2・「style.css」の「/* =Header」内の「#branding img {」の「width:」を「880px」に変更。
    3・「functions.php」に「define(‘HEADER_IMAGE_WIDTH’,880);」と追記。
    以上の3点で対応しています。

    よろしくお願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • こんにちは、

    functions.phpの 350行ぐらいの

    $content_width の値を変更すると、フルスクリーンモードの幅が変わります。

    editor-style.cssの

    html .mceContentBody {
    	max-width: 584px;
    }
    * {
    	color: inherit;
    	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-style: inherit;
    	font-weight: inherit;
    	line-height: 1.625;
    	max-width:/*ここに好きな幅をpxで書けばいいです*/
    }

    max-widthを書いておけば、それ以上の幅で表示されなくなります。(ビジュアルエディタの場合)

    トピック投稿者 kntn13

    (@kntn13)

    早速のご回答ありがとうございました。
    基本的にフルスクリーンモードは使用せず、ビジュアルエディタを使用していますので、「editor-style.css」の変更を試してみましたが、変化ありませんでした。
    子テーマを使用していますので、「Twenty Eleven」から「editor-style.css」をコピーしてきて、

    html .mceContentBody {
    	max-width: 584px;
    }
    * {
    	color: inherit;
    	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-style: inherit;
    	font-weight: inherit;
    	line-height: 1.625;
    max-width: 690px;
    }

    としてみたのですが・・・
    ちなみに「690」を「100」にしても結果は同じです。
    よろしくお願いいたします。

    ちなみに「690」を「100」にしても結果は同じです。
    よろしくお願いいたします。

    editor-style.cssを使った場合は、エディタの幅ではないです
    なんか、日本語の文字をエディタに入力してみてください。

    チャイルドテーマだと、 add_editor_style(); を子テーマ側のeditor_style.cssを読むようにしないといけないかもしれません。

    基本的にフルスクリーンモードは使用せず、ビジュアルエディタを使用していますので、「editor-style.css」の変更を試してみましたが、変化ありませんでした。

    チャイルドテーマに置いて、動作すると何かに書いてあったのですか?

    動作確認しました。

    editor-style.cssは、コピーして、チャイルドテーマに置くだけで動作するようでした。

    失礼しました。

    チャイルドテーマでの動作も、一応確認して、こちらの環境では動作するようでした。

    トピック投稿者 kntn13

    (@kntn13)

    たびたび申し訳ありません。

    functions.phpの 350行ぐらいの
    $content_width の値を変更すると、フルスクリーンモードの幅が変わります。

    親テーマの「functions.php」をいじったら、その通りになりました。
    ただ普段、フルスクリーンモードは使用していないので、できればビジュアルエディタの幅(もしくは入力できる文字数)を狭くしたいと思っています。
    最低でも親テーマの「functions.php」は変更せず子テーマの「functions.php」に追記する形を取りたいと思います。その場合はどうすればいいでしょうか?

    チャイルドテーマだと、 add_editor_style(); を子テーマ側のeditor_style.cssを読むようにしないといけないかもしれません。

    と、ご指摘をいただきましたので、今度は「子テーマ」ではなく「親テーマ」の「editor-style.css」に直接「max-width」を狭く指定してみたのですが、こちらもビジュアルエディタの幅はもちろん、一行あたりの入力文字数にも変化はありませんでした。

    ビジュアルエディタの幅(もしくは入力できる文字数)が変更できないなら、やはりフルスクリーンモードに慣れるしかないでしょうか?
    再度ご指導いただけたらと思います。
    よろしくお願いいたします。

    最低でも親テーマの「functions.php」は変更せず子テーマの「functions.php」に追記する形を取りたいと思います。その場合はどうすればいいでしょうか?

    チャイルドテーマに、functions.phpをつくり、$content_width を 指定してください。

    editor-style.cssは、コピーして、チャイルドテーマに置くだけで動作するようでした。

    訂正したとおりですので、チャイルドテーマに、editor_style.cssを置いて、その中にスタイルを記述してください。

    editor_style.cssの記述は、通常のCSSと同じと考えていただければいいです。

    http://www.tenman.info/hatena/capture-editor-width.png

    上記の画像のようになります。

    /*
    Theme Name: Twenty Eleven
    Description: Used to style the TinyMCE editor.
    */
    
    html .mceContentBody {
    	max-width: 584px;
    }
    * {
    	color: inherit;
    	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-style: inherit;
    	font-weight: inherit;
    	line-height: 1.625;
    max-width:300px;
    }

    kntn13さんが示された、スタイルルール

    html .mceContentBody {
    	max-width: 584px;
    }
    * {
    	color: inherit;
    	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-style: inherit;
    	font-weight: inherit;
    	line-height: 1.625;
    max-width: 690px;

    html .mceContentBody { max-width: 584px;}に対して、全称セレクタで、max-width: 690px;を指定するのは、おかしいとは思いませんか?

    トピック投稿者 kntn13

    (@kntn13)

    nobita様
    返信が遅くなり失礼しました。また何度もご親切にありがとうございます。
    なんとか「editor-style.css」の変更で、nobita様の添付画像のようにしたいと思っています。ただ、上記のアドバイス通り「max-width:300px;」で指定しましたが、何の変化もおきません。
    もう少しいじってみます。何かヒントがあれば、よろしくお願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「Twenty Elevenの横幅変更」には新たに返信することはできません。