Paroday

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

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

[CSS]テンプレ編集ページなどの管理ページカスタマイズ

最終更新日 2010 06-23

テンプレ編集ページ

  • (1)でダウンロード済みのテンプレート一覧を指定の高さでスクロール
  • (2)でHTML編集エリアを指定の高さと幅でスクロール
  • (3)でCSS編集エリアを指定の高さと幅でスクロール
  • テンプレ登録をしている場合は、(4)でスクロール
  • (5)の横スクロールで編集エリアへ移動
    ※各テンプレの[編集]や[更新]ボタンをクリックすると移動
    または、青丸あたりのバーをクリックすると移動が楽です。Firefoxはページトップをクリックすると左へ移動できると思います。

 カスタマイズにはユーザースタイルシートを使います。このスタイルシートは自分のPCでのみ適用されるものです。ただ使用するだけであれば、私的使用の域をでません。ウェブページをさまざまなブラウザで閲覧するようなものとお考えください。

 IEでも使えますが、ドメインごとの管理ができなかったり、仕様という名の不具合があったりするので、Firefoxでの使用を推奨します。Firefox2と3で確認済みです。IE7は知りません(スタンドアローン版でユーザースタイルシートを適用すると、IE6の処理(隣接子供属性セレクタ無効)をするようなので未確認)。もしかするとOperaでも使えるかもしれません。古いブラウザはセレクタ指定の関係でたぶん未対応です。

Firefox

 Firefoxがない場合は、Mozilla Japanからダウンロード。

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

▼Stylish [日本語]

 インストール後、再起動すると、右下のアイコンが機能するようになります。

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

Stylish起動

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

 すると、次のようなコードが書かれたウインドウが開きます。

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document domain("blog○.fc2.com") {
 
}

 「domain」を「url-prefix」に変更し、「blog」の前に「http://」を加えると、FC2ブログ管理画面のみにユーザースタイルが適用されるようになります。

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document url-prefix("http://blog○.fc2.com") {
 
}

 スタイルを入れる場所は「{ 」と「 } 」の間です。

{ }を消さないで

  • 名前(概要)の部分に適当な名前を入れる(「fc2」など)
  • 「{ 」と「 } 」の間に適用させるスタイルを入れて[保存]→完成

 適用スタイルは、こちらからコピーしてください→適用スタイル一覧

Firefoxの『Stylish』でテンプレ編集ページのスタイルを入れると以下のようになります
【例 : Firefox用!!】○にサーバー番号

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

@-moz-document url-prefix("http://blog○.fc2.com"),
url-prefix("http://blog□.fc2.com")
{

 url-prefix( )の後ろに「,」(コンマ)を加えて、url-prefix( )を追記。

 スタイルのプレビューや保存が即座に反映されない場合は、一度保存して、テンプレートの[編集]をクリック(再読み込み)してみてください。テンプレ編集途中でスタイルをいじって、消してしまうような事態にならないよう気をつけてください

Opera、IEなど

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

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

 起動後、共通適用スタイルをコピーして貼り付け
※Firefox用をコピーしないでください

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

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

 Operaを起動させ、ブログにログイン。管理ページを開き、[テンプレートの設定]をクリック。

オペラ

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

表示設定

  • [表示設定]のタブを選び、先ほど保存したcssファイルを選択→OK
  • 適当なテンプレートの[編集]をクリックしてみてください。

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

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

縦に並べる(デフォルト)

 縦に並べる場合は、HTMLとCSSの各幅が(全体幅-40px)くらいになるように調整

■全体の編集エリアを小さく

/* - HTML編集エリア - */
 width: 600px !important; /* 入力エリアの横幅 */
/* - CSS編集エリア - */
width: 600px !important; /* 入力エリアの横幅 */
/* - 全体編集エリア位置・幅 - */
 width: 640px; /* 全体幅 */

 高さを固定するときはheightを追加(伸縮できなくなります)

/* - HTML編集エリア - */
div#setting_area textarea[name="html"],
div#setting_area #html_textarea_cm{
 height: 270px !important; /* 高さ */
/* - CSS編集エリア - */
div#setting_area textarea[name="css"],
div#setting_area #css_textarea_cm{
 height: 300px !important; /* 高さ */

横に並べる

 横に並べる場合は、HTMLとCSSの合計幅が(全体幅-40px)くらいになるように調整。各エリアのwidthは「460px」以上を推奨。
 手順は(1)から(3)まであります。

(1)HTML/CSS入力エリアのwidthを変更。

/* - HTML編集エリア - */
width: 470px !important; /* 入力エリアの横幅 */
/* - CSS編集エリア - */
width: 470px !important; /* 入力エリアの横幅 */

(2)全体編集エリアの変更
 全体編集エリアの横位置を10px増やす。
 HTML横幅(470)+CSS横幅(470)<全体幅(980)となるように調整。
 赤字部分(textarea_box)を追記。

/* - 全体編集エリア位置・幅 - */
div#setting_area div + form[name="edit"]{
 position: absolute;
 top: 0px; /* 縦位置 */
 left: 933px; /* 横位置 */
 width: 980px; /* 全体幅 */
 margin: 0;
 text-align: center;
}
#html_textarea_box{
 float:left;
 margin: 0 10px 0 0 !important;
}
#css_textarea_box{
 float:left;
 margin: 0 !important;
}

(3)以下の部分に赤字を追記。

div#setting_area .template_operate{
 margin: 0 !important;
 padding-top: 10px;
 clear: both;

}

 高さを固定するときはheightを追加(伸縮できなくなります)

/* - HTML編集エリア - */
div#setting_area textarea[name="html"],
div#setting_area #html_textarea_cm{
 height: 470px !important; /* 高さ */
/* - CSS編集エリア - */
div#setting_area textarea[name="css"],
div#setting_area #css_textarea_cm{
 height: 470px !important; /* 高さ */

■通常と同じくらいの横幅で並べる

/* - HTML編集エリア - */
 width: 560px !important; /* 入力エリアの横幅 */
/* - CSS編集エリア - */
 width: 560px !important; /* 入力エリアの横幅 */
/* - 全体編集エリア位置・幅 - */
 width: 1170px; /* 全体幅 */

□高さを固定するときはheightを追加

/* - HTML編集エリア - */
div#setting_area textarea[name="html"],
div#setting_area #html_textarea_cm{
 height: 470px !important; /* 高さ */
/* - CSS編集エリア - */
div#setting_area textarea[name="css"],
div#setting_area #css_textarea_cm{
 height: 470px !important; /* 高さ */

適用スタイルの解除

■『Stylish』の解除
解除

 『Stylish』をクリックすると、下の方にそのページで適用されるスタイルのリストが表示されます。それをクリックすると、チェックが外れ、解除されます。解除後は再読み込み、または別ページに移動するなどした方がいいかもしれません。再度適用する場合は同じようにクリックしてください。
 なんど外して再読み込みしてもスタイルが解除されないときは、『Stylish』を無効にしてFirefoxを再起動します。
 メニューバー→[ツール]→[アドオン][拡張機能]→『Stylish』を選択、[無効]→Firefoxを完全に終了させて、再起動→同じようにして『Stylish』を[有効]に設定し直す


 OperaやIEなどは表示設定やユーザー補助の参照場所を削除したり、適用のチェックを外したりして解除します。

プラグイン・禁止IPワード・プロフィール編集エリア、バトンリスト

 Firefoxは、@-moz-document url-prefix("http://blog○.fc2.com")の 「{ 」と「 } 」の間に入れます(最後の「}」の手前など)。OperaやIEなどcssファイルを利用する場合は、最上部や最下部に追加します。

■全部まとめたスタイル(テンプレ+プラグイン+禁止IPワード+プロフィール+バトン)

【テンプレ編集ページ】

【プラグイン】

【禁止IPワード】

【プロフィール】

【バトンリスト】

バトンリスト適用後サンプル

バトン適用

その他スタイル

 全部まとめたスタイルには含まれていません。個別に追加します。
 Firefoxは、@-moz-document url-prefix("http://blog○.fc2.com")の 「{ 」と「 } 」の間に入れます(最後の「}」の手前など)。OperaやIEなどcssファイルを利用する場合は、最上部や最下部に追加します。

ファイルアップロード

 ファイルとタイトルのエリアを広げる(※IE6以下は未対応)

ファイルアップロード

【テンプレ編集】ハイライトのメニューを削除

 見えなくなるだけです。高さの伸縮もできなくなるので、HTML/CSS編集エリアの高さも指定した方が無難です。

#highlight_toggle_html,#highlight_toggle_css{
display: none !important;
visibility: hidden !important;
}

管理ページ新レイアウト(10.06.23)スタイル

全部まとめたスタイルには含まれていません。個別に追加します。
 Firefoxは、@-moz-document url-prefix("http://blog○.fc2.com")の 「{ 」と「 } 」の間に入れます(最後の「}」の手前など)。OperaやIEなどcssファイルを利用する場合は、最上部や最下部に追加します。

デザイン変更

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

カスタマイズ

コメント投稿者のリンクを非表示にする
/* 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;/* 最大幅 */

更新履歴

  • 2010 06-23 00

    06-22に管理ページのレイアウトが変更されました。すべてコピーし直すことを推奨します。

  • 09/12/04 00

    『Stylish』を利用している場合は以下の変更を行います。
    冒頭(○はサーバー番号)

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

    「domain」を「url-prefix」に変更し、「blog」の前に「http://」を加えます。

    @-moz-document url-prefix("http://blog○.fc2.com") {

     複数指定している場合も同様です。

    @-moz-document url-prefix("http://blog○.fc2.com"),
    url-prefix("http://blog□.fc2.com") {

    一部クラスがFC2ブログでも使用されていたため、ユーザースタイルの絞込みをしました。再度コピーし直してください。

  • 09/12/01 22

    【ブログ】管理画面レイアウトの拡張に対応
    変更の必要があるのはテンプレート編集・ファイルアップロードです。再度コピーし直してください。
    縦に並べる / 横に並べる の合計幅は(全体幅-40px)になります。
    管理ページ新レイアウト(09.12.01)スタイルを追加
    ザイン変更、可変化(ウインドウのサイズ依存)・旧レイアウトの横幅

  • 09/10/03 16
    管理画面レイアウト崩れの影響で枠線が消えてしまう不具合に対応
  • 09/06/20 18
    テンプレート編集画面の機能改良の伸縮ハイライトに対応
  • 09/03/28 08
    ファイルアップロードのエリア拡張
  • 09/03/09 22
    09/03/09/01の更新を取り消し
  • 09/03/06 23
    テンプレートの[名前順]表示を左寄せに
  • 09/03/04/19 21
    プラグイン編集エリアの回避
    不要なセレクタを削除・変更
    そのほか需要のありそうなスタイルを作成
    プラグイン・禁止IPワード・プロフィール編集エリア、バトンリスト
  • 09/03/03 23
    Windows版Safariで更新後に編集エリアへ移動するように
    Firefoxにて、テンプレート名が20文字近くでもきちんと表示されるように
    やっぱり必要なさそうなテーブルの横幅を削除
関連記事
  1. comment

コメント

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

トラックバック

http://paro2day.blog122.fc2.com/tb.php/394-bb7a88e8

  1. trackback