FC2ブログ管理画面のデザイン変更…メイリオフォントに メニューに崩れも
- 2013-12-20 金 02:44
- FC2ブログ
FC2ブログ管理画面のデザインが変更され、フォントが『ＭＳ Ｐゴシック』から『メイリオ』になりました。また全体を囲っていた枠線がなくなり、広々としています。
body, input {
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
}
2013-12-20追記
メニューのズレが解消されました。現在は問題なく表示されます。
ただ簡易モードと簡易モードの[ON][OFF]スイッチに不具合があり、環境設定のドロップダウンメニューが本来の位置から離れた下の方に表示されてしまいます。
これは簡易モードにしているブログや簡易モードの[ON][OFF]スイッチを押したりすると起こる現象です。
したがって、簡易モードをオフにしてリロードすれば正常に表示されます。簡易モードにしなければ問題ありません。
明日にでも修正されるのではないかと思われます。
お試しブックマークレット
メニューのズレを解消するブックマークレットです。
下記リンクを（右）クリックして、リンクをお気に入り（ブックマーク）に追加します。Google Chromeはメニューからブックマークバーを表示させてリンクをバーにドラッグします。Firefoxなどでもドラッグして追加できます。
管理ページを開いて追加したお気に入りリンクをクリックするとズレたメニューの位置が調整されるはずです。今後、改善されるなどしてメニューの位置がズレなくなった場合はお気に入りから削除してください。
原因はレイアウトの変更
以前は全体を囲っていた要素（conteiner）の中にヘッダー部分（header）がありましたが、今回の変更でヘッダーが要素の外に配置されるようになりました。その結果、「position: absolute;」で指定していた「top」からの位置にズレが生じています。
またメニューの親要素（#setting_area .drop_menu）に「position: relative;」が新たに追加されているため、JavaScriptの関数「switch_sipmle_normal」で位置を指定する必要がなくなっています。下記4行が不要。
/*
var setting_drop_menu = document.getElementById('setting_drop_menu');
if (setting_drop_menu) setting_drop_menu.style.top = (Blog.isSimple)? '150px' : '220px';
var setting_sub_menu = document.getElementById('setting_sub_menu');
if (setting_sub_menu) setting_sub_menu.style.top = (Blog.isSimple)? '150px' : '220px';
*/
さらにsetting_131219.cssにある「#setting_area .drop_menu .sub_menu」で位置を上書きする必要もありません。下記を削除。
/* 簡易モードの場合は位置情報を上書き */
.m_simple #setting_area .drop_menu .sub_menu {
top: 150px;
}
以上で崩れは解消されるものと思われます。
あるいはスタイルシートに下記1行を加えるだけで解消されます。
#setting_sub_menu,#setting_drop_menu {top: 0px !important;}
ユーザースタイルシートでＭＳ Ｐゴシックに戻す方法
Internet Explorer
- 「fc2-control-font」のリンクを右クリックして「対象をファイルに保存」。場所は適当なフォルダでOK。
※すでにユーザースタイルシートを利用している場合はリンクを開いて中身をすべてコピーして適用中のCSSファイルに追加して保存してください。 - IEメニューの「ツール」→「インターネットオプション」
[全般]タブにある「ユーザー補助」をクリック
- 「自分のスタイルシートでドキュメントの書式を設定する」にチェックを入れて「参照」をクリック。先ほど保存した.cssファイルを指定して「OK」をクリックすれば完了です。
適用したスタイルを無効にするときはチェックを外します。あるいはファイルを開いて内容を全て削除して上書き保存します。
内容を変更したファイルを反映させるにはスタイルのチェックを一度外して「OK」をクリック。再度チェックを入れて「OK」をクリックすれば反映されます。
Google Chrome
- 『Stylish』をChromeウェブストアからインストールしてブラウザを再起動するとバーに『S』アイコンが追加されます。
- 『S』アイコンをクリック→インストール済みのスタイルを管理→新しいスタイルを作成
名前欄には「FC2管理画面フォント」など適当な名前を入れる。
次のコードをコピーしてコード欄に貼り付け。
- コード欄の下にある「個別指定」をクリック。
- セレクトメニューは「ドメイン上のURL」に変更して以下のドメインを指定。
追加をクリック。 - 最後に左上の「有効」にチェックを入れて「保存」を選択すれば完了。
適用したスタイルを無効にするときはSアイコンから「スタイルを管理」→作成したスタイルの「無効化」をクリックします。あるいはスタイルが適用されているページでスタイルの「無効化」をクリックすれば無効になります。
Firefox
- 『Stylish』をアドオンページからインストールしてブラウザを再起動するとバーに『S』アイコンが追加されます。
- 『S』アイコンをクリック→新しいスタイルを書く→白紙のスタイル
名前欄には「FC2管理画面フォント」など適当な名前を入れる。
次のコードをコピーしてコード欄に貼り付けて保存すれば完了。
適用したスタイルを無効にするときはSアイコンから「スタイルの管理」→作成したスタイルの「無効化」をクリックします。あるいはスタイルが適用されているページでスタイルのチェックを外せば無効になります。
- comment