Calendar
Sun Mon Tue Wed Thu Fri Sat
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>
RECOMMEND
最新記事タイトル
最新コメント
カテゴリ
これまでの記事
最新トラックバック
お勧めサイト
管理人の紹介

そらのいろつちのいろ

スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
第四回 画像を差し込むには
はてさて、
大体、色などの変え方はわかってきましたね?
ではでは、画像!これの差し替えを
説明したいと思います。
ちょっと大変ですが、
一つ一つ着実にやってみましょうね。
ゆっくり、焦らず、凹まず?

まず、当たり前ですが、画像を用意してください。
差し替えたい場所にあうサイズで
(適当にやって、後で習性してもOKです)
自分らしさを表現できるものがいいですね。

写真でも、イラストでも、テキストでも・・。
例えば、お料理主体や、雑貨主体のblogなら、
家にあるお鍋(ルクとか)
こまごましたおもちゃ類などを写真にしても
いいですよね。
ルクが色とりどりで並んでいても、
個人で楽しむ範囲ですから、
なんら問題ありません。


まず、最初にタイトル部分を画像に差し替えるやり方です。
私のblogの場合で言う、
「そらのいろ つちのいろ」の部分ですね。

私の場合は、HPを持っているので、
(持ってない方、画像を共有する必要の無い方は、
簡単な方法があるので、また後で追記いたします)
リモートサイトに画像をUPして、
それをブラウザで開き、画像にカーソルをあてて、
左クリックして、プロパティを開きます。
そこに、その画像のURLが表示されていますので、
そのURLをメモしておきます。

この後の説明、私が書いてもいいんですが、
こちら方がわかりやすく説明してくださっていますので、
この方法を一度参照ください。
で、この中に出てくる、

<h1 class="site_title"><img src="./?image=XX" width="XX" height="XX" alt="サイトのタイトル" /></h1>
って所の、

<h1 class="site_title"><img src="この部分に" width="XX" height="XX" alt="サイトのタイトル" /></h1>

先ほどメモしていたURL、
http://〜(差し替えたい画像のアドレス)を入れるのですが・・
画像に差し替えると、
「タイトルをクリックすることで、そのblogのHomeに飛ぶ」という
機能が失われてしまいます。
ですので、リンク機能もそのまま保ちたい人は、

<h1 class="site_title">
<a href="http://自分のJUGEMアドレス">
<img src="http://差し替えたい画像アドレス" border="0" alt="サイトのタイトル" />
</a>
</h1>

こちらのほうを、HTML編集フォームの
<!-- BEGIN title --> の上か
<!-- END title --> の下にいれます。

タイトルの背景画像だけ変更したい方はこちらを参考にさせていただきましょう。

で、一番後ろの背景画像なんですが、
これまた、テンプレートによって色々なのですが、
私の使用している、FLATの場合ですと、

body {
margin: 0px 0px 0px 0px;
background: url(背景画像のURL);
}

と変更します。
ちなみに、私は、背景の画像をJUGEMにUPしてあるので、
背景画像のURLの部分に、
itinisan-daa.jugem.jp/?image=15って入ってます。

このあたりは、そのテンプレによって、様々違う所ですので、
こちらの方で、テンプレートの名前で検索されると
知りたい情報が見つけやすいと思います。

で、その検索方法がちょっとわかりにくいので、
簡単に説明すると、TOPの、タイトルの下にある、
「過去ログ」を開いて、
ページの部分を順番に表示するのですが、
いちいち、「移動」ボタンをクリックしてから、
検索用語を入れて検索してください。
かなりの情報量なので、欲しい情報は見つかると思います。
それでダメなら、
掲示板TOPで質問してみてくださいね。
(できるだけ探してみましょうね)

あと、スクロールバーですが、
これはHPをお持ちの方なら、容易にわかると思いますが、
私の場合は、CSS編集の一番最初に以下のものを差し込んでいます。

html {
scrollbar-3dlight-color : #FFFFFF;
scrollbar-arrow-color : #333333;
scrollbar-base-color : #FFFFFF;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-highlight-color : #FFFFFF;
scrollbar-shadow-color : #333333;
scrollbar-track-color : #FFFFFF;
}

ただ、環境によって変わらない場合もあるそうです。
変わらない方は、こちらを参考にしてみてください。

色は#333333っていうところの数値を
変更したりしてオリジナルを作っていくわけです。
ちなみに、scrollbar-arrow-color ってのが矢印部分の色。
他の所は、自分で色を変えたりして、
確認してみてください。
(文章で説明してもわかりづらいので)
色見本は第三回を参照して下さい。

では、次回は最終回?
その他細々としたことをまとめます。

追記:画像UPですが、ホームページを持ってない場合、
直接JUGEMにUPしちゃいます。(写真UPと一緒)
もちろん、ホームページをお持ちでない方にもお勧めです。
そこのURLを
(管理ページの画像の管理の写真をクリックすると、表示されます)
使ってくださいね。

| 素人専用JUGEM開発日誌 | 18:21 | comments(4) | trackbacks(0) |
スポンサーサイト
| - | 18:21 | - | - |
う〜んなかなか難しい。
私もピンクのテンプレートは自分的にはイマイチなので
変えてみたいと思うのですが。
ほんと初心者なので。
ぼちぼちがんばります。
| myuntan | 2004/08/28 10:37 AM |
こうしたい!という
欲が出てきたら!で良いと思います。
そうでないと、気力が続かないです(笑

| niko | 2004/08/28 12:15 PM |
難しく感じちゃいます。
おまけに活字じたい弱いので頭の中が
プスプス・・・っぷしゅ〜〜っ・・・状態です^^

でもコメントができる事をまなびました〜*
| sora | 2004/08/29 1:26 AM |
難しいですよね?
いきなりだと難しいと思います。
blogに慣れてからでないと、
わかりにくいとこもあるし・・。
blogは習うより慣れろって感じで、
やりはじめないと
わからないんですよねーー。
| niko | 2004/08/29 8:05 AM |









http://itinisan-daa.jugem.jp/trackback/92