2010年01月30日

カスタム Blog を創る1 (土台作り)

今回、livedoorのテンプレートで、しっくりくるものがなかったので、がんばってオリジナルのテンプレートを創ってみたいとおもいます。とはいえ、cssとかhtmlとかいっさい分かりません。
色々と基本設定なので、設定を変更してみたりしたのですが、いまいちです。
Helpなどでcssの変更のしかたを検索してみたりしたのですが、いまいち分かりません。
考えた末、インチキカスタムを思いついたので、実行したらできちゃいました。この方法なら自分好みの、なんちゃってオリジナルblogを誰でも創れると思います。
まず、自分好みに近いデザインをテンプレートから選び、アップロードします。
今回私は、クレヨン(3カラム)のテンプレートにしました。

p1blog画面(改造前)文字の感じとかの感じは、気にいっています。
ただ、全体的に子供ぽいので何とかしてみようと思います。


まずは、デザインのカスタマイズ、スタイルシートcssを開きます。

p2css(原本)cssについての知識は、レイアウト、背景の指定、画像の配置、フォントの種類・サイズ・色・など、blog全体のスタイルを一括で管理している、まさにスタイルシートだと理解しています。

まずは、背景を変更してみます。
cssのタグ(文字)について。(私が分かる必要最低限)
body = blog本体(blog全体)
blogtitle = blogタイトル文字
banner  = blogタイトル文字
background = 背景
color = 色
font-family = フォントの種類
font-size = フォントサイズ
それぞれの、cssによって、ちがうかもスミマセン

後は、組み合わせみたいです。例えば

body{
  margin:0;
  padding:0;
  color:#666;
  background:#fff url(http://parts.blog.livedoor.jp/img/usr/crayon/bg.jpg) repeat-y 50% 0;
  font-family:arial ,sans-serif;
  text-align:center;
 }

body=blog全体の。
  color=記事部分フォントの色
  background=背景。
  url=貼り付け画像
  font-family=フォントの種類
  
みたいな感じです。(テンプレートによって多少違うと思います。)

しかしちょーアナログな方法で、どんなテンプレートでも変更部分が分かる方法を紹介します。
知識いらず、ただ時間がちょっとかかります。

まずは、デザインのカスタマイズでデザインの保存を行います。
そして、cssをひらきます。

BlogPaintbodyのbackground(背景)のurl:をコピーします。





BlogPainturl:を張り付けて、画像に移動。
背景の画像であることを確認。



今回は背景をシンプルにするので、画像は削除しますが、画像を変更する場合はここで画像のサイズを知るために、「名前を付けて画像を保存」で画像を保存します。

BlogPaintbody(blog全体)の背景画像を削除。






次に、背景の色を変更します
BlogPaint白(#fff)から、(#f5deb3)変更。





カラーコードについては、「webセーフカラー」で検索すると、たくさんでてくるので、参考にしてください。
pp31pe(カラーチャート)参考カラーチャート
背景・文字の色関係を確認しやすいのでおすすめです



背景色変更・・・・・プレビューで確認
p7css(バック画像url プレビュー)画面の上で確認すると、また違った感じがします。






プレビュー画面を、Print Screenキーで画面画像保存。
MSペイントなどのソフトに貼り付け。
p8css(バック画像url 画面保存)



トラックバックURL

コメントする

名前
 
  絵文字
 
 
top-page

記事のカテゴリー
豆知識 (建築)
豆知識(体・食)
豆知識(その他)