--年--月--日 --:--

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

カスタマイズの備忘録

2010年12月07日 22:32

カスタマイズって言うほどの大げさな修正じゃないけど
もしもの場合?に備えて、とりあえず記録しておきます。


お借りした基本となるテンプレート(day-out)はコレ↓
2fee.jpg
  こうして見ると、このまま使っても良かったような気がしないでもない(笑)


とにかく、シンプルで見やすい画面にしたかった。

文字が小さいのと暗めの色調は、自分が見てて疲れちゃうので
(老眼じゃねーよ!まだ若いもん ちょっと遠視と近視が・・・w)
そのへんを重点的に修正してみました。

画面の構成
・表示幅:850px → 930px
・メイン-サブの比率:64%-35% → 62%-37%
・切り替え:可変 → 固定(HTMLの修正)
・記事枠内の左右の余白の修正(div.entry-body)
 padding:0.8em 1.5em 0; → 0.8em 3.4em 0;(01/06 追記)

ヘッダー画像の変更による修正
・高さ:210px → 285px(素材に合わせる)

フォントサイズの修正
・タイトル:100% → 140%
・記事:100% → 115%
・サイド:100% → 90%

フォント(書体)の修正(12/14 追記)
・タイトル:Lucida Sans Unicode,Verdana→ HGPゴシックE
・記事:Verdana,MS UI Gothic → MSPゴシック,sans-serif

行間の修正
・記事:1.4 → 1.6

文字色の修正
・記事:#555(グレー)→ #000(黒)
・サイド:#555(グレー)→ #000(黒)

ベースカラーの修正
・全体:#FFF(白)→ #f4f4f4(薄グレー)
・タイトル部: #000(黒)→ 削除

プラグイン(サイドのメニュー)の修正
・カレンダー、検索フォーム、RSSリンクの表示
 Powered By 等、使用頻度の低いメニューを削除
・最新記事、アーカイブを共有版に交換
・バナー用にフリースペースを追加(12/08 追記)
・アルバム用にフリースペースを追加(12/18 追記)

枠線の修正
・記事枠:#333(グレー) → x#000(黒)
・記事内の画像:自動で枠が付くように設定(12/11 追記)
・サイド:………(グレー点線)→ ―――(黒の実線)

この最後のサイドの枠線の修正に苦労しました。

 ■ プロフィール ――――――――――――
――――――――この線 ↑

元は細い点線でしたが、ベースカラーをグレーに替えたら
どうしてもぼやけてるので、黒の実線にしたかった。

行の真ん中だから、テキストの点線(…)かと思ったが
カーソルも入らないし、やっぱり枠線なのか?と
なら、「border-style : dotted」ってのがスタイルシートの
何処かにあるだろうと、探したけど見当たらん・・・

で、よくよく見たら・・
background-image : url("http://*****/border-x.gif")
ってのが見つかって、点線を画像にして入れてるのが判って
実線を画像(1px×200px)で作って、差し替えたらOKでした。


こうして見ると、たいした作業でもないんですけど
HTMLやCSSなんて、チンプンカンプンだし
専門用語とか判らないし、英語なんぞ問題外なので・・・

これくらいで、かんべんしてやるか~(笑)
スポンサーサイト


コメント

  1. ばたやん | URL | -

    ちんぷんかんぷんです!

    えーっと・・・

    日本語で書いてくれないと良くわからないんですが・・・

    プラグインとかborder-style : dottedとかなんたらかんたら・・・

    あぁそうか・・だから名前も koba なんだ(笑

  2. なんか暗号みたいな内容ですねv-13
    とにかくジブンも近視と遠視なので、見やすくなるんでしょうねv-10

  3. koba | URL | dMtXu4sA

    ばたやん

    プラグインなんて単語は、一週間前まで聞いたこともありませんでした(笑)

    「CSSで点線」でググってみたら「border-style : dotted」って出たから
    真面目に探しちゃって、コレ直すだけで2日も掛かったわ(爆)

  4. koba | URL | dMtXu4sA

    ともじーさん

    SPORAはカスタマイズできるスキンが1種類しかないんだよね。
    サークルブログをやってみて、一応出来たから
    コッチで失敗したらSPORAにするつもりでした(笑)

  5. ふぁんたらら | URL | -

    参考にします^^

    kobaさんのブログ、多分カスタマしてあるんだろうな~って
    思ってたから、どうやったのか聞いてみようと思ってたとこに
    この記事!!

    ナイスなタイミングでアップ、ありがとうございましたv-266
    私も参考にしていろいろ試してみようと思います^^

    やっぱり老眼じゃなくても(笑)
    明るくて見やすいほうがいいですもんね~v-218

  6. koba | URL | dMtXu4sA

    ららさん

    参考になるかどうか、分かりませんけど・・・

    カスタマイズってのは、労力に比べて
    結果が伴わないってのが、アドバイスです(爆)

    でも、色々試すのも楽しいから、やってみて下さい。

  7. ジルピー | URL | -

    もう何が何だか分からない世界のお話でした

    アメブロ、、ちょっとうるさいんですよね、、、

  8. koba | URL | dMtXu4sA

    ジルピーさん

    やりだしちゃえば、何とかなるんですけどね。

    例えるなら、エクセルのマクロよりは簡単でしょうか?
    って、余計に分かり辛いですね~(笑)

    アメブロはメジャーになりすぎたんでしょうか・・・
    って、何がウルサイんですか?

  9. やきそばパンZ | URL | bVX2PU2o

    確かに!


    見やすいですねー。

    私の目は最近、ジョジョに老眼がひたひたと迫り来ている感じになって来まして、これはスッキリして見やすいです。


    で、自分とこのブログはどうなのよ?って振り返ってみますが・・・
    やり方がよく判んないので、まぁいいか。(笑)


  10. koba | URL | dMtXu4sA

    やきそばパンZさん

    どもっ。

    見易くしたいと考えてますけど、モニターによっても違うし
    IEのバージョンでかなり字の大きさが違うんですね。

    IE8にアップしたら字が小さくて・・・どうしよ~

  11. えばやん | URL | -

    こんにちは(*^_^*)

    えーっと…
    途中まで読んでたら目が回りました。(笑

    私もばたやんさんと一緒だぁ。(笑


    私も細かいトコ、修正したいんですけど…。
    途中まで頑張るといつも目が回るんです。助けて下さい。(笑

  12. koba | URL | dMtXu4sA

    えばやんさん

    いらっしゃいまし。

    目を回らせてしまって、すいません。

    でも、クルクル廻るお寿司の方がよほど目が回るんですけど(笑)


    細かい修正っって・・・画像の修正ならばたやんに(爆)

コメントの投稿

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://koba5884443.blog102.fc2.com/tb.php/9-5be9a9d8
この記事へのトラックバック



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