blog対応の初心者向けオリジナルスキン作成講座です。横に細長く切り取った写真を用いて、タイトルバナーにします。ブログ説明文は写真と重なると見えにくくなるので、写真の下に配置しました。本記事では「ハート」スキンをベースに使用しています。備ベーススキンを選びます。タイトルバナーに使用する写真を用意します。【写真の切り取りについて】ご自身のブログ内に用意した写真をアップロードします。【画像の保存方法】サンプルでは次の写真を使います。集1写真をタイトルバナー部に挿入する#bannerを変更します。注)スキンによっては#containerの場合もあります。背景色(ソースコードの「#FFFFFF」部)は必ず指定してください。この状態では写真がメイン部分の左上を基準に配置されているので、写真をセンター(真ん中)に寄せます。;}写真の下が表示されていないため、heightを調整します。私が用意した写真は750×228ピクセルなので、次のように変更します。ブログ名の文字の位置を被写体と重ならないよう右側に移動します。480pxに変更しますが、これは「だいたい」の数値です。写真の大きさやバランスなどを考えて決定してください。☆ーleft次にブログ名の文字位置が垂直方向の中央に来るよう調整します。95pxに変更しますが、これは「だいたい」の数値です。写真の大きさやバランスなどを考えて決定してください。{::padding-top:95px;padding-right:20px;padding-bottom:10px;padding-left:480px;::}最後に、ブログ名の文字色を変更します。{::color:#FFFFFF;::}3ブログ説明文の文字位置および文字色を変更する#leadを変更します。ブログ説明文の背景色と文字色を変更します。{::color:#FFFFFF;background:#800000;::}ブログ説明文の背景がタイトルバナーからはみ出しているので、写真と同じ幅にします。メイン部の幅が770pxで、タイトル画像の幅が750pxなので、左右、10pxずつ内側に短くする必要があります。☆ーleftブログ説明文の開始位置が内側に入りすぎているため、少し左側に寄せます。同時に、右側も同じ値を設定します。☆ーleft次に、ブログ説明文の文字の位置を写真の下に移動します。85pxに変更しますが、これは「だいたい」の数値です。写真の大きさやバランスなどを考えて決定してください。ー(※)margin-top:85px;margin-right:10px;margin-bottom:0px;margin-left:10px;::}最後に、ブログ説明文がサイドバーや本文記事の方にはみ出してしまっているので、#contentを変更します。30pxに変更しますが、これは「だいたい」の数値です。写真の大きさやバランスなどを考えて決定してください。{::margin-top:30px;::}以上。写真の切り取りについてタイトルバナー全面に写真を貼り付ける場合は、被写体が小さく写っている写真を選び、被写体を左側、もしくは右側に位置するように横に細長く切り取ります。切り取った写真の幅は、ベーススキンのタイトルバナーと同じ幅か、もしくはスキン編集で#container内に書かれているwidthの値と同じ幅にすることをオススメします。切り取った写真の幅に合わせてスキンの幅を変えるのは、レイアウトが崩れる原因となります。ベーススキンのタイトルバナーの画像サイズがわからなかったら、ブラウザで画像のみを表示してみてください。Webサイトのタイトル名が表示される部分に「○×□ピクセル」と表示されると思います。○が幅(width)で□が高さ(height)です。コメント(0)共通テーマ:ペットあなたは既にnice!を行っています。一定件数以上前のnice!は表示されませんのでご了承ください。0コメントを書くコメント投稿に失敗しました。未入力の項目があります。認証コードが一致しませんでした。半角英数字のみのコメントは受け付けできません。お名前:URL:コメント:画像認証:下の画像に表示されている文字を入力してください。ブログトップお知らせいつもご訪問いただきありがとうございます。更新が滞っておりますが運営中です。皆様のお役に立てれば幸いです♪コメントや質問は随時受け付けております。質問に対する回答には現象確認のため少々お時間をいただくことがありますが、ご了承ください。スパムコメント対策として、So-netログインユーザのみコメントの書き込みを許可しております。よって、会員以外の方はコメントの書き込みが出来ない状態になっておりますが、ご了承くださいませ。..ありがとうございました。