背景画像を好きに変更します | 0から始めるお小遣い錬金術。

背景画像を好きに変更します

 さて、本来は「錬金術」をもっと書きたいところなのですが、いかんせんあまりにブログ自体が見づらいため、もう少し、最低限の設定というか、チューニングを施したいと思います。


 デフォルトでは、タイトルの文字は白となっていました。

 で、スキンを設定しました。このスキンってやつが曲者で、なかなかかっこいいスキンがたくさんあるのですが、一部のスキンは、「デザインと機能」「カスタマイズ」の機能が使えないのです。

 わたしの選択した、このスキンもカスタマイズは使えませんでした(無念)。


 で、タイトルの文字を変更(あとで記述します)は、CSSファイルを変更すると簡単にできるのですが、このスキンを使用した場合は、どんな色にしてもなかなかタイトルや、サイトの説明文が見づらくなってしまいます(困)。


 しかし、次のような方法を使うことによって、タイトル画像を自作したり、もともとのスキンを修正したりできます


 条件としては、アメーバ以外に自分のファイルを置くことができるWEBスペースを持っていることが必要です。例えば、HPとか


 ①わたくしのようにスキンを修正したい場合

  ・まずは普通にスキンを設定する

  ・CSSを見てみる

  ・header云々の部分を見つけてください。

   url(http://amebol**** )のような感じで、スキンの画像が参照されているところが必ずあります。

  ・そのファイルをダウンロードします

   ダウンロードには、ダウンロードツールやそのアドレスをブラウザで表示させたりして保存してください。

  ・Photshopといった、画像処理ソフトで自由に変更しましょう

   わたくしの場合は、背景とタイトルの文字数を考慮して、コントラストを低くして、境界線をぼかしてやりました。

   他には、サイトの紹介文のところも必要に応じて変更してあげます。

  ・スキンを、「ブルー」[グリーン」「ピンク」[グレー」の中から好きなものを選び、設定します

  ・「カスタマイズ」の機能が使えるようになります

  ・カスタマイズ機能の画像の追加を行ってみてください(画像はなんでもいいです)

   この操作は、行わなくても問題ありませんが、以下の理解が容易となります

  ・CSSファイル見ます

  ・おそらく、一番したに、

   #header{ url(参照した画像へのアドレス) };

   #header { background-repeat:repeat-x; }

   という部分があると思います。

  ・この最初の#headerを、
   #header {
   width: 760px; /*使用する画像の横の長さ*/
   height: 118px; /*使用する画像の縦の長さ*/
   background-image: url(http://外部サーバに置いた画像ファイルへのアドレス);
   } 

   に変更します。

   縦の長さは自由に変更してください。


   わたくしの場合は必要ありませんでしたが、

   #header {
   width: 760px; /*使用する画像の横の長さ*/
   height: 118px; /*使用する画像の縦の長さ*/
   background-repeat: no-repeat;  /*画像の繰り返し防止*/
   background-position: center top; /*左寄りはcenterをleftに、右寄りはrightに変更する*/
   }

   の2行を入れると安定するかと思います。

   

   この操作で、スキンの「ヘッダーの部分」を好きな画像を使って設定することができます。

   同様な操作で、そのスキンの他の部分の画像も、スキンの画像と入れ替えることができるでしょう。

   また、自分で用意した自作の画像なども、同様な手続きで問題ありません。


   わたくしは、プロバイダのDionから割り当てられているHPに修正したスキン画像をFTPで転送しました。

  


人気blogランキングへクリック