サポート » テーマ » タイトルがブラウザーによって改行されてしまう

  • 解決済 sally000

    (@sally000)


    諸先輩方、はじめまして
    WordPressでブログ制作に挑戦しております初心者のものです

    先日、「WordPressで作る今日から始めるウェブサイト」という書籍を書店で購入し
    「Sugar」というオリジナルテンプレートで制作を始めました

    そこで、いきなり詰まってしまったのは「タイトル表示」のことです
    タイトルは、10文字のテキストのみで制作しました
    普通に一般>サイト名で指定しております
    ところが、ブラウザーチェックをしてみますと・・・
    愛用中のFireFoxでは、きれいに一行で表示されるのに
    IEやChromeでは、最後の一文字だけが勝手に改行されて表示され・・・
    なんとも残念な映りになっているのです

    そこで、試しにタイトルの文字数を9文字で打ってみて更新したら、
    IEやChromeでも一行で反映されていました
    ちょっとだけわかるcssを覗いてみても、widthには十分な幅が設定されております
    15文字くらいいけそうな感じですが・・・
    なにが障害となって改行されてしまうのか、見当もつきません(泣)

    伝え方にも問題を感じておりますが、ひとまず概要のみ投稿させていただきます
    なにか伝え方に不備がありましたら教えてください

    ご教授いただけましたら大変ありがたいです
    よろしくお願いいたします

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • /Sugar/pc/pc.cssの92行目に.gHeader .gHeaderInner h1.sitelogo {があります。
    そこへwhite-space: nowrap;を書いておけば良いでしょう。

    stranger-jpさま

    ご対応に感謝いたします

    テーマのHTMLここにあったんですね
    サーバー内に侵入して、Sugarのテーマフォルダに辿りつくまでがまたひと苦労でした(泣)

    なるほど・・・
    ここのCSSのクラス指定でタイトルのデザインが作られていたんですね

    .gHeader .gHeaderInner h1.sitelogo {
    font-size: 36px;
    font-family:”Georgia”, “Hiragino Mincho ProN”, serif;
    font-weight: normal;
    padding: 0 0 15px 0;
    float: left;
    width: 350px;
        white-space: nowrap;
    }
    編集後上書き保存、もう一度ファイルを開きなおし書き足した内容で保存されているかチェックしました→OK!

    少し時間がたって何度かブラウザーをリロードしてみましたが、改善が見られませんでした
    IE、Chromeでの表示状況は変わりません
    FireFoxでは相変わらず意図した形で表示されています

    なにか不備がありましたでしょうか
    引き続きアドバイスいただけましたらありがたいです

    ブラウザのキャッシュじゃないですか?

    タイトルリンクをクリックして
    トップ内容を更新することも試しています

    また、クロームからもWPにログインしてダッシュボードから改めてサイトを表示させることも試してみました

    問題は解決していないようです

    ブラウザのキャッシュをクリアすれば良いんじゃないですか?

    [ご報告]

    ブラウザーのキャッシュをクリア
    気分的にPCを再起動してみましたが、問題が解決しませんでした

    ちなみに、わかりやすくfontを10ptほど落として反映されるか試してみたら
    ちゃんと反映されました

    CSSの上書き工程は、間違いがないようです

    使用されているIEのバージョンは何ですか?

    IEのバージョンは最新の11です

    ちなみに、Chromeも今回のテストでインストールしたばかりです
    Chome バージョン 36.0.1985.125 m

    IE 11.0.9600.17207
    Google Chrome 36.0.1985.125 m
    Firefox 31.0
    これらで確認しました。
    IE以外は全角で11文字以降が改行され、IEは9文字以降が改行されました。
    この改行は先に記したCSSの修正で回避できました。
    試しに全角20文字をサイトタイトルに入れましたが、どのブラウザでも改行しません。
    当然CSSを元に戻すと2列3列とお恥ずかしい状態になりました。
    あとはwidth: 350px;を広げるか消すかでしょうか。

    stranger-jpさま

    わざわざ丁寧に調査いただき本当にどうもありがとうございました!
    結局、ご提案いただいたCSS(white-space)の追加で当方のブラウザー環境では
    改善が目視できずにwidthを360px(10px広げた)にすることで解決しました
    ちなみに、400pxとかまで広げてしまうとレイアウトが崩れます
    もう一度、HTMLとCSSの指定のされ方をゆっくり確認してみます

    いままで、Dreamweaverを使ってHTMLとCSSで簡単なサイトを作ったりしていました
    このソフトにはインスペクトモードがあり、div構成やパディング、マージンなどが
    視覚的に色づけされてどのようにページデザインされているのか視認できます
    今回の場合、PHPが全く分からないだけでなく他人さまから提供されたテーマファイルを
    あれこれいじりたいとなると・・・
    初心者にはキツイつまづき処がこれからもっとたくさんありそうです(泣)

    WPをコーディングする上で、Dreamweaverのような便利ソフトが存在するのでしょうか?
    また、ダッシュボード上からでなくDreamweaver上に呼び込んで編集作業をする・・・
    というようなことをされる方もいらっしゃるのでしょうか?

    追加の質問で恐縮ですが、もしヒントとなるようなアドバイスがありましたら
    重ねてよろしくお願いいたします

    自分の環境ではwidth: 350px;を消しても何ら問題ありませんでした。
    試したのはhttp://totoro.ws/books/wp_socym/wp-content/uploads/Sugar_101.zip
    このファイルですが、何も触ってないからでしょうかね?
    差し支えなければhttp://pastebin.com/にpc.cssを貼ってみてください。

    便利ソフトってあるんですかね?
    自分が使うのはブラウザの開発ツールとテキストエディタばかりです。
    ブラウザの開発ツールで確認してSCP(FTPみたいなの)を介してファイルを直接テキストエディタで編集しています。
    ですのでWordPressの管理画面からテーマの編集など一度もしたことがありません。
    と云うか面倒だからですけど・・・

    ブラウザの右クリックメニューでFirefoxなら要素を調査、Chromeなら要素を検証と云うのがあるはずです。これらを使えばDreamweaverなど必要ないと思います。

    stranger-jpさま

    widthを指定しなくてもautoが効いて表示される・・・
    というような雰囲気のみでの理解でなんとか飲み込みました(泣)
    CSSは奥が深くて難解であります
    未だにfloat指定もうまくできなくて教科書を開きっぱなしです
    でも、レイアウトを思いのままに自在に指定してやることができたら・・・
    きっと楽しいです

    pastebinというサイトのご紹介ありがとうございました
    コードを分かりやすく広げるのに良いですね
    どのように活用したらいいのか今はわかんないんですけど、
    とにかくブックマークです(汗)

    なるほど・・・
    わたしは現在xdomainという無料サーバーで運用を始めたのですが、
    今回は直接サーバー内にログインしてファイルを探し・・・
    そのまま別窓で簡易なエディタが立ち上がりましたのでそこで上書き編集をした次第です
    ブラウザの開発ツールにもFirefoxにはインスペクタ機能がありました
    ここで、スタイルをまずはチェックして・・・ってことなんですね

    なんだか触りはじめで質問もとんちんかんですが、よいヒントが得られて良かったです
    とにかく、先に進んでみよう

    本当にどうもありがとうございました!

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • トピック「タイトルがブラウザーによって改行されてしまう」には新たに返信することはできません。