スキン編集.............ブログタイトルの背景に画像を使う方法です☆

＊本日は、スキン編集に関しましてリクエストをいただきましたので少し説明します。

注）エキサイトブログ用です。




☆ブログタイトルに画像や写真を使う方法なのですが、そんなに難しくはありません。
環境設定から「スキン変更」を選び、『CSS編集』部分を弄くりますよ！！！


これからの作業なのですが............とても大事な事を最初に申し上げます。
スキン編集は、あくまでも自己責任と言う事でお願い致します。

失敗しても元に戻せるようにしておくため、「HTML編集」と「CSS編集」を最初に「コピー」しておく事をオススメします！




＊それでは説明していきます。



1.ブログ内の「設定」をクリックし、環境設定の画面に変えます。




2.環境設定の左側の項目内から『スキン編集』をクリック。






３.編集したいスキンを選びます。

私は『HTMLベーシック』をベースにしていますよ！
色は「ホワイトホワイト」を選択。




『HTMLベーシック』を元に編集を説明していきます。





4.プレビュー。編集。適用。とありますので、『編集』をクリックします。







5.『スキン編集を始めます』をクリックして下さい。









＊少し長くなりそうなので、下の『スキン編集！！！』をクリックして下さい。
続きを見ることが出来ます！




ランキングに参加しています！
宜しければバナーをポチッとしていただけると................
お手数をおかけしまして本当に申し訳ございません。
宜しくお願い致します。

魚屋三代目日記　「さかなや」
　　　⇩　　　　
　←素敵な料理レシピが盛り沢山！私も参加しています！！　　　　
　　　⇩
人気blogランキングへ　←こちらは日々の素敵な料理ブログが満載です！


＊こちらをクリックして下さい！
続きを見る事が出来ます！！！
　　↓







6.はい！ココからが本番です！！



＊『マイイメージアカウントにイメージ登録』をクリックして下さい。
タイトルに使う画像又は写真をアップロードします。






画像を登録しましたら、イメージリストからタイトルに使いたいイメージURLを選択します。






赤線の部分が重要なのでチェックしましょう！！





7.私は横幅900pxの画像を使いましたので、ブログの『各部分別横幅』を変更しました。





＊最初の設定では『本文700ーロゴ150ーメニュー150』になっています。
私は『本文680ーロゴー150ーメニュー150』に変更しました。






8.CSS編集を弄くっていきます................




DIV.HEADER {
FONT : BOLD 22PT/100% Courier New,TAHOMA;
}


＊上の部分に追加していきます。
この部分に新たなスタイルを加えます............



あっ！！！手っ取り早く下のスタイルをコピーペーストした方が早いかも！！！


DIV.HEADER {
WIDTH : 900PX;
PADDING : 0PX 0PX;
FONT-FAMILY : Times New Roman;
FONT-SIZE : 30PT;
LINE-HEIGHT :300PX;
/*FONT-WEIGHT : BOLD;*/

text-align: left;
text-indent:0.5em;

background-image : url(タイトル画像！マイイメージにUpした画像);
height:画像の縦の長さpx;
width:画像の横の長さpx;

background-repeat: no-repeat;
}



☆background-image : url(タイトル画像！マイイメージにUpした画像);
この部分（　）内は、先程イメージ登録しました画像URLを貼付けます。
赤線部分なのですが、『WIDTH=＊＊＊ HEIGHT=＊＊＊』は除いて下さい。
『http://pds.〜〜〜〜〜.jpg』まで貼付けます。
（一緒に貼付けたら表示されなかった.........大汗）





うはっ！タイトル画像の高さと横幅の指定を！！

☆background-image : url(タイトル画像！マイイメージにUpした画像);
height:画像の縦の長さpx;
width:画像の横の長さpx;



★注！！！上記の部分の説明です！！！



height:画像の縦の長さpx;の部分にはマイイメージにUpした時の高さを入れます。
（私の場合は369px）

width:画像の横の長さpx;の部分にはマイイメージにUpした時の横幅を入れます。
（私の場合は900px）


＜6.＞の説明部分........赤線の最後の方のheight:＊＊＊px;width:＊＊＊px;の「＊＊＊」部分を入れて下さいね！！！









＊最終的にCSS編集部分がこのようになります。

DIV.HEADER {
WIDTH : 900PX;
PADDING : 0PX 0PX;
FONT-FAMILY : Times New Roman;
FONT-SIZE : 30PT;
LINE-HEIGHT :300PX;
/*FONT-WEIGHT : BOLD;*/

text-align: left;
text-indent:0.5em;

background-image : url(タイトル画像！マイイメージにUpした画像);
height:369px;
width:900px;

background-repeat: no-repeat;
}

DIV.HEADER A:LINK {COLOR: #000; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #000; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #888; TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX SOLID #FFF}

DIV.URL {
FONT : 8PT/100% VERDANA,TAHOMA ;
〜.〜.〜〜.〜.〜.〜.〜.〜〜.〜.





＊スタイルの説明です

＊説明です

WIDTH : 900PX;はブログ（タイトル）の幅。

text-align: left; はタイトルの文字の位置（この場合は左寄せ）

text-indent:0.5em;はタイトル文字の左右の位置（動かす幅）

LINE-HEIGHT :300PX;はタイトル文字の縦の位置（動かす幅）

FONT-FAMILY : serif;はタイトル文字の書体（この場合は明朝）

FONT-SIZE : 33PT;はタイトル文字の大きさ

height:高さpx;は画像Upする写真の縦の長さ

width:横幅px;は画像Upする写真の横の長さ


☆お好みでタイトル文字の大きさや、位置を変更して下さい。
書体はプラウザやPCの環境によって変わりますので注意して下さいね！！！




＊最後に『保存』をクリックしますと終了です。
途中『プレビュー』をクリックして、確かめながら作業をすすめていくと良いと思います！









PS. くま先生さん、このような感じで大丈夫でしょうか！？
私も素人知識なのでココまでしか..................もっと上手い方法があるかも！？
申し訳ございません。





＊最後にもう一度..........
スキン編集は、あくまでも自己責任と言う事でお願い致します。
失敗しても元に戻せるようにしておくため、「HTML編集」と「CSS編集」を最初に「コピー」しておく事をオススメします！







ランキングに参加しています！
宜しければバナーをポチッとしていただけると................
お手数をおかけしまして本当に申し訳ございません。
宜しくお願い致します。

魚屋三代目日記　「さかなや」
　　　⇩　　　　
　←素敵な料理レシピが盛り沢山！私も参加しています！！　　　　
　　　⇩
人気blogランキングへ　←こちらは日々の素敵な料理ブログが満載です！