人気ブログランキングの応援
をして頂けると励みになります。
ここをクリックしてくださいね。
それでは、少しずつ
［CSS編集用デザイン］のCSSの編集をしていこうと思います。
今回は、文字入れしたヘッダー画像を設置してみましょう。
【１】文字入れヘッダー画像の作成
まず、無料画像編集ソフトgimpを使用して、
文字入れヘッダー画像を作成してみました。
【２】画像のアップロード
ブログの左上部の［ブログを書く］をクリックし、
［ブログを書く］画面が表示されたら、［画像］ボタンをクリックします。
そして、［参照］ボタンと［アップロード］ボタンを使って、
画像をアップロードします。
【３】画像のURLをメモ帳にコピー
画像がアップロードされたら、画像を選択して、
［この画像を使う］ボタンをクリックします。
下記の通り、画像のURLが表示されたら、
この中の黄色部分をメモ帳にコピーします。
【４】ＣＳＳの編集
①［マイページ］→［クイックリンク］→［スキンCSSの編集］の順にクリックし、
CSS編集画面を表示します。
②下記のCSSをコピーし、
上記①のCSS編集画面の一番最後の続きに追加（貼り付け）します。
/*■ヘッダー画像の設定■*/
.skinHeaderArea {
background-image: url("画像のURL");/*ヘッダー画像の設定*/
background-position: center top;/*中央上部へ配置*/
background-repeat: no-repeat;/*繰り返さない*/
height: 300px;/*ヘッダー画像の高さ*/
}
/* ■ブログタイトル、ブログ説明■ */
.skinBlogHeadingGroupArea {
text-indent:-9999px;/*文字を画面の外へ*/
}
【５】CSS編集画面でヘッダー画像のURLを入力します。
上記【４】の画像のURLの箇所に
上記【３】の黄色い部分（メモ帳に貼付けた画像のURL）
を貼付けます。
【６】表示の確認
ここまでできたら、下方へスクロールして、［表示を確認する］をクリックし、
ヘッダー画像がいい具合に表示されるかどうかご確認ください。
【７】CSSの保存
これで、OKなら、元のページに戻り、［保存］ボタンをクリックします。
これで、ブログは、次のようになりました。
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
人気ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。
クリックして戴けると、
とても励みになります。