もう気付いて頂けたと思いますが、
ブログのテンプレートを自分で少し編集してみました
何分、知識がないもので、試行錯誤した自己流の編集です。
もっと違うやり方があるのかもしれませんが、
私の挑戦したgooブログテンプレートの編集の仕方を少しご紹介します。
ちなみに私はgooブログアドバンスです。
ブログタイトル背景画像の編集
まず、テンプレート選択画面で編集可能なテンプレートを選びます。
私は「シンプル」テンプレートのクリアブルー（左メニュー）のものを選び、それを元に編集しました。
このブログタイトルのブルーの部分に、
ちょびの画像を入れたのです。
まずは、タイトル部分に入れる画像の準備です。
≪画像の準備≫
好きな写真（デジカメ画像なので400～600万画素くらいかな？）の
ファイルを右クリックして
「プログラムから開く」を選び、
「ペイント」をクリック。
ペイントの画面が開きます。
今は、画像が画面いっぱいにはみ出しているので、この画像を小さくします。
上部のツールバー
「変形」をクリックし、
「縮尺と傾き」を選びます。
水平方向
２５％
垂直方向
２５％
にし、画面右の「OK」をクリック。
画像が少し小さくなりました。
左画面の点で四角になっている選択ツールをクリック
タイトル画像に使いたい部分をマウスをドラッグして横長に選択します。
この横長画像がタイトルの画像になります。
このとき、横は画面いっぱいに選択してください。
ドラッグしたのち、上のツールバーで
「編集」をクリックし、
「コピー」をクリックします。
（タイトル画像にする横長の画像をコピーしている状態です）
ツールバーの
「ファイル」をクリックし、
「新規」をクリックし、新しい画面を開きます。
ここで「保存しますか？」という画面が出ますので、「いいえ」をクリック。
新しいペイント画面の白いキャンパス部分を小さくする。
（白い四角画面の右下にポイントを合わせ、小さい四角になるまでドラッグする）
キャンバス（白い四角の画面）が小さくなったら、
ツールバーの
「編集」をクリック、
「貼り付け」をクリックする。
この画像を名前をつけて保存し、ブログの画像フォルダにアップロードします。
このとき
オリジナルサイズでアップロードしてください。
こんな感じに横長の写真がアップロードされたと思います。
≪背景画像の貼り付け方≫
アップロードした画像をクリックして、
写真のＵＲＬをコピーします。
ブログ編集の左にある
「テンプレート編集」をクリックし
「テンプレート編集」画面を出します。
データー編集画面の「ＣＳＳデーター」画面から「/* ヘッダーの指定 */」
をみつけます。
background-image: url(/images/tmp_sm_blue_r/head_bg.gif);
となっていますが、
background-image: url(
アップロードした画像のＵＲＬ);
に変更することによって、タイトル背景に画像が表示されます。
画像が小さいと連続して表示されてしまうので、気をつけて下さい。
ちなみに、私はどうしても画像が上手に表示されなかったので、
padding:
35px;を（たしかはじめは35だった）
padding:
80px;に変更しました。
私のブログタイトル背景画像のＣＳＳデーターを見本として
コピーしておきますね。
/* ヘッダーの指定 */
#header {
background-color: #C6D9EC;
padding:80px;
border-bottom: 1px solid #B6CEE7;
background-image: url(
アップロードした画像のＵＲＬ);
}
ダラダラと書いたので、わかりにくくてすみません
この他にもサイドバーを編集したりしたのですが、
長くなりそうなので、今日はこの辺にしておきます。
説明が下手なのでわかりにくいかもしれませんが、
ぜひみなさんもオリジナリティーあふれるブログのテンプレートを
編集してみてください。
FC2 Blog Ranking
主婦の日記ブログランキングに参加しています。
クリックして頂けたら、嬉しいです
もっと勉強して、楽しいブログにするよう頑張ります
