やりたかったことの１つ。
テーマのWPTP-Chocolateはデザイン的には気に入ってるけど、ところどころがなんとなく・・・。
今までちょっとずつ編集してきて、今回はcodeタグかpreタグ辺りを編集するために調べてみました。
っで、CSSを編集するのにいいものを見つけたわけです。
紹介しているのは下記サイトでCSS編集するのに便利そうなリンクが貼られている。
FC2ブログのカスタマイズ方法
何が便利なのか
オンラインCSSエディタたぬきのしっぽ
オンラインでCSSが編集できる・・・編集するだけならオンラインじゃなくてもソフトで可能です。
便利と言うところは視覚的によく、独自のセレクタも認識して編集できる点です。
編集したいCSSが使われているページのURLを入力するとCGIで呼ばれた対象のページとカスタマイズするためのページが開き編集したいセレクタを選び編集するとCGIで呼び出されたページに反映されるのでけっこう手軽に使えます。
これがあれば自分の好きなようにCSSをカスタマイズできそうです。
さらにサイトをうろうろしてるとpreタグに関していくつかのサイトを発見。
preタグでやりたかったことはスクロールバーの表示を無くし枠線やバックグラウンドカラーなどで飾りたいって感じです。
スクロールバーを無くすと文字がはみ出してしまうわけですが
スクロールを無くすと記事がはみ出す
はみ出さない方法がソースで載っていました。
[ CSS ] pre でも改行を生かしたまま折り返す | Bowz::Notebook
ブラウザ依存でもあるようです。
また、CSSを編集する際の引用、参考サイトは以下です
hail2u.net – Weblog – pre要素へのスタイル指定
preタグスタイルいろいろ CSS – Knowledge Database IT
[ CSS ] pre でも改行を生かしたまま折り返す | Bowz::Notebook
っで、AfroがWPTP-Chocolateのスタイルシートにあてたソースは
pre {
margin: 0px;
padding: 5px;
border-width: 2px 2px 2px 10px;
border-style: dashed dashed dashed solid;
border-color: rgb(204, 204, 204);
line-height: 1.3em; background-color: rgb(221, 221, 221);
color: rgb(0, 0, 0);
font-size: 12px;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
です。
なかなかいいかもです。
はみ出しもなくなる
はみ出しはブラウザ依存のようなので
white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word; /* IE 5.5+ */
となるようです。
CSSファイルを編集したついでに1度は編集した投稿内の文字の大きさも・・・ブログを引越ししてからほったらかしだった文字の大きさ。
.post-contentのfont-sizeを13pxとした。
