記事編集画面の文字を大きくする：sb 1.x 用

　sb のテンプレート編集画面や記事編集画面の文字が小さいと思った事はありませんか？　ノートパソコンを利用するなどして画面を近くから見ていればさほど気にならないと思いますが、モニタからある程度の距離をとっていると文字が小さいと思う人もいるでしょう。多くのブラウザには文字サイズを大きくする機能がついており、それを使えば見やすくする事も可能ですが、毎回文字拡大の操作をするのは面倒です。

　そこで、管理画面用のスタイルシートに手を加えて文字を大きくしてしまいましょう。こうすれば常に好みの文字サイズで表示されるため、いちいち拡大操作をする必要がなくなります。この記事の内容はスタイルシートの知識がほとんど無くても利用できます。

　この記事は sb 1.x 用のものです。Serene Bach をご利用の方はこちらの記事：□ をお読みください。

変更するのは 3箇所

　管理画面のスタイルシートは sb / lib / lang / ja にある style.css というファイルで、これを以下のように変更します。なお、文字を大きくする作業自体は1つめの変更のみで完了し、あとの2つはそれに合わせて入力部分を広くするために行います。この場合、上記見本画像のように入力部分が左右に広がり、コンパクトなオリジナルのレイアウトが変更されます。文字サイズは大きくしたいがレイアウトは変更したくない、という人は1つめの作業のみを行ってください。

140行目付近のスタイルに font-size: ○; を追加する

input.text, textarea {
background-color: #fff;
border: 1px solid #999;
font-size: 16px;
}

　スタイルシートの知識が無い人は上に表示されているものをそのままコピーしてください。16というのがサイズの設定で、標準の文字はこの数字でいうと大体 12 くらいになります。もっと大きい方が良い場合は数字を増やし、小さい方が良い場合は減らしてください。

160行目付近のスタイルの width: 700px; を width: 95%; に変更する

/* [main parts] */
div.body {
/* except MacIE ?*/
clear: both;
/* end for MacIE */
width: 95%;
margin: 5px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-image: url(../_parts/background.gif);
background-repeat: repeat-y;
}

　スタイルシートの知識が無い人は上に表示されているものをそのままコピーしてください。ある程度分かる人は後述の解説を参考に好みの値に調節してください。

250行目付近のスタイルの width: 490px; を width: 100%; に変更する

dl.mainform dd textarea.text {
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid #999;
}

　スタイルシートの知識が無い人は上に表示されているものをそのままコピーしてください。ある程度分かる人は後述の解説を参考に好みの値に調節してください。

　変更した style.css を所定の位置にアップロードすれば、テンプレート編集画面や記事編集画面をはじめ、文字を入力する部分の文字サイズが全て大きくなり、入力部分が広くなります。ただし「記事の概要」の入力部分は別扱いなので、ここも広げたい人は以下の部分を変更してください。

253行目〜のスタイルの width: 388px; を width: 100%; に変更する

dl.mainform dd textarea#entry_summary {
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid #999;
}

　スタイルシートの知識が無い人は上に表示されているものをそのままコピーしてください。ある程度分かる人は後述の解説を参考に好みの値に調節してください。

それぞれの解説

　160行目付近のスタイルの width: 700px; は左のメニューと右の操作部分の両方を合わせた幅を指定する値です。100 % にするとウインドウいっぱいに広がりますが、各入力フィールドのスクロールバーといったパーツが画面右端にぴったりくっついてしまうので、若干少なめにした方が見やすいでしょう。なお、左のメニュー部分の幅は別のスタイルによって 200px に固定されているので、幅が広くなるのは右側の操作部分のみです。もちろん px や pt といった絶対値での指定も可能です。
　250行目付近のスタイルの width: 490px; はテキスト入力エリアの幅を指定する値です。px や pt による絶対指定ではなく % による相対指定にすると、右側の操作部分の幅を基準としたサイズになります。「右側の操作部分の幅」とは「160行目付近のスタイルで指定した幅 − 200（左のメニュー部分）」で、100% にすれば右部分の幅いっぱいという事です。「記事の概要」の設定も同様です。

△ PageTop | comments (0) | trackbacks (0)