人気ブログランキングの応援
をして頂けると励みになります。
ここをクリックしてくださいね。
いつもご購読ありがとうございます。
ご購読者の方から、ご質問を受けましたので、
今回の記事で取り上げていきますね。
ヘッダーに画像を貼るには、通常は、
こちらの方法で可能です。
↓↓↓
文字入れヘッダー画像を設置してみよう。［ＣＳＳ編集用デザイン］
しかし、ヘッダー画像のサイズが大きい場合は、
この方法では、アップロードできません。
大きいサイズとは、横幅が800pxを超える場合を言います。
それでは、順番に説明していきますね。
【１】文字入れヘッダー画像の作成
無料画像編集ソフトgimpを使用して、
文字入れヘッダー画像を作成し、
任意のファイルに保存します。
【２】画像のアップロード
ブログの左上部の［マイページ］をクリックします。
［クイックリンク］→［スキンＣＳＳの編集］の順にクリックし、
表示された画面の中の下図赤枠内の［参照］ボタンをクリックして、
アップロードするヘッダー画像を選択します。
画像が決定したら、下図赤枠内の［アップロード］ボタンをクリックします。
すると、下図のように画像がアップロードできました。
このように、ここには大きいサイズの画像がアップロードできますが、
それには、条件がありますので、注意が必要です。
その条件とは、
①拡張子がgif、jpg、pngのみで、
②枚数が５枚（各１ＭＢ以内）まで
です。
【３】画像のURLをメモ帳にコピー
画像がアップロードされたら、上図青枠内の部分を
メモ帳にコピーします。
【４】ＣＳＳの編集
下記のCSSをコピーし、今表示されている画面の
一番最後の続きに追加（貼り付け）します。
/*■ヘッダー画像の設定■*/
.skinHeaderArea {
background-image: url("画像のURL");/*ヘッダー画像の設定*/
background-position: center top;/*中央上部へ配置*/
background-repeat: no-repeat;/*繰り返さない*/
height: 300px;/*ヘッダー画像の高さ*/
}
/* ■ブログタイトル、ブログ説明■ */
.skinBlogHeadingGroupArea {
text-indent:-9999px;/*文字を画面の外へ*/
}
.skinHeaderArea {
background-image: url("画像のURL");/*ヘッダー画像の設定*/
background-position: center top;/*中央上部へ配置*/
background-repeat: no-repeat;/*繰り返さない*/
height: 300px;/*ヘッダー画像の高さ*/
}
/* ■ブログタイトル、ブログ説明■ */
.skinBlogHeadingGroupArea {
text-indent:-9999px;/*文字を画面の外へ*/
}
【５】CSS編集画面でヘッダー画像のURLを入力します。
上記【３】でメモ帳にコピーしたＵＲＬを
上記【４】のＣＳＳ内の画像のURLの部分と置換えます。
【６】表示の確認
ここまでできたら、下方へスクロールして、［表示を確認する］をクリックし、
ヘッダー画像がいい具合に表示されるかどうかご確認ください。
【７】CSSの保存
これで、OKなら、元のページに戻り、［保存］ボタンをクリックします。
これで、ブログは、次のようになりました。
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
人気ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。
クリックして戴けると、
とても励みになります。