人気ブログランキング | 話題のタグを見る
わたくし! さかなや !! 今日も元気です!!!
スキン編集.............ブログタイトルの背景に画像を使う方法です☆
スキン編集.............ブログタイトルの背景に画像を使う方法です☆_d0069838_846980.jpg


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

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




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


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

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




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



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




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

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





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

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


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


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





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

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






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

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








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




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

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



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

  ↓







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

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


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



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



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



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



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





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


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



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






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

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



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ランキングへ ←こちらは日々の素敵な料理ブログが満載です!

by n-sakanaya | 2008-05-08 10:07 | その他 | Trackback(3) | Comments(4)
Tracked from 旅行の最新情報 at 2008-05-08 22:12
タイトル : タイのお勧め料理
辛いだけがタイ料理ではありません。甘さと辛さとすっぱさ、それにスパイスの香りが加わった、奥深い料理なのです。「トム・ヤム・クン」は、大きなエビを丸ごと使った、タイで最も有名なスープです。バンコク滞在中に、是非、本場のトム・ヤム・クンを堪能してください。トム・ヤム・クン以外にも、お勧めタイ料理はいっぱいです:●トート・マン・プラー魚のすり身を使った、タイ風のさつま揚げです。●ホー・モック・プラー魚のすり身にココナッツ・ミルクを合わせて蒸したものです。●ソムタム・タイタイの田舎料理の代表です。青いパパイヤ...... more
Tracked from 料理お役立ち情報 at 2008-05-09 01:44
タイトル : しらす干しのダイエットレシピ
大根には根にも葉にもビタミンCが含まれています。ビタミンCは細胞の老化を抑制し、ストレスを和らげる作用があります。ダイエット中はとかくストレスがたまりがち。積極的にビタミンCを摂るようにしましょう。大根はおろすことで一度にたっぷりと食べることができます。大根は、食べる直前におろしましょう。また、カルシウムもストレス解消に大切です。しらす干しはカルシウムの宝庫です。干しえびに変えてもOK!生しいたけは軽く焼くことで風味がよくなります。リンゴを加えることで自然の甘みを活かし、砂糖を控えることができます。リ...... more
Tracked from 料理お役立ち情報 at 2008-05-09 17:44
タイトル : 干ししいたけを使ったダイエットレシピ
シンプルな材料ですが、干ししいたけのうま味でおいしくいただけます。きのこ類は低カロリーですから、ダイエット中も安心していただけます。また、豆腐をはじめとする大豆および豆製品は植物性の良質のたんぱく質、カルシウム、鉄などの供給源となります。鶏のささ身肉を少々加えることで動物性のたんぱく質が加わり、栄養価が非常に高くなります。身体に必要な栄養素は、たんぱく質、糖質、脂質、ビタミン、ミネラルなどです。これらをバランスよくとることが健康的な食生活の基本であり、ダイエットの確実な成功を導くことになります。★おす...... more
Commented by くま先生 at 2008-05-08 21:30 x
おお~~~~出来ちゃいました!!!
うそ~~~~ビックリです!!
こんなに丁寧に教えていただき有難うございます。
ちょくちょくスキン変更していく予定です。

感激やな~~~ウキウキ!!
Commented by n-sakanaya at 2008-05-08 21:53
>くま先生さん!こんばんは!!”

よかった〜〜〜〜〜〜!!!!!(感激)
久々だったので、チョット自信が無かったです.........大汗

今回の記事にも追加しながらでしたよ〜〜〜;滝汗



くま先生さん、スキン編集!面白いですよ!!
何かリクエストがございましたら、おっしゃって下さいね〜〜〜
おこたえ出来る範囲でしたらブログにUpします。
(うっ.............私も勉強しマッス;滝汗)



Commented by ちびママ at 2008-05-08 22:08 x
全く、わかりません。。
いや、私の理解範囲内ではないということです。
携帯すらない私・・・。

でも、いずれ、やりたいと思います!!
ヤプログでの編集方法も知りたいですが・・・
違うブログですよね??

それと、もしよろしければ
写真に「sakanaya」と入れる方法もしりたいなあ。
難しいでしょうかね・・・。
Commented by n-sakanaya at 2008-05-09 11:33
>ちびママさん、こんにちは!

ちょっと慣れるまで難しいかも...........大汗
私も最初はチンプンカンプンでした。

ヤプログでの方法は.........スイマセン、チャレンジした事がァ〜号泣
でも、基本的には同じ作業だと思います。


あっ!私はエキサイトです!!


>それと、もしよろしければ
写真に「sakanaya」と入れる方法もしりたいなあ。
難しいでしょうかね・・・。

ちびママさん、私のPCはMacなのですが、写真編集ソフトを使っています。
Winでは最初から入っているのかな!?
もし無い場合はフリーソフトをダウンロードする手もありますよ!

<< チャイブ ☆ Aglio Se... 仲間とGWバーベキュー!!<後... >>