管理画面の新しいレイアウト主な変更点/追記 : FC2ブログ

管理画面の新しいレイアウト主な変更点/追記

2009-11-27 金 00:41
FC2ブログ

2009年12月4日 01:00 - レイアウトに追加変更がありました

　テンプレ編集ページのユーザースタイル、新レイアウトのユーザースタイルともに変更が必要です。再度コピーし直してください。新たに可変化（ウインドウのサイズ依存）・旧レイアウトのスタイルを追加しました。

実寸 : 新レイアウト上部（変更後）、（初期）
1/2（全体） : 新レイアウト、旧レイアウト、比較

主な変更点（赤字部分は後で変更されたもの）

全体の横幅 : 800px→900px
お知らせページのみ3カラム。他ページは 100px ほどメイン部分が広く。
トラックバックテーマを残して、インフォメーションと障害情報が右端のカラムへ。
文字サイズ : 12px→13px→12px
以前の管理ページの文字サイズ（12px）に戻されました。

　フッターメニューの横幅（900px）に合わせて、900px としたのでしょう。ディスプレイが小さいと少し窮屈かもしれません。旧レイアウトよりも縦幅が少し短くなっています。

　以前の管理ページのように、コメント投稿者の名前がtd要素で区切られ、右端に移動しました。各コメント管理ページに直接移動するときに、誤って投稿者サイトをクリックする可能性が減りました。

　コメント投稿者の名前をクリックすると投稿者のサイトに飛びます。場所が場所なだけにスパムコメントのURLを誤ってクリックしてしまう恐れがあります。

※「段階的に開始し、12月より全ユーザに適用を予定しています」とあるので、まだ適用されていないサーバーがあるかもしれません。

新レイアウトのカスタマイズ

[!] 最新のスタイルはテンプレ編集ページなどの管理ページカスタマイズよりコピーしてください

※ここに掲載されているコードは過去のものです

　ユーザースタイルシートを利用します。設定方法については編集ページのカスタマイズを参考にしてください。

デザイン変更

　メニューの幅を少し広げています。アプリケーション、トラックバックテーマは非表示にします。選択されたページの文字は太字では弱いので、赤色にします。

　他サイトで適用されてしまう可能性を考慮して、念のため、IDやクラス名を余計に入れています。

適用後

以下をユーザースタイルシートに追加します。

/* -----------------------------------------デザイン--- */ /* TB 表示*/ #ajaxcontent #notify_contents #tbtheme {display: none !important;} /* Name 表示 */ #notify_contents .posted a {display: inline;} /* Date 色 */ #ajaxcontent #notify_contents td {color: #505050 !important;} /* table 背景色 */ #mypage #notify_contents #blog_info table { width:100% !important; background: #fdfdfa; } #ajaxcontent #notify_contents div h3 {font-size: 106% !important;} #mypage #notify_contents h4 { border-bottom:2px solid #ddddcc !important; color: #339933 !important; font-size: 100% !important;; } /* Menu アプリ表示*/ .contents_box #left .ml_app,.contents_box .menu ul#menu_app { display: none !important; } #wrap .contents_box #left div.menu { border: none !important; width: 173px !important; } .contents_box #left .menu ul.menulist {padding: 5px 0 5px 5px !important;} .contents_box #left .menu ul.menulist strong {color: #ff0000 !important;}

■カスタマイズ例

コメント投稿者のリンクを非表示にする
/* Name */ #notify_contents .posted a {display: none;}

トラックバックテーマを表示する
/* Trackback */ #ajaxcontent #notify_contents #tbtheme {display: block !important;}

メニューのアプリケーションを表示する
/* Appli */ .contents_box #left .ml_app,.contents_box .menu ul#menu_app { display: block !important; }

可変化（ウインドウのサイズ依存）・旧レイアウト仕様

　ウインドウのサイズに合わせて横に伸縮します。初期値は、最小幅が800px、最大幅が900pxです。最大幅を最小幅と同じ800pxにすると、旧レイアウトの管理画面と同じ横幅になります。

max-width: 800px !important;/* 最大幅 */

/* -------------------------------------------可変化--- */ body > #wrap > #container { width: 96% !important; min-width: 800px !important;/* 最小幅 */ max-width: 900px !important;/* 最大幅 */ } #mypage #notify_contents { padding:0 !important; width:70.9% !important; margin: 0 1% !important; } #mypage #notify_sidemenu { padding:0 !important; width: 26.1% !important; } #wrap .contents_box:after,#ajaxcontent #right:after, #wrap #ajaxcontent:after,#ajaxcontent #tabmenu dd:after { content: ""; clear:both; display:block; height:0; } #ajaxcontent ul#sub_menu2,#ajaxcontent #tabmenu { width:auto !important; } #wrap #ajaxcontent{ margin-left: 180px !important; padding:0 5px !important; width:auto !important; float:none !important; } .contents_box #ajaxcontent #right { padding:15px 0 20px !important; width:auto !important; } .contents_box #ajaxcontent #right > div, .contents_box #ajaxcontent #right .edit_block { width:100% !important; padding: 0 !important; } .contents_box #ajaxcontent #right textarea, .contents_box #ajaxcontent table, #ajaxcontent #community > div {width:95% !important;} .contents_box #ajaxcontent #right textarea {margin-left:1% !important;} .contents_box #ajaxcontent div.editor { width:96% !important; margin:0 0 5px 1% !important; } #ajaxcontent .highlight_toggle, #ajaxcontent #highlight_toggle_html, #ajaxcontent #highlight_toggle_css { width:95%;margin-left:1% !important; } #ajaxcontent #community > .subheader{ padding:5px 0 !important; text-indent:10px; } #ajaxcontent .tbl table, #ajaxcontent .t_box table {width: 100% !important;} #setting_area div.drop_menu{ width:100% !important; position:relative !important; } #setting_area .drop_menu .sub_menu{ width: 100% !important; top:0 !important; left:0 !important; } #setting_area .drop_menu .sub_menu li, #setting_area .drop_menu .sub_menu li a { width:24.3% !important; } #setting_area .drop_menu .sub_menu li a, #setting_area .drop_menu .sub_menu .drop_list li { width:100% !important; } #setting_area .drop_menu .sub_menu li a { padding:5px 0px !important; } #ajaxcontent form .main_table th{ white-space:nowrap; } #community_area #history_list .visitor_profile .wrap { width:auto !important; } #ajaxcontent #baton .contents { width:auto !important; padding: 0 5px 15px !important; } #ajaxcontent #baton .contents > div { width:49.5% !important; } .contents_box #html_textarea_box, .contents_box #css_textarea_box { width:100% !important; } #login_page #right_login{margin-left:-180px !important;}

テンプレ編集ページのユーザースタイルシートを使用している方へ

　新しいレイアウトに移行された方は、編集エリアが正常に表示されるようにFC2テンプレ編集ページなどのカスタマイズから再度コピーし直してくささい。横幅が大きくなったので、もう必要ないような気もします。テンプレート編集ページ以外のスタイルについては、ファイルアップロードのみ変更が必要です。

Stylishの編集方法 : スタイルの管理→概要を選択→編集またはダブルクリック

■更新履歴
2009年12月04日 01:00 ユーザースタイルの修正
2009年12月02日 22:20 投稿者名の修正
2009年12月01日 22:20 追記

【関連項目】
Paroday - FC2ブログインフォメーション
2009 03-03 - [CSS]テンプレ編集ページなどの管理ページカスタマイズ
FC2総合インフォメーション - 【ブログ】管理画面レイアウトが拡張されます！

関連記事

2 0 Hatena tweet Top

comment
manannan 2009-12-04 01:16 No.391 #-URLhttp://manannan.blog84.fc2.com/blog-entry-270.html
すごく面白かったので、真似記事を書いてしまいました！、TBしようと思ったのですが、不可のようなのでコメントでm(_ _)m
4日の金曜日 2009-12-04 23:57 No.392 #-URL
イイですよね。ユーザスタイルシート。あまりマークアップに変更のないログインが必要なページでは重宝します。特にfont関係は重要ですね。

トラックバック

https://paro2day.blog.fc2.com/tb.php/504-2ffcb34c

trackback