スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 いよいよ今日は難関のCSS設定
 さて、エントリー文書の読みやすさを中心にCSS設定でレイアウトを変更してみた。
 私はもちろんCSSスクリプトに詳しいわけではないので、自HP作成に使っていたHomepageBuilder2001にあるCSSエディタで命令のどれが何処を変えているのか手探りで調べてみた。
 そのためにHTML設定スクリプトとCSSをコピーしてそれぞれ保存し、まずHPビルダーでHTMLスクリプトを読み込んだ。さらにそれに保存しておいたCSSファイルを「CSSエディタ」を使ってリンク設定。ビルダーの標準表示ではガタガタになってしまうが、プレビュー表示では現在のスタイルが綺麗に表示されたのでほっとする。HP作成や更新にはほとんど使うことのなかったCSSエディタがけっこう役立つね。
 この方法にハタと気付いたのは「FC2blog攻略ブログ」のおかげで、ビルダーの具体的な操作方法も書かれています。
 とりあえず必要な変更箇所は以下の通り。すぐ忘れるのでこれもここに記録です。
(注意:このままコピー貼り付けでは動きません。場所の参考として見て、数値の変更を打ち込んでください)

FC2テンプレート print のCSS変更設定===================
(数値は変更後のものです)

■サイドブロックメニューの文字を大きくする
 (font-size を上げるだけ)
.menuText {
   font-size: 12px;
   padding: 0px;
   color: #666666;
   line-height: 120%;
}

■メイン記事ブロックの幅を広げ、少し左へ移動する。
 (width の数値を上げる)
 (margin の終り数値50pxを37pxに変更)
.mainEntryBlock {
   width : 486px;
   margin: 20px 0px 20px 37px;
   background-color: #FFFFFF;

■メイン記事内部(薄青)ブロック幅を拡大
 (width の数値を上げる)
.mainEntryBase {
   margin: 0px 10px 10px;
   width : 466px;
   background-color: #CEDCEB;

■メイン記事の文字を大きくして行間を広げる
 (行間はline-heightの数値120%を140%に変更)
.mainEntryBody {
   padding: 10px 15px;
   font-size: 14px;
   line-height: 140%;
   color: #333333;

 (ここも同じく変更)
.mainEntryMore {
   padding: 10px 15px;
   font-size: 14px;
   line-height: 140%;

 実は最初、テンプレートの全体幅を拡げて800pxにしようとしたが、このテンプレートはけっこう凝っていて、バックのGIF画像が何と5種類(ヘッダ、フッター、ヘッド装飾、バックベース白、バックベース青)もある。拡げるにはそれら全てを800用に加工し直さなければならない事が判明して、やめました。
スポンサーサイト

Comment

管理人にのみ表示する


Track Back
TB*URL

Copyright © PC修復-コテ先修理. all rights reserved.

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