2008年11月20日

プロフィールの文字サイズを変更する

このブログのデザインは、light pole(右サイドバー)を使っています。でも、デフォルトだとプロフィールの文字が小さ過ぎます。そこで今日は、カスタマイズ実験室と言うサイトを参考にしながら、文字の大きさを変えてみたいと思います。文字サイズの変更については、いくつものサイトで説明されていますが、私が読んだ範囲では、今回参考にしたサイトが一番分かりやすかったです。

まずは、サイトの説明をサラッと読みます。マイブログからデザインへと進みます。自分が使用しているデザインが表示されるのでクリックすると、なにやら良く分からないHTMLってヤツになります。難しいことは考えず、言われた箇所を探します。ありました!

   .side {
   line-height:2em;
   padding:5px 10px 10px 0px;
   margin-bottom:10px;
   font-size:10px;
   text-align:left;
   margin-bottom:10px;
   font-family:Verdana;
   }

サイトに書いてあるのとは少し違う部分もありますが、この中のfont-sizeって部分を変えれば良いわけですね。早速、font-sizeを12pxに変えてプレビューボタンを押してみます。 ばっちりです。「スタイルシートを変更する」ボタンをクリックして出来上がりです。

こうやって見て見ると、ブログの記事の日付けの文字サイズを変えたい場合は、おそらく「.date」のところのfont-sizeを、記事の題名の文字サイズを変えたい場合は、「.title」のところのfont-sizeを変えればいいんだな・・・と想像がつきます。めでたし、めでたし。


posted by むろみん at 14:56| Comment(0) | ブログのカスタマイズ | このブログの読者になる | 更新情報をチェックする

2008年11月19日

ブログタイトルの背景画像を変更する

このブログは、light pole(右サイドバー)と言うデザインを使っています。これはこれで格好いいデザインだと思うのですが、せっかくならブログタイトルの背景の写真もオリジナルのモノに替えてみよう!と言うわけで、WADA-blogを参考に作業をしてみようと思います。


まずは、サイトの説明をサラッと読みます。マイブログからデザインへと進みます。自分が使用しているデザインが表示されるのでクリックします。HTMLが表示されるので、「男は黙って缶ビール」じゃなくて、言われた箇所を探します。見つかりました〜。

   #banner{
   margin:0px;
   padding-left:45px;
   text-align:left;
   height:246px;
   background-image:url(http://blog.seesaa
   .jp/img/bg/light_pole/header.jpg
);
   background-position:top;
   }

赤字の部分がタイトルの背景画像のURLです。このURLをブラウザで開いてみると、デフォルトの画像が表示されますので、これを保存します。保存した画像をPhotoshopなどの編集ソフトで開くと、サイズが778×246ピクセルであることが分かります。注意しなければいけないのは、立体感を出すために画像の右側に影がつけてある点です。何度か試行錯誤してみた結果、772×246ピクセルの画像を作って、これをデフォルト画像の上から貼り付けると綺麗に仕上がることがわかりました。ちなみに画像を貼り付けるときには、影の部分が残るように左端を揃えるようにします。

できあがった画像を、いつもブログを書くときと同じ要領でアップロードします。ファイルマネージャーで確認すると、アップロードした画像のURLがhttp://muromins-diary.up.seesaa.net/image/header.jpgであることが分かりました。最初に開いたHTMLの赤字の部分を新しい画像のURL に書き換えます。実際にはコピー&ペーストすれば樂チンです。

   #banner{
   margin:0px;
   padding-left:45px;
   text-align:left;
   height:246px;
   background-image:url(http://muromins-dia
   ry.up.seesaa.net/image/header.jpg
);
   background-position:top;
   }

まずは、プレビューボタンを押してみます。 上手く表示されたのを確認してから「スタイルシートを変更する」ボタンをクリックして出来上がりです。

ちなみにオリジナルの画像を作る場合は、タイトルの文字色が綺麗に見えるように配慮する必要があります。たとえば、このブログのようにタイトル文字が白い場合に、背景の画像が白っぽいと文字がよく見えません。いくつか作っているうちに、少しづつコツがつかめてきます。実際、自分でカスタマイズしてみると、改めてデフォルトの画像はなかなか良くできてるなぁと感心しました。


posted by むろみん at 16:08| Comment(0) | ブログのカスタマイズ | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。