blog対応の初心者向けオリジナルスキン作成講座です。明サイズを小さくした写真をタイトルバナー部に挿入します。本記事では「チワワ」スキンをベースに使用しています。備ベーススキンを選びます。タイトルバナーに使用する写真を用意します。写真をご自身のブログ内にアップロードします。【画像の保存方法】サンプルでは次の写真を使って右端に配置します。集1写真をタイトルバナー部に挿入する#bannerを変更します。注)スキンによっては#containerの場合もあります。背景色(ソースコードの「#FFFFD4」部)は必ず指定してください。ここで、写真の下が表示されなかったり、あるいは写真以上の高さが表示された場合、heightを調整します。サンプル用に用意した画像は375×250ピクセルなので、次のように変更します。単位の[px]を書き忘れないように!尚、もし用意した写真の画像サイズがわからなかったら、ブラウザで画像のみを表示してみてください。Webサイトのタイトル名が表示される部分に「○×□ピクセル」と表示されると思います。○が幅(width)で□が高さ(height)です。次に、文字と写真が重なってしまっているので、写真を右側に寄せます。写真を左側に配置したい方は次に進んで結構です。写真を中央に配置したい場合は「center」と記述します。ブログ説明文は#leadを変更します。ブログタイトルの文字の色を変更します。h1内で文字の色を指定しても変化はありませんのでご注意ください。aを変更しますが、ベースとしたスキンの中に存在しない場合は、新たに追加してください。存在しない場合は、共通(Common)のリンク色が使用されているということです。h1の記述の下に新たに追加します。{color:#81A46C;}次に、ブログ説明文の文字の色を変更します。ここではブログ名の文字位置が垂直方向の中央に来るよう調整します。100pxに変更しますが、これは「だいたい」の数値です。タイトル部の高さを250pxに設定していますから半分は125pxの位置となりますが、文字の高さや、下に説明分もあるので「100pxくらいがちょうどいいかな〜」という目分量といいますか。画像の大きさなどやバランスを考えて決定してください。☆ーleft尚、写真を左側に配置した場合、文字を右側に寄せたくなると思いますが、その方法には二通りあります。一つは、文字を右寄せにする方法、もう一つは、文字全体を右側に移動させる方法。文章からはどちらも同じ事のように思えますが、見栄えは異なります。設定した値(400px)はバランスを考えた「だいたい」の数値となります4タイトルバナーの下に線をつけるスキンにもよりますし、好みにもよりますが、タイトルバナーとその下の境界線がハッキリしないので、区切り線をつけます。必要のない方はスルーしてください。#bannerを変更します。solid;:}以上。写真についてタイトルバナーに使用する写真のサイズには制限はありませんが、あまり縦に大きいものはお勧めしません。ブログ読者のPC環境によってはタイトルバナーだけで画面いっぱいになってしまう可能性があるからです。バランス的にも、だいたい高さ150〜300pixel(ピクセル)くらいで、被写体が大きく写っているものがいいでしょう。サイズ変更を行った写真(画像ファイル)はJPG形式、もしくはGIF形式で保存してください。被写体が真正面を向いていればどこに配置してもおかしくないですが、もし写真を右端に配置したいなら被写体は左向き、左端に配置したいなら右向きの写真がいいと思います。これは被写体をそっぽ向かせないためです。コメント(4)共通テーマ:ペットあなたは既にnice!を行っています。一定件数以上前のnice!は表示されませんのでご了承ください。10:26)ありがとうございました。おかげさまでタイトルを一新できました。23:19)コメントを書くコメント投稿に失敗しました。未入力の項目があります。認証コードが一致しませんでした。半角英数字のみのコメントは受け付けできません。お名前:URL:コメント:画像認証:下の画像に表示されている文字を入力してください。ブログトップお知らせいつもご訪問いただきありがとうございます。更新が滞っておりますが運営中です。皆様のお役に立てれば幸いです♪コメントや質問は随時受け付けております。質問に対する回答には現象確認のため少々お時間をいただくことがありますが、ご了承ください。スパムコメント対策として、So-netログインユーザのみコメントの書き込みを許可しております。よって、会員以外の方はコメントの書き込みが出来ない状態になっておりますが、ご了承くださいませ。..ありがとうございました。