Paroday

Paroday：ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか？　yes

管理画面レイアウトの崩れ

2009 10-10 01:22 追記 - 修正2

【告知なし】10月7日、さらに修正されました。

□修正前

091005g

□修正後

091007a

　名前を削除し、IDだけを表示。ようこその文言が削除されました。今回の修正で長い名前でもIDをきちんと表示できるようになったと思います。ただし、IE6などの古いブラウザの対策はなされていません。

　修正後も崩れる場合（IE6、Firefox2などの古いブラウザ）は以下のユーザースタイルをお試しください。スタイルシートの設定については使い方をご覧ください。

　スタイルを利用していた方は次の変更を行ってください。

【全ブラウザ共通】IE6以外のブラウザは IE6用より下の部分 を削除

2009 10-05 23:12　一応、修正されました

■2009 10-10：ユーザースタイルは【全ブラウザ共通】を利用してください。

修正を行いましたので、今、現在は、正常に表示されるかと存じます。【水谷@FC2】

　正常に表示できる（崩れない）場合は、名前を元に戻しても問題ありません。ユーザースタイルも必要ありません。（『Stylish』はクリックしてチェックを外す。その他ブラウザは参照場所を空欄に）
※長い名前でもIDをきちんと表示させたい場合は、名前の文字数を減らすかユーザースタイルを引き続き使用します。

ユーザースタイル：Firefox、Opera・IE7↑など、IE6限定

■修正（追加）された箇所

div.header_menu {
 font-size:12px;
 overflow:hidden;
}
.contents_box {
 clear:both;
 width:100%;
}

　レイアウトやサイドバー広告の位置ずれを overflow: hidden; で強引に修正することが、正常な表示なのかはわかりませんが、作業する分には問題ありません。

正常に表示できない部分について

□正常な表示

091005c

□現在の表示

091005g

□IE

091005b

□メニュー　（左：IE6　右：Firefox2）

091005f

原因

　clear だけでは不足です。ヘッダメニュー（header_menu）の float 問題を解決しただけで、名前とIDを狭いスペース（300px）に併記する問題が残っているため、IDが途切れてしまいます。
　overflow は使わない方が無難です。Firefox2などの古いブラウザでは崩れる恐れがあります。
　IEではメニュー背景画像がずれて表示されます。
　プルダウンメニューはIE6で崩れます。

名前とIDを狭いスペース（300px）に併記する問題

　現在のレイアウトは、右上メニューで 470px の幅を取っているため、左の名前ID要素にも 300px を取って、互いの要素がかぶらないようにしています。 470px は大きすぎるかもしれませんが、ブラウザ・文字サイズ・OSの違いを考えれば、適当なのかもしれません。今後、新たな項目が追加されたり、メニュー表記が変更されるのかもしれません。

091003a

　そもそもお隣のメニュー（470px）は絶対配置なので、 <p class="userid"> に float は不要で、かぶらないスペースが確保されていれば、思い切って width を削除することもできます。

　300px が変更できないのであれば、やはりどちらか一方に絞るか、 p.userid を右上メニューと同じ絶対配置にした方がいいような気もします。

ソースコード

（1）修正箇所

div.header_menu {
 clear: both;/* 不要 */
 overflow:hidden;/* 古いブラウザ崩れの修正、ブログIDを表示するなら不要 */
 height: 20px;
 padding: 5px 10px;
 background-color: #FFFFFF;
 background-image: url(http://blog-imgs-1.fc2.com/image/layout/header_sub_bg.png);
 background-repeat: repeat-x;
 background-position: left top;/* IE */
 text-align: left;
 vertical-align: middle;
 color: #777777;
 font-size:12px;
}
/* --- IE6のメニュー空白行をなくすために追加--- */
* html ul#header_menulist li.on .drop_list li {
 border-bottom:1px #ffffff solid;
}

（2-1）overflow を外して、300pxを維持しない

div.header_menu p.userid{
 position: static;
 float: left;/* 削除 */
 width: 300px;/* 削除 */
}

（2-2）overflow を外して、300pxを維持

div.header_menu p.userid{
 position: absolute;
 float: left;/* 削除 */
 width: 300px;
 left: 10px;/* 追加 */
 top: 66px;/* 追加 */
}

　それから、contents_box内の <div id="left"> と <div id="right"> の float の後処理は修正されていないので、親の contents_box の高さが消失しています。今後のことを考えると修正しておいた方がいいかもしれません。

2009 10-03 15:56 - 管理画面レイアウトの崩れ

ブログ管理画面内上部に「マイサービス」というインターフェースを試験的に導入しました【中道@FC2】

　FC2IDの文字数とユーザー情報[あなたのお名前]の文字数、OSブラウザ環境によって管理画面が崩れてしまいます。

091003a

2009.10.03 15:56　改善方法

　フォーラムでyosoilueさんも仰っていますが、とりあえず最も簡単な改善方法は、名前（ユーザー情報[あなたのお名前]）の文字数を崩れなくなるまで減らすことです。IDは変更できないのでどうしようもありません。

　テンプレートやプロフィールプラグインで名前の変数を使用している場合は、直接名前を書く必要があります。名前の変数は「<%author_name>」で検索します。ただし、名前を頻繁に変えるような方は、やはり変数を使用した方が好ましいでしょう。

　他の改善方法として、ブラウザを変える方法もありますが、このためだけにブラウザを変えるのは滑稽です。

　現在の名前を維持したまま、ページの崩れを改善するには、以下のユーザースタイルシートを使うとよいかもしれません。どちらか一つを使用します。スタイルシートの設定については使い方をご覧ください。
[！] FC2がこの問題を解決した場合は、ユーザースタイルを削除してください。

ユーザースタイルシート(1)

　ホームがIDと重なってしまう場合は、font-size の 12px を 11px や 10px に変更してください。

.header_menu p.userid{
 position:absolute !important;
 float: none !important;
 width: auto !important;
 left: 10px !important;
 top: 66px !important;
 font-size: 12px !important;
}
.header_menu p.userid strong{
 font-size:100% !important;
}

　適用すると次のようになります。

091003a

ユーザースタイルシート(2)

　ブログIDさえ表示されていれば、名前はいらない。

.header_menu p.userid strong{
 display:none !important;
}
.header_menu p.userid{
 color: #000000 !important;
}

　適用すると次のようになります。

091003a

2009 10-03 15:56 - 原因

　名前とIDを狭いスペースに併記しようとするから、対処に困るのであって、名前かIDどちらか一方を表示するようにしてしまえばよいのです。「ようこそ！」を削る、あるいはメニューの位置をずらすのも一考です。

091003a

ソースコード

<p class="userid">
<div id="left">
<div id="right">
　3つの float の後処理ができていません。試験的導入とあるので、今後どのようになるのかはわかりませんが、とりあえず以下をCSSに追加する必要があります。必要であれば、IE6以下の対策も加えます。

.contents_box{
 min-height: 1px;
 clear: both;
}
.contents_box:after{
 clear: both;
 content:".";
 display: block;
 height: 0;
 visibility: hidden;
}

　div.header_menu の clear は意味がありません。

※このままだと、position: absolute で指定しているサイドバー広告の位置がずれる恐れがあるので、名前とIDの表記の問題もクリアしなければなりません。

2009.10.03 15:56　ユーザースタイルシートの使い方（Firefox）

　Firefoxを起動させ、下記リンクよりアドオン（拡張機能）の『Stylish』をインストール。再起動してください。

▼Stylish [日本語]

インストール後、再起動すると、S字のアイコンが機能するようになります。
※古いバージョンではメモ用紙のようなアイコンになっています。

自分のブログにログインして、管理ページを開きます

Stylish起動

  • ブラウザ右下にあるアイコンをクリック
  • スタイルを書く→「blog○.fc2.com用」をクリック
    「○」には自分のブログサーバー番号が入ります

{ }を消さないで

【Firefox用!! 完成後の適用ユーザースタイル】○にサーバー番号

　サーバー番号の異なる複数のブログを管理している場合は、[スタイルの管理]で以下の部分を[編集]します。

@-moz-document domain("blog○.fc2.com"),domain("blog□.fc2.com") {

　domain( )の後ろに「,」を加えて、domain( )を追記。

　スタイルのプレビューや保存が即座に反映されない場合は、一度保存して、再読み込み、別のページを開いてみてください。

2009.10.03 15:56　ユーザースタイルシートの使い方（Operaなど）

スタイルシート（cssファイル）をテキストエディタで作成。

Windowsで「メモ帳」を使う場合は、[スタート]→[すべてのプログラム]→[アクセサリ]→[メモ帳]で起動。

起動したら、前述の全ブラウザ共通スタイルをコピーして貼り付け。

Opera/IEのためのファイル作成

  • [ファイル]→[名前を付けて保存]　保存場所はどこでも構いません。
  • ファイル名も何でも構いませんが、必ず末尾を「.css」（半角英字ドットシーエスエス）にしてください。ここでは「fc2menu.css」とします。

Operaを起動させ、自分のブログにログイン。

オペラ

  • 管理ページ内の適当な箇所を（右）クリックして、メニューを表示。
    [サイトごとの設定を編集]をクリック。

表示設定

  • [表示設定]のタブを選び、先ほど保存したcssファイルを選択→OK
  • 管理ページの適当なページに移動してみてください。

IEの場合は、メニューバー[ツール]→[インターネットオプション]→[ユーザー補助]
保存したユーザースタイルシートを参照→OK
一度IEを終了させて、再起動で適用されます。すでにログインしてる場合は、テンプレの[編集]を右クリック[新しいウインドウで開く]で適用。

Windows版Safariの場合は、メニューバー[編集]→[設定]→[詳細]
保存したユーザースタイルシート[その他]を参照→閉じる→ページ更新で適用

2009.10.05 15:56 23:00　ユーザースタイルシートの使い方（IE6）

スタイルシート（cssファイル）をテキストエディタで作成。

Windowsで「メモ帳」を使う場合は、[スタート]→[すべてのプログラム]→[アクセサリ]→[メモ帳]で起動。

起動したら、以下の適用スタイルをコピーして貼り付け。
※背景画像の削除部分はなくても構いません。IE6をデフォルトブラウザにするような低スペックPC向け対策です。私の環境では砂時計がなくなります。

【IE6用!!】

IEのためのファイル作成

  • [ファイル]→[名前を付けて保存]　保存場所はどこでも構いません。
  • ファイル名も何でも構いませんが、必ず末尾を「.css」（半角英字ドットシーエスエス）にしてください。ここでは「fc2menu.css」とします。

IE6を起動させる。

メニューバー[ツール]→[インターネットオプション]→[ユーザー補助]
保存したユーザースタイルシートを参照→OK
一度IEを終了させて、再起動で適用されます。

更新履歴

  • 2009.10.10 01:22　追記
    ID途切れの改善
    全ブラウザ共通ユーザースタイル
  • 2009.10.05 23:00　追記
    レイアウト崩れの改善
    正常に表示できない部分について
    ユーザースタイルシートの使い方（IE6）
  • 2009.10.03 15:56　公開
関連記事
  1. comment

  2. うん 2009-10-05 23:26 No.387 #-URL

    「ドットシーエスエス」って物凄くサディスティックな響き。

  3. 18歳 2009-10-10 01:39 No.388 #-URL

    ようこそ！がなくなるだけでこんなにも殺風景になるとは・・・。

  4. Сложнее всего начать действовать, все остальное зависит только от упорства. https://helloworld.com:h 2020-08-23 00:41 No.5324 #VviRksqUURL

    Сложнее всего начать действовать, все остальное зависит только от упорства. https://helloworld.com:h=1edb0c0a1838e1f6fb29eb4507312bca:

コメント

Icon ※必須 :
Pass 　※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

https://paro2day.blog.fc2.com/tb.php/485-c5982a17

  1. trackback