--
--
--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2009
12
04

投稿ページのプレビュー欄を、テンプレ記事欄と同じ幅にカスタマイズ

 FC2ブログの管理画面の横幅が広くなり、投稿欄も幅が広くなりました。このブログのように大きな画像を扱うブログでは、今回の変更は歓迎なのですが、ユーザーの中には「前のほうが良かった」という方もあるようです。

どうせなら、使ってるテンプレと同じ幅で入力できるようになって欲しいです。前のに戻したい。(公式ブログコメントより)


 そんな中で、Parodayさんの「新レイアウトのカスタマイズ」を読みました。最初は「へえ!こんなこともできるんだ」と感動するだけだったのですが、読んでいるうちにイタズラ心が頭をもたげ……。
 スタイルシートが効くなら、投稿ページのプレビュー欄を、テンプレ記事欄と同じ幅にも出来るんじゃ?

1-記事幅/フォントサイズ把握用の投稿

 以下の文字列を投稿して、テンプレートでプレビューしてください。

<div style="background:url(http://blog-imgs-36.fc2.com/m/a/n/manannan/gage1600.gif); height:26px; width:100%;font-size:3px;"> </div>
<span style="font-size:8px;">フォントサイズの把握……8px</span>
<span style="font-size:9px;">フォントサイズの把握……9px</span>
<span style="font-size:10px;">フォントサイズの把握……10px</span>
<span style="font-size:11px;">フォントサイズの把握……11px</span>
<span style="font-size:12px;">フォントサイズの把握……12px</span>
<span style="font-size:13px;">フォントサイズの把握……13px</span>
<span style="font-size:14px;">フォントサイズの把握……14px</span>
<span style="font-size:15px;">フォントサイズの把握……15px</span>
<span style="font-size:16px;">フォントサイズの把握……16px</span>
<span style="font-size:17px;">フォントサイズの把握……17px</span>
<span style="font-size:18px;">フォントサイズの把握……18px</span>


 下記のような表示になります。
 

フォントサイズの把握……「元」
フォントサイズの把握……8px
フォントサイズの把握……9px
フォントサイズの把握……10px
フォントサイズの把握……11px
フォントサイズの把握……12px
フォントサイズの把握……13px
フォントサイズの把握……14px
フォントサイズの把握……15px
フォントサイズの把握……16px
フォントサイズの把握……17px
フォントサイズの把握……18px

2-記事幅/フォントサイズ把握

 画像から記事幅を読み取ります。記事幅650px以下なら対応可能です。これを越えるテンプレはそんなに沢山はないと思います。
 フォントサイズのほうは、「元」と同じ大きさの文字が、(テストしているPCでの)そのテンプレートの記事の文字サイズです。(ただし、閲覧者の設定とテンプレートの組み合わせにより、異なった文字サイズでブログを見ている閲覧者がいる場合もあります)

3-userContent.cssをつくる。

 Parodayさんは、『Stylish』というアドオンを使った方法を紹介なさっていますが、DLしたり、いろいろ手間がかかりそうなので。手抜きで、FirefoxのuserContent.cssにつっこんでしまいました。自分のPCで「userContent-example.css」を探し、このファイルがあるフォルダーに「userContent.css」と名前を変えて保存しなおしました。
 たとえば文字サイズ14px、記事幅が560pxであれば

@charset "utf-8";
#area_pre_body,
#area_pre_extend
{font-size:14px;width:560px;}


 firefoxを立ち上げなおして、投稿画面を確認すると、プレビュー欄の幅が変わっているはずです。
 テンプレートを変更するまではこのまま使えます。テンプレを変更したら、同じ手順で、「userContent.css」を作りなおします。
(他のブラウザについては、(ちょっと古いですが)「Personnel」が参考になりそうです)
スポンサーサイト
Comment
 


管理者にだけ表示を許可する


Trackback
Trackback URL

«  | HOME |  »

Manannan Mac Lir

共有テンプレート


Tree-Recent


Tree-Comment


Tree-TB


カテゴリ


Tree-Arcive


CalendArchive


ブログ管理メニュー(新)


タグリスト(旧


ユーザータグ


テンプレート構造解析


フォーラムリンク


最新コメント


リンク


バナー貼


カテゴリ


画像一覧(月別)


ブログ内検索


プロフィール


Tree-LINK


RSSフィード


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。