サポート » 使い方全般 » 投稿画面の行間を詰めたい

  • ワードプレスの投稿画面で、ビジュアルの場合、基本的に行間が広めになっています。

    そこで、いくつか調べてみると、ビジュアルの投稿画面の場合、<p>というのが効いていて、
    行間が開いてしまうため、Shiftを押した状態だとビジュアルの投稿画面でも
    行間が詰められた状態になるということでした。

    また、htmlの投稿画面の場合は、自然と行間が詰められるということがわかりました。

    私としましては、
    行間を詰めるたびにShiftを押すのが面倒に感じること、
    HTMLの投稿画面ではなく、ビジュアル画面を使いたいこと、
    などを考慮しますと、

    ビジュアル画面で、行間を詰められている状態にしたいと
    考えています。

    なにか、方法はないでしょうか。
    わかる方がいらっしゃいましたら、よろしくお願いします。

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

    ビジュアルエディタで改行すると、行が開くので、行が開かないようにしたい

    特に、pタグがついてなくてもかまわないという事でいいですか?

    表示した時のスタイルなどは考慮しなくていいなら、

    ctrl + F8キーを押してから、入力してみてください。

    トピック投稿者 firth

    (@firth)

    nobitaさん

    投稿画面の行間と実際の表示での行間も同じようになるとありがたいです。

    また、ctrl+F8キーを押しても、特に変化が見られませんでした。

    どのようにするのが、よろしいのでしょうか?

    テーマファイルに依存する問題なんですが、

    テーマファイル内に、editor-style.cssというファイルがあれば、エディタの表示の具合を、テーマで実際に表示される状態に近づけることが出来ます。

    その最後に、以下のようにスタイルルールを追加すれば変更できます。

    .mceContentBody p{
    /*background:#ccc;
    border:1px solid red!important;*/
    margin:0;
    }

    ctrl+F8はワードプレスのショートカットキーで、段落からフォーマットに切り替えるものです。
    ショートカットが動作しない場合は、試験的に、htmlモードで

    <div>test</div>

    と入力した上で、ビジュアルに移動し、testの文字列を入力すると、同様の動作を再現できると思います。

    通常は、ctrl+F8を押す事で、エディタのセレクトボックスが、段落からフォーマットに変更されると思います。

    トピック投稿者 firth

    (@firth)

    nobitaさん

    ご返信が遅くなってしまい、申し訳ありません。

    nobitaさんが教えてくださいましたコードを
    eitor-style.cssに導入してみましたが、
    ダメでした。

    また、その他の方法もダメでした。

    <p>を効かせないがよさそうなのですが、
    他に方法がありますでしょうか。

    firthさん

    editor-style.cssに、スタイルが反映しないのは、キャッシュの影響だと思います。

    editor-style.cssを変更したテーマを、一度、他のテーマに変更し、再度もとのテーマをインストールして、確認しなおしてください。

    実際にやってみたものは、こちらを参照してください

    トピック投稿者 firth

    (@firth)

    nobitaさん

    遅くなって申し訳ありません。

    editor-style.cssを使っていなかったので、
    テーマファイルに導入するようにしましたが、
    cssが効いていないのかもしれないです。

    header.phpに
    <link rel="stylesheet" href="editor-style.css" type="text/css" />
    と書き、

    editor-style.cssに、

    .mceContentBody p{
    /*background:#ccc;
    border:1px solid red!important;*/
    margin:0;
    }

    と記述したのですがダメでした。

    どこを修正するのがよいのでしょうか。

    あてずっぽで、そういう事をしても、無理です。

    header.phpに書いた記述は、管理画面のソースから確認できますか?

    ご利用のテーマは、なにですか? オリジナルであれば、その旨書き込んでください

    トピック投稿者 firth

    (@firth)

    nobitaさん
    テーマはオリジナルを使っています。

    header.phpは、以下のようになっています。
    editor-style.cssは、一応書いてみてあります。

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
    <html>
    <head>
    <meta charset="<?php bloginfo ('charset'); ?>" />
    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />
    <link rel="stylesheet" href="editor-style.css" type="text/css" />  
    
      <?php wp_enqueue_script('jquery'); ?>
    <?php wp_head(); ?>
    
    </head>
    
    <body <?php body_class(); ?>>
    
    <div id="container">
    
    <div id="header">
    
    <div id="nav">
    <?php wp_nav_menu(array(
      'theme_location' => 'navigation'
    )); ?>
    </div>
    
    </div>
    
    </div>

    header.phpは、ブログを表示するために必要ですが、管理画面には読み込まれません。

    以下を、試してください。

    functions.php に 以下のコードを追加

    <?php
    add_action( 'after_setup_theme', 'nobita_theme_setup' );
    
    function nobita_theme_setup(){
            add_editor_style();
    }
    ?>

    editor-style.css を style.cssと同じ階層に作成します。

    内容を、

    .mceContentBody p{
        margin:0;
        text-indent:1em;
    }
    
    .mceContentBody p:after{
    content: ' ¶';
    color:#aaa;
    }

    テーマの編集では、functions.phpは編集しないでくださいね。
    間違うと、管理画面に入れなくなります。

    トピック投稿者 firth

    (@firth)

    nobitaさん

    ご返信遅くなってしまいまして、申し訳ありません。

    投稿画面の行間を詰めることは出来ました。
    ありがとうございました。

    ただ、ひとつ気になることがあるのですが、
    投稿画面に直接書き込んだ場合と、
    ワードなどで作成した文章をコピーして投稿画面に貼り付ける場合で、
    投稿画面の行間の見た目に変化は無いのですが、
    実際のサイト上での表示が大きく違うということがわかりました。

    これは仕方のないことなのでしょうか?

    実際のサイト上での表示が大きく違うということがわかりました。

    これは仕方のないことなのでしょうか?

    editor-style.cssは、管理画面上の表示を調整するもので、実際のブログの表示は、style.cssで行います。

    公式テーマなどの汎用テーマの場合は、テーマの制作者が、ブログのデザインをstyle.cssで行い、その見た目を、管理画面のエディタでも違和感のない見え方にするために、editor-style.cssを使って、調整を行います。

    Twentyelevenや、twelve等の、editor-style.cssをみて頂くと解ると思いますが、

    例えば、画像の挿入などで、右寄せや左寄せなどのスタイルを指定することができますが、ワードプレスで自動付与されるスタイル指定などを管理画面のビジュアルエディタに反映させるために、.alignleft や.alignright等のスタイルが指定されています

    トピック投稿者 firth

    (@firth)

    nobitaさん

    style.cssで行間を調節することが出来ました。

    ですが、
    投稿画面で直接文章を書いた場合と、
    メモ帳などで書いた文章を貼り付けた場合とでは、
    実際の表示が違ってしまいます。

    (投稿画面での行間は、両方とも詰められているのですが、
     実際に表示してみると、直接書いた場合は行間が広く、
     メモ帳などからの貼り付けの場合は、行間が狭くなります。)

    このような問題もstyle.cssで解決出来るものなのでしょうか

    投稿画面で直接文章を書いた場合と、
    メモ帳などで書いた文章を貼り付けた場合とでは、
    実際の表示が違ってしまいます。

    エディタの設定や、機能による影響がでている感じがします。

    windowsのメモ帳の場合は、先頭にバイトオーダーマークという、目には見えないのですが、マーカーがついたり、また、OSにより、改行が \r\n だったり \n だったりします。

    windowsのメモ帳は、WordPress界隈では、使ってはいけないテキストエディタの代表だったりします。
    http://ja.forums.wordpress.org/topic/155?replies=57

    投稿画面に直接記述した状態のドキュメントで、style.cssを調整し、同じ表示が出来なくなるような、テキストエディタや、文書作成ソフトからの貼り付けは、行わないようにするというのが基本だと思います。

    トピック投稿者 firth

    (@firth)

    nobitaさん

    ご返信ありがとうございます。

    そうすると、
    なんらかのテキストエディタで書いた文章を貼り付けた場合と、
    直接投稿画面で書いた文章との実際の表示の違いを見直すというよりも、

    根本的にテキストエディタで書いた文章を貼り付けるのをやめて、
    直接投稿画面に書くことを推奨していったほうがいい、
    ということでしょうか。

    そこの溝を埋めるのは難しいんですね・・・

    ですが、
    投稿画面で直接文章を書いた場合と、
    メモ帳などで書いた文章を貼り付けた場合とでは、
    実際の表示が違ってしまいます。

    (投稿画面での行間は、両方とも詰められているのですが、
     実際に表示してみると、直接書いた場合は行間が広く、
     メモ帳などからの貼り付けの場合は、行間が狭くなります。)

    このような問題もstyle.cssで解決出来るものなのでしょうか

    この問題は、オリジナルテーマであれば、ソースを確認し、環境を確認し、個別の表示上の問題を解決するという手順が必要です。
    とても、スタイルで変更できるよなどといえるものではないのです。

    なので、一般的に発生しがちな事例を書きました。

    直接投稿画面に書くことを推奨していったほうがいい、

    そのような事を言っているわけではありません。単に、firthさんの 問題の解決のために、役立つだろうと思って返信しています。

    そこの溝を埋めるのは難しいんですね・・・

    なにが、問題で、どう解決するかは firth さんの問題です。
    諦めるのも、原因を究明するのも、firth さんの決断です

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「投稿画面の行間を詰めたい」には新たに返信することはできません。